/* =============================================================================
   charte.css — skin cfecgc_blog_skin
   Socle de charte : variables, police, échelle typographique, boutons.
   Aucun composant ici — en-tête, cartes, article et mobile ont leurs lots.
   Posé le 29/08/2026.

   ORDRE DE CHARGEMENT, à connaître avant d'écrire une ligne dans ce fichier :

     superbundle Bootstrap  →  style.css  →  charte.css  →  #evo_skin_styles
                                                            →  head_includes

   Nous gagnons donc sur Bootstrap et sur style.css, mais NON sur le bloc
   #evo_skin_styles, qui est généré par les réglages de skin du back-office et
   qui possède :
       #skin_wrapper { font-family | font-weight | background-color | color }
       a { color }   a:hover { color }
       .panel  .pagination  .nav-tabs  .evo_hasbgimg  .evo_image_block img
   dont .pagination li.active a { background-color: … !important }.

   RÈGLE : la palette vit dans les réglages de skin, la structure vit ici.
   Seule exception, la police — la liste du back-office ne contient pas Jost —
   pour laquelle on monte d'un cran de spécificité. Pas un seul !important.

   NOMS DES VARIABLES : ce sont ceux des maquettes du 28/08, volontairement,
   pour que leur CSS se transpose mécaniquement. La maquette mobile emploie des
   abréviations (--g9 --g6 --g2 --g1 --lav) : les traduire à la transposition.

   🔴 DEUX POLICES, ET C'EST UNE DÉCISION, PAS UN OUBLI.
   Jost est une géométrique de la lignée Futura : tracé d'épaisseur uniforme,
   formes construites au compas, ouvertures fermées, `s` à axe diagonal marqué.
   Magnifique en titrage, fatigante en lecture suivie — à 16 px l'œil travaille
   à chaque mot. La collection 4 (forum) a tranché la question le 13/08, APRÈS
   l'avoir vue en texte courant : Jost aux titres, à la navigation et aux
   boutons, pile système au corps de texte, 16 px / 1,6.
   Les maquettes du 28/08 posent `body{font-family:Jost}` sans rejouer cette
   question. C'est la décision du forum qui fait foi — confort de lecture,
   cohérence blog/forum, et un accord handicap signé qui rend l'argument moins
   négociable qu'une préférence. Arbitré par Yorgos le 29/08.
   ⚠️ À signaler à Léonie pour son premier jet de maquette.
   ============================================================================= */

:root{

  /* ---- Marine ------------------------------------------------------------ */
  --marine:        #00139A;
  --titre:         #00139A;   /* marine employe en texte (dedouble pour la nuit) */   /* en-tête, titres de section, badges, boutons   */
  --marine-d:      #070C4D;   /* dégradé de l'affiche                          */
  --marine-txt:    #030726;   /* titres d'article, texte de carte, pied de page*/

  /* ---- Vermillon — accent unique, 4,73:1 sur blanc ----------------------- */
  --orange:        #E02A0D;   /* filet, boutons, aplats, CTA                   */
  --orange-700:    #E02A0D;   /* alias : vestige de l'ancienne échelle, employé
                                 tel quel par les maquettes. À résoudre quand
                                 l'échelle de Léonie arrivera.                 */
  --orange-txt:    #C42408;   /* texte vermillon sur blanc — second ton, plus
                                 sombre : libellé du bouton blanc du CTA       */
  --orange-pale:   #FFE9E4;   /* survol du bouton blanc sur aplat vermillon    */

  /* ---- Lilas ------------------------------------------------------------- */
  --lilas:         #C6C8FC;   /* avatars, texte du pied de page                */
  --lilas-pale:    #EEEFFE;   /* sommaire, badges, KPI, dégradé du chapeau     */
  --lavande:       #E7E8FD;
  --lavande-txt:   #E7E8FD;   /* lavande employee en texte sur marine (tiroir)   */   /* fond des vignettes  (--lav en mobile)         */

  /* ---- Neutres ----------------------------------------------------------- */
  --gris-9:        #3D3D46;   /* texte courant                                 */
  --gris-6:        #6B6B74;   /* texte secondaire, méta                        */
  --gris-2:        #E1E1E3;   /* toutes les bordures                           */
  --gris-1:        #F4F4F6;
  --surface:       #fff;      /* fond des surfaces (page, cartes, champs)        */   /* pastilles, tags, séparateurs de liste         */

  /* ---- Typographie ------------------------------------------------------- */
  /* Titres, navigation, boutons, badges, étiquettes : */
  --police-titre: 'Jost', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  /* Corps de texte, formulaires : pile système, comme sur le forum. */
  --police-texte: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --g-normal: 400;  --g-moyen: 500;  --g-demi: 600;  --g-noir: 900;

  --t-h1-art:   33px;   /* titre d'article            */
  --t-h1-hero:  31px;   /* titre du chapeau d'accueil */
  --t-h2:       22px;   /* intertitre d'article       */
  --t-h2-sec:   21px;   /* titre de section           */
  --t-h3-feat:  20px;   /* titre de carte mise en avant */
  --t-h3:     16.5px;   /* titre de carte             */
  --t-corps:    16px;   /* paragraphe — valeur du forum, 13/08 */
  --t-base:   15.5px;   /* texte d'interface          */
  --t-petit:  14.5px;
  --t-meta:   13.5px;
  --t-mini:   12.5px;

  --lh-corps: 1.5;    /* valeur du forum, 13/08 */
  --lh-titre: 1.18;

  /* ---- Espacements ------------------------------------------------------- */
  --e-1: 4px;  --e-2: 8px;  --e-3: 12px; --e-4: 16px; --e-5: 22px;
  --e-6: 26px; --e-7: 34px; --e-8: 40px; --e-9: 48px;

  /* ---- Rayons ------------------------------------------------------------ */
  --r-pilule: 99px;  /* boutons, badges, chips, tags */
  --r-cta:     16px;
  --r-carte:   14px; /* cartes, encarts, sommaire, pagination d'article */
  --r-encart:  12px;
  --r-champ:   10px;
  --r-lien:     8px;
  --r-filet:    2px;

  /* ---- Traits et ombres -------------------------------------------------- */
  --trait:        1px solid var(--gris-2);
  --trait-fort: 1.5px solid var(--gris-2);
  --filet:        3px;                        /* filet vermillon sous l'en-tête */
  --ombre-carte:  0 8px 24px rgba(0,19,154,.12);

  /* ---- Mesures ----------------------------------------------------------- */
  --lecture:  66ch;    /* largeur de lecture — décision actée               */
  --article:  720px;
  --page:    1120px;
  --colonne:  300px;
  --entete:    58px;
  --entete-m:  52px;
  --cible:     44px;   /* cible tactile minimale, mobile                    */
}


/* =============================================================================
   1. POLICES
   #evo_skin_styles émet `#skin_wrapper { font-family: … }` APRÈS cette feuille.
   `body #skin_wrapper` vaut (1,0,1) contre (1,0,0) : on passe devant par la
   spécificité, sans !important. Le réglage « Police par défaut » du back-office
   reste sur Helvetica Neue — il n'a ni Jost ni pile système dans sa liste, et
   le laisser en l'état documente qu'il n'est PAS la source de vérité.

   Le corps de texte prend la pile système ; Jost est appelée nommément sur ce
   qui relève du titrage et de l'interface. Les champs de formulaire n'héritent
   pas de font-family : ils sont listés, côté texte.
   ============================================================================= */

body #skin_wrapper{
  font-family: var(--police-texte);
  line-height: var(--lh-corps);
}

/* Le corps de texte. On pose la taille sur les éléments et non sur le
   conteneur : Bootstrap 3 bâtit toute son échelle sur 14 px, et remonter la
   racine déplacerait des choses qu'on ne veut pas déplacer. C'est la règle du
   forum, éprouvée depuis le 13/08.                                            */
#skin_wrapper p,
#skin_wrapper li,
#skin_wrapper td,
#skin_wrapper dd{
  font-size: var(--t-corps);
  line-height: var(--lh-corps);
}

#skin_wrapper input, #skin_wrapper select, #skin_wrapper textarea,
#skin_wrapper .form-control{
  font-family: var(--police-texte);
}

/* Jost : titrage et interface. */
#skin_wrapper h1, #skin_wrapper h2, #skin_wrapper h3,
#skin_wrapper h4, #skin_wrapper h5, #skin_wrapper h6,
#skin_wrapper .btn,
#skin_wrapper .navbar, #skin_wrapper .nav,
#skin_wrapper .badge, #skin_wrapper .evo_status,
#skin_wrapper .panel-heading, #skin_wrapper .panel-title,
#skin_wrapper .pager, #skin_wrapper .pagination{
  font-family: var(--police-titre);
}

#skin_wrapper h1, #skin_wrapper h2, #skin_wrapper h3{
  font-weight: var(--g-noir);
  line-height: var(--lh-titre);
  color: var(--titre);
}
#skin_wrapper h4, #skin_wrapper h5, #skin_wrapper h6{
  font-weight: var(--g-demi);
  color: var(--titre);
}


/* =============================================================================
   2. BOUTONS — les deux règles de la charte
     (a) libellés insécables ;
     (b) blanc sur vermillon.

   🔴 LA COMPENSATION D'ASSIETTE A ÉTÉ RETIRÉE LE 31/08/2026 — elle était fausse.
   La version du 29/08 décalait le texte vers le bas de 3, 3, 2 et 1 px selon la
   taille, pour « compenser les ascendantes de Jost ». Ces valeurs venaient d'une
   maquette dessinée à 15 px, et le commentaire d'alors disait lui-même qu'elles
   restaient à vérifier à l'œil, les deux plus petites étant une extrapolation.
   🎯 LA MESURE, PRISE AU LOT 21 : dans la line-box de 24 px d'un .btn-lg, la
   ligne de base tombe à 17,63 px du haut et les capitales culminent à 12,86 — il
   reste 4,77 px au-dessus des capitales et 6,37 sous la ligne de base. Le texte
   est donc DÉJÀ centré à 0,8 px près par le seul calcul de la line-box, et les
   +3 px l'envoyaient 2,2 px trop bas. Ça se voyait.
   ✅ Éprouvé à l'œil sur deux tailles, deux fois sur deux : la valeur juste est
   celle de Bootstrap — 10/10 pour .btn-lg, 6/6 pour .btn.
   ⚠️ .btn-sm et .btn-xs n'ont PAS été éprouvés : aucune page du groupe A n'en
   porte. Leur règle tombe par le même raisonnement, pas par une mesure. Si un
   petit bouton paraît décalé quelque part, c'est ici qu'il faut revenir.
   📌 Et la leçon dépasse les boutons : une compensation d'assiette ne dépend pas
   du corps mais du RAPPORT INTERLIGNE/CORPS — 1,43 pour .btn, 1,33 pour .btn-lg.
   Une valeur proportionnelle à la taille aurait été fausse elle aussi.
   ============================================================================= */

#skin_wrapper .btn{
  white-space: nowrap;
  font-weight: var(--g-demi);
  border-radius: var(--r-pilule);
}

/* Bootstrap 3 pose un dégradé sur les boutons : sans background-image, le
   fond plat de la charte reste sali par un voile.                            */
#skin_wrapper .btn-primary,
#skin_wrapper .btn-info,
#skin_wrapper .btn-warning,
#skin_wrapper .btn-success{
  background-color: var(--orange);
  background-image: none;
  border-color: var(--orange);
  color: #fff;
}
#skin_wrapper .btn-primary:hover, #skin_wrapper .btn-primary:focus,
#skin_wrapper .btn-info:hover,    #skin_wrapper .btn-info:focus,
#skin_wrapper .btn-warning:hover, #skin_wrapper .btn-warning:focus,
#skin_wrapper .btn-success:hover, #skin_wrapper .btn-success:focus{
  background-color: var(--orange-txt);
  border-color: var(--orange-txt);
  color: #fff;
}

#skin_wrapper .btn-default{
  background-color: var(--surface);
  background-image: none;
  border: var(--trait-fort);
  color: var(--titre);
}
#skin_wrapper .btn-default:hover, #skin_wrapper .btn-default:focus{
  border-color: var(--marine);
  color: var(--titre);
}

/* Cibles tactiles : 44px minimum, décision actée pour le mobile.
   Posé ici et non dans le lot mobile, parce que ça vaut sur tous les écrans
   tactiles, y compris les tablettes en paysage servies par la cible desktop. */
@media (pointer: coarse){
  #skin_wrapper .btn,
  #skin_wrapper .evo_widget a.btn{ min-height: var(--cible); }
}


/* =============================================================================
   3. LIENS
   La couleur de base vient du réglage `page_link_color` (marine) et du survol
   `page_hover_link_color` (vermillon) — voir la règle d'architecture en tête.
   Ici on ne pose que ce que les réglages ne savent pas dire.
   ============================================================================= */

#skin_wrapper a{ text-decoration: none; }
#skin_wrapper a:hover{ text-decoration: underline; }

/* Le focus clavier doit rester visible : Bootstrap 3 l'efface sur .btn. */
#skin_wrapper a:focus-visible,
#skin_wrapper .btn:focus-visible,
#skin_wrapper input:focus-visible,
#skin_wrapper button:focus-visible{
  outline: 2px solid var(--orange);
  outline-offset: 2px;
}


/* =============================================================================
   4. EN-TÊTE DE SITE
   ⚠️ Le balisage vient du skin de SITE (default_site_skin), commun aux quatre
   collections — mais ces règles ne sont chargées que par notre skin. Après la
   bascule, le blog aura la charte et le forum gardera l'ancien en-tête jusqu'au
   lot 12. C'est voulu, pas un oubli.

   ⚠️ Le skin de site GÉNÈRE en PHP un bloc <style> émis à l'octet ~3794, donc
   APRÈS cette feuille (~2154) :
       #evo_site_header { position:fixed; top:0; width:100%; z-index:10000 }
       body.evo_toolbar_visible #evo_site_header { top:27px }
       body { padding-top:43px }
   On ne le déplace pas par l'ordre. On monte d'un cran de spécificité :
   `html body` (0,0,2) contre `body` (0,0,1), `body #evo_site_header` (1,0,1)
   contre `#evo_site_header` (1,0,0). Aucun !important.

   ⚠️ Le logo porte style="width:32px" en ATTRIBUT HTML : inatteignable en CSS
   sans !important. La maquette dit 34 px ; deux pixels ne valent pas ça.
   ============================================================================= */

/* 58 px de barre + 3 px de filet vermillon = 61 px de compensation. */
html body{ padding-top: calc(var(--entete) + var(--filet)); }

body #evo_site_header{
  background: var(--marine);
  background-image: none;          /* le skin de site pose un dégradé gris */
  filter: none;                    /*   et un filtre IE pour l'accompagner  */
  border-bottom: var(--filet) solid var(--orange);
  box-shadow: none;
  color: #fff;
  font-family: var(--police-titre);
  font-size: var(--t-base);
  font-weight: var(--g-normal);
}

/* La barre passe en flex. L'existant est en float + un <div class="clear">
   qui devient un enfant flex inutile : on le retire.                         */
body #evo_site_header .evo_container__site_header{
  display: flex;
  align-items: center;
  gap: var(--e-2);
  height: var(--entete);
  padding: 0 var(--e-6);
}
body #evo_site_header .evo_container__site_header > .clear{ display: none; }
body #evo_site_header .floatright{ float: none; margin-left: 0; order: 91; }
/* Le sous-conteneur de DROITE reste une boite flex. */
body #evo_site_header .widget_core_subcontainer.floatright{
  display: flex;
  align-items: center;
  gap: var(--e-1);
}

/* Le sous-conteneur de GAUCHE s'efface. `display: contents` promeut ses enfants
   au rang d'enfants flex de la barre : on peut alors donner un `order` a la
   pilule « Adherer » et la placer avec le groupe de droite, comme la maquette.
   🔴 POURQUOI PAS EN BACK-OFFICE : le conteneur `site_header` porte
   `wico_coll_ID = NULL` — il est PARTAGE PAR LES QUATRE COLLECTIONS. Deplacer
   le widget y changerait la barre de la PRODUCTION immediatement.
   ⚠️ `display: contents` retire l'element de l'arbre d'accessibilite. Verifie
   sur la page servie : ce <span> ne porte ni role ni aria-label, seulement des
   classes de widget. Aucun effet pour un lecteur d'ecran. */
body #evo_site_header .widget_core_subcontainer:not(.floatright){
  display: contents;
}
body #evo_site_header .widget_core_colls_list_public{
  display: flex;
  align-items: center;
  gap: var(--e-1);
}

/* Liens de navigation. */
body #evo_site_header a{
  color: var(--lavande-txt);
  padding: 8px 14px;
  border-radius: var(--r-lien);
  font-weight: var(--g-moyen);
  font-size: var(--t-base);
  text-decoration: none;
  text-shadow: none;
}
body #evo_site_header a:hover,
body #evo_site_header a.selected,
body #evo_site_header .floatright a:hover,
body #evo_site_header .floatright a.selected{
  background: rgba(255,255,255,.14);
  background-image: none;
  filter: none;
  color: #fff;
  font-weight: var(--g-demi);
  text-decoration: none;
  text-shadow: none;
}

/* « Adhérer » — le bouton d'action, seul aplat vermillon de la barre.
   Assiette compensée : 11 en haut, 8 en bas, hauteur inchangée.             */
/* C'est « Adherer » qui absorbe l'espace libre : il ouvre le groupe de droite. */
body #evo_site_header .menu-adherer{ order: 90; margin-left: auto; }

body #evo_site_header .menu-adherer a{
  background: var(--orange);
  color: #fff;
  font-weight: var(--g-demi);
  border-radius: var(--r-pilule);
  display: inline-flex;
  align-items: center;
  height: 38px;
  padding: 3px 18px 0;
  font-size: 15px;
  line-height: 1;
  white-space: nowrap;
}
body #evo_site_header .menu-adherer a:hover{
  background: var(--orange-txt);
  color: #fff;
}

/* « S'inscrire » — lien simple, comme « Se connecter ».
   Le skin de site en fait un aplat blanc à texte noir, qui rivalisait
   visuellement avec « Adhérer ». Un seul aplat plein doit subsister dans la
   barre, et c'est l'action principale. Arbitré par Yorgos le 29/08.
   `body #evo_site_header a.bg-white` vaut (1,1,2) contre (1,1,1) : on passe
   devant sans !important.                                                    */
body #evo_site_header a.bg-white{
  background: transparent;
  border: 0;
  border-radius: var(--r-lien);
  color: var(--lavande-txt);
  padding: 8px 14px;
  margin-right: 0;
  font-weight: var(--g-moyen);
}
body #evo_site_header a.bg-white:hover{
  background: rgba(255,255,255,.14);
  color: #fff;
}

/* Le burger : masque SVG recoloré, cible tactile portée à 44 px. */
body #evo_site_header label[for="nav-trigger"]{
  background-color: var(--surface);
  top: 0;
  margin: 0 var(--e-1);
}

/* Tiroir mobile — habillage seulement ; son contenu est l'affaire du lot 9. */
body .evo_container__navigation_hamburger{
  background-color: var(--marine-d);
}
body .evo_container__navigation_hamburger .evo_navigation_hamburger_list a.default,
body .evo_container__navigation_hamburger .evo_navigation_hamburger_list a.selected{
  color: var(--lavande-txt);
  font-family: var(--police-titre);
  font-weight: var(--g-moyen);
  background-image: none;
  filter: none;
  text-shadow: none;
}
body .evo_container__navigation_hamburger .evo_navigation_hamburger_list > li:hover{
  background-image: none;
  filter: none;
}


/* =============================================================================
   5. PIED DE PAGE
   Reprend quatre règles qui vivaient dans le bloc `head_includes` de la
   collection. Elles y étaient en !important faute de mieux ; ici elles gagnent
   par l'ordre et par la spécificité. C'est la première tranche du compteur
   d'avancement : chaque règle qui arrive ici doit sortir de head_includes.
   ============================================================================= */

/* Pleine largeur, sans `100vw` — qui déborde de la largeur utile dès qu'une
   barre de défilement verticale existe, et provoque un défilement horizontal.
   Un box-shadow de 100vw d'étalement peint la couleur jusqu'aux bords ; le
   clip-path le borne verticalement pour qu'il ne bave pas au-dessus.         */
#skin_wrapper .container > footer.row{
  background: var(--marine-txt);
  color: var(--lilas);
  margin: var(--e-9) 0 0;
  padding: var(--e-6) var(--e-8);
  border-radius: 0;
  box-shadow: 0 0 0 100vw var(--marine-txt);
  clip-path: inset(0 -100vw);
  font-size: var(--t-petit);
}
#skin_wrapper .container > footer.row p.center{
  margin: 0;
  color: var(--lilas);
}
#skin_wrapper .container > footer.row a{
  color: #fff;
  text-decoration: none;
}
#skin_wrapper .container > footer.row a:hover{
  text-decoration: underline;
  color: #fff;
}

/* --- Reprises du bloc head_includes ---------------------------------------
   ⚠️ Ces quatre règles doivent être RETIRÉES de head_includes une fois cette
   feuille en place, sinon le compteur ne descend pas. Voir le PV.            */

/* Le logo b2evolution est appelé en dur dans le gabarit du skin. Le masquer
   est licite : la GPL n'en fait pas une obligation, c'est une demande de
   l'éditeur.                                                                 */
#skin_wrapper .powered_by{ display: none; }

/* Le conteneur de pied de site est vide, mais le skin le rend quand même,
   avec son fond gris. Le `:empty` est volontaire : il réapparaîtra le jour où
   on y remettra un widget.                                                   */
#evo_site_footer:empty{ display: none; }

/* Lien « Aide » du pied de collection — sans contenu utile aujourd'hui. */
#skin_wrapper .help_link{ display: none; }

/* Entrées d'administration — RETIRÉES DU SITE PUBLIC LE 31/08/2026 (lot 14).
   Les trois liens Stats / Utilisateurs / Dmarc étaient des widgets du conteneur
   PARTAGÉ « right_navigation » — wi_ID 733, 734, 735 — donc servis à tout
   visiteur des quatre collections, et masqués ici par deux règles CSS.
   🔴 UN MASQUAGE N'A JAMAIS ÉTÉ UNE PROTECTION : un `curl` les voyait.
   Ils sont désormais désactivés côté serveur (wi_enabled = 0) et regroupés dans
   un onglet « CFE-CGC » du back-office, porté par le plugin `sf_admin` — hors
   skin, hors cœur, donc rien à rejouer à la bascule.
   ⚠️ NE PAS REMETTRE DE RÈGLE ICI. Si ces liens réapparaissaient dans le HTML,
   c'est que les widgets ont été réactivés : c'est là qu'il faut aller.
   📌 Le `head_includes` des collections 1, 4 et 5 porte encore les deux mêmes
   règles, devenues inertes — dette R-8/R-9, à solder à la bascule.           */


/* =============================================================================
   6. ACCUEIL — VUE VISITEUR ET VUE INSCRIT
   🔴 REMPLACE LE DÉFAUT D'ACCESSIBILITÉ DU § 4.2.
   Le bloc maison faisait ceci :
       body.anonymous .widget_core_coll_post_list h3        { font-size: 0 }
       body.anonymous .widget_core_coll_post_list h3::before{ content: "Articles en accès libre" }
   Un voyant lisait « Articles en accès libre », un lecteur d'écran annonçait
   « Plus de posts ». Deux publics, deux titres. Sur un site qui porte un accord
   handicap signé, ça ne pouvait pas rester.

   Désormais TROIS widgets à vrais titres, écrits en back-office :
       « À la une »               coll_featured_posts   — inscrit
       « Articles en accès libre » coll_post_list (863) — visiteur
       « Tous les articles »       coll_post_list (758) — inscrit
   Le même texte est vu et entendu.

   ⚠️ POURQUOI DES SÉLECTEURS DE VOISINAGE ET PAS DES CLASSES.
   Le widget « Liste des posts » n'expose pas `widget_css_class` — ses 22
   paramètres ne le contiennent pas, contrairement au « Bloc de Contenu ». On
   distingue donc les deux listes par leur RELATION, pas par une position
   comptée : ajouter ou retirer un bloc de contenu dans le conteneur ne casse
   rien. Seul un changement de l'ordre relatif À la une → visiteur → inscrit le
   ferait, et c'est précisément ce qu'on maîtrise.
   Le `+` fonctionne même quand « À la une » est masqué : `display:none` retire
   de l'affichage, pas du DOM.
   ============================================================================= */

/* 🔴 LES QUATRE REGLES DE TRI ONT ETE RETIREES LE 29/08 AU SOIR, lot 6d.
   Le tri ne se fait plus apres envoi mais AVANT : `_front.disp.php` appelle
   `front_page_member` pour un inscrit et `front_page_secondary_area` pour un
   visiteur. Ce qui n'est pas rendu n'est pas envoye.

   🔴 CE N'ETAIT PAS DU MENAGE, C'ETAIT UNE CONDITION DU DEPLACEMENT.
   Une fois 757 et 758 seuls dans le conteneur membre, ils deviennent freres
   ADJACENTS : la regle `body.loggedin .widget_core_coll_featured_posts +
   .widget_core_coll_post_list` aurait masque « Tous les articles » pour tous
   les inscrits. Retirer la feuille d'abord, deplacer ensuite.

   Les notes qui suivent sont conservees pour memoire : le raisonnement sur
   l'accessibilite vaut toujours, celui sur les selecteurs de voisinage est
   caduc — il n'y a plus deux listes dans un meme conteneur a distinguer.
   ---- ancienne note ----
   Le visiteur n'a qu'une liste : la sienne. */

/* L'inscrit a « À la une » puis « Tous les articles ». */

/* L'invitation à s'inscrire ne concerne que le visiteur.
   Elle est passée en fin de conteneur (ordre 8) : le visiteur voit donc
   chapeau → affiche → articles libres → invitation, ce que demande la cible.
   Reprise du bloc maison.                                                     */

/* =============================================================================
   7. ACCUEIL — HABILLAGE DES TROIS BLOCS DE CONTENU
   Chapeau (post 40) · Affiche (post 157) · Invitation (nouveau bloc).
   Posé le 29/08/2026, lot 5.

   ⚠️ TOUT EST PORTÉ PAR `body.disp_front`. Le conteneur `header` et le titre de
   collection existent sur TOUTES les pages du skin : sans ce préfixe, le bandeau
   de chapeau s'appliquerait aussi à la page article, qui est l'affaire du lot 8.

   ⚠️ LE CHAPEAU EST COUPÉ EN DEUX DANS LE BALISAGE. Le <h1> vit dans le conteneur
   `header`, une .row ; le texte d'accroche vit dans le premier bloc de contenu,
   une autre .row. La maquette en fait un seul bandeau. On pose donc la MÊME
   couleur de fond sur les deux, en pleine largeur : la jointure est invisible.

   📌 UNE SEULE TECHNIQUE DE PLEINE LARGEUR : box-shadow de 100 vw borne
   par `clip-path: inset(0 -100vw)`, celle du pied de page (§ 5).
   🔴 POURQUOI PAS `calc(50% - 50vw)` — corrige le 29/08 au soir.
   Cette technique suppose que le bloc est CENTRE dans la fenetre. Il l'est
   pour un visiteur (col-md-12, lot 5), il ne l'est PAS pour un inscrit : la
   barre laterale decale la colonne de la moitie de sa largeur, soit 146 px a
   toute largeur de fenetre >= 1200 px, et la bande laissait autant de blanc a
   droite. Le box-shadow s'etend de 100 vw depuis CHAQUE bord : insensible au
   decalage. Ecart assume, deja consigne : la bande est un APLAT, un
   box-shadow ne sachant etaler qu'une couleur.
   ---- ancienne note, conservee pour memoire ----
   DEUX TECHNIQUES DE PLEINE LARGEUR, ET IL EN FALLAIT DEUX.
   Le titre porte un APLAT : un `box-shadow` de 100 vw suffit, et c'est la
   technique eprouvee du pied de page (§ 5).
   Le chapeau porte un DEGRADE : un box-shadow ne sait etaler qu'une couleur.
   On passe donc par `calc(50% - 50vw)` en marge negative, compense par un
   padding inverse. Cette technique deborde de la largeur de la barre de
   defilement — le defaut qui l'avait fait ecarter au § 5 — et c'est
   `overflow-x: clip` sur `html` qui le coupe. ⚠️ `clip` et NON `hidden` :
   `hidden` etablirait un conteneur de defilement, `clip` non. L'en-tete fixe
   et le pied de page ne sont pas affectes.
   Le degrade part de la MEME couleur que l'aplat du titre : la jointure entre
   les deux .row est invisible.
   ============================================================================= */

:root{
  /* Ajout du lot 5 — à remonter dans le bloc de variables à la prochaine passe. */
  --filet-affiche: 6px;   /* filet vermillon en pied d'affiche, valeur maquette */
}


/* --- 7.1 Le chapeau — bandeau lilas pâle, pleine largeur ------------------ */

body.disp_front #skin_wrapper .container > header.row{
  background: var(--lilas-pale);
  box-shadow: 0 0 0 100vw var(--lilas-pale);
  clip-path: inset(0 -100vw);
  padding-top: var(--e-7);
  padding-bottom: var(--e-2);
}

body.disp_front #skin_wrapper .container > header.row .widget_core_coll_title h1{
  font-size: var(--t-h1-hero);
  font-weight: var(--g-noir);
  line-height: var(--lh-titre);
  color: var(--titre);
  margin: 0;
  max-width: none;
}

/* Le texte d'accroche — même fond, la bande continue. */
html{ overflow-x: clip; }

/* 🔄 29/08, 00 h 15 — LE DEGRADE EST RENDU, ET LE DECALAGE RESTE SANS EFFET.
   La correction du cadre blanc avait remplace le degrade par un aplat : un
   box-shadow ne sait etaler qu'une couleur. Un pseudo-element le sait, lui —
   et il garde la propriete qui compte : il deborde de 100 vw DEPUIS CHAQUE
   BORD, donc il se moque de savoir si le bloc est centre dans la fenetre.
   C'est ce qui distingue cette voie de `calc(50% - 50vw)`, qui, elle, en
   depend et laissait 146 px de blanc a droite pour un inscrit (P-287).
   📌 `isolation: isolate` n'est pas decoratif : sans lui, le z-index negatif
   ferait passer la bande DERRIERE le fond blanc de #skin_wrapper, donc
   invisible. Il enferme le pseudo-element dans le contexte d'empilement du
   bloc, ou il se range simplement sous le texte.
   📌 Le debordement est coupe par la PAIRE de regles : le clip sur
   html du § 7.1 empeche la propagation, le clip sur body du § 7.1 bis
   decoupe. Mesure du 31/08 : retirer l'une des deux ramene 1 326 px
   de defilement horizontal.                                          */

body.disp_front #skin_wrapper .evo_container__front_page_secondary_area
  > .widget_core_content_block:first-child,
body.disp_front #skin_wrapper .sf_chapeau_membre{
  position: relative;
  isolation: isolate;
  background: transparent;
  padding-bottom: var(--e-7);
  margin-bottom: var(--e-8);
}
body.disp_front #skin_wrapper .evo_container__front_page_secondary_area
  > .widget_core_content_block:first-child::before,
body.disp_front #skin_wrapper .sf_chapeau_membre::before{
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: -100vw;
  right: -100vw;
  background: linear-gradient(180deg, var(--lilas-pale), var(--surface));
}

body.disp_front #skin_wrapper .evo_container__front_page_secondary_area
  > .widget_core_content_block:first-child p{
  max-width: none;
  text-wrap: pretty;
  color: var(--gris-9);
  margin-bottom: var(--e-3);
}

/* Le <hr> de fin de chapeau porte ses marges en ATTRIBUT style, donc
   inatteignable — mais `display` n'y est pas, et c'est tout ce qu'il nous faut.
   Le bandeau de couleur remplace le filet : il n'a plus d'objet. */
body.disp_front #skin_wrapper .evo_container__front_page_secondary_area
  > .widget_core_content_block:first-child hr{
  display: none;
}


/* --- 7.2 L'affiche — RETIREE le 29/08 au soir ---------------------------
   La maquette ne prevoit pas d'affiche sur l'accueil : la classe `.affiche` y
   existe dans la feuille mais n'est employee dans AUCUN de ses HTML — du CSS
   orphelin d'une version anterieure. Widget 756 desactive en back-office
   (on desactive, on ne supprime pas) ; l'habillage qui vivait ici devenait du
   code mort. Il reste dans charte.css.bak9-2026-08-29.                      */

/* --- 7.3 L'invitation à l'inscription — aplat vermillon ------------------- */
/* Les classes `cta-*` sont écrites dans le CONTENU du bloc, pas produites par
   le moteur. C'est assumé : le moteur n'expose aucune accroche à l'intérieur
   d'un bloc de contenu, et le seul autre chemin serait du style en ligne dans
   l'article — c'est précisément ce qu'on retire.                              */

#skin_wrapper .cta-inscription{
  background: var(--orange);
  border-radius: var(--r-cta);
  color: #fff;
  padding: var(--e-6) var(--e-7);
  display: flex;
  gap: var(--e-5);
  align-items: center;
  margin: var(--e-7) 0 var(--e-2);
}

#skin_wrapper .cta-inscription .cta-txt{ flex: 1; }

#skin_wrapper .cta-inscription h2,
#skin_wrapper .cta-inscription h3,
#skin_wrapper .cta-inscription h4{
  font-family: var(--police-titre);
  font-weight: var(--g-noir);
  font-size: var(--t-h3-feat);
  line-height: var(--lh-titre);
  color: #fff;
  margin: 0 0 var(--e-1);
}

#skin_wrapper .cta-inscription p{
  font-size: var(--t-petit);
  line-height: var(--lh-corps);
  color: #fff;
  opacity: .95;
  max-width: 38em;
  margin: 0;
}

#skin_wrapper .cta-inscription .cta-act{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--e-1);
  flex-shrink: 0;
}

/* Blanc sur vermillon : 4,73:1. Le libellé du bouton prend le second ton,
   #C42408, parce que le vermillon sur blanc ne passerait pas à cette taille. */
#skin_wrapper .cta-inscription .cta-btn{
  display: inline-block;
  background: var(--surface);
  color: var(--orange-txt);
  font-family: var(--police-titre);
  font-weight: var(--g-demi);
  font-size: var(--t-base);
  padding: 12px 26px;
  border-radius: var(--r-pilule);
  text-decoration: none;
  white-space: nowrap;
  min-height: var(--cible);
}
#skin_wrapper .cta-inscription .cta-btn:hover,
#skin_wrapper .cta-inscription .cta-btn:focus{
  background: var(--orange-pale);
  color: var(--orange-txt);
  text-decoration: none;
}

#skin_wrapper .cta-inscription small{
  display: block;
  color: #fff;
  opacity: .85;
  font-size: var(--t-mini);
  text-align: center;
  max-width: 240px;
}

/* Le lot 9 traitera le mobile en entier. Cette règle-ci n'attend pas : sans
   elle, le bloc en flex-row est illisible sous 768 px.                        */
@media (max-width: 767px){
  #skin_wrapper .cta-inscription{
    flex-direction: column;
    align-items: flex-start;
    padding: var(--e-5) var(--e-5);
  }
  #skin_wrapper .cta-inscription .cta-act{ align-items: flex-start; width: 100%; }
  #skin_wrapper .cta-inscription .cta-btn{ width: 100%; text-align: center; }
  #skin_wrapper .cta-inscription small{ text-align: left; max-width: none; }
}


/* --- 7.4 L'auto-paragraphe, et ce qu'il fait au bouton -------------------
   Le renderer b2WPAutP enveloppe le lien ET la mention dans un même <p>, avec
   un <br> entre les deux. L'unique enfant flex de .cta-act est donc ce <p> :
   `align-items: center` centre le paragraphe, pas son contenu. On centre donc
   à l'intérieur du paragraphe, et on neutralise le <br> que `display: block`
   du <small> rend redondant.
   📌 Corrigé en CSS et non dans le contenu : l'auto-paragraphe reconstruirait
   la même chose à la prochaine sauvegarde du bloc en back-office.           */

#skin_wrapper .cta-inscription .cta-act p{
  margin: 0;
  max-width: none;
  text-align: center;
}
#skin_wrapper .cta-inscription .cta-act br{ display: none; }
#skin_wrapper .cta-inscription .cta-act small{
  margin: var(--e-2) auto 0;
}


/* =============================================================================
   8. LES TROIS CAPSULES DE LA BARRE — cible maquette du 28/08
   Adherer (vermillon plein) · Se connecter (contour translucide) · S'inscrire
   (blanc a texte marine), groupes a droite.

   ⚠️ CECI REJOUE UN ARBITRAGE DU LOT 3. « S'inscrire » avait ete repasse en
   lien simple, sur le principe « un seul aplat plein dans la barre ». Cet
   arbitrage portait sur un bouton fantome ISOLE ; la maquette pense les trois
   ensemble, en trois niveaux de hierarchie. Rearbitre par Yorgos le 29/08 au
   soir, en faveur de la maquette.

   Assiette Jost compensee de 3 px sur les trois, comme les boutons du § 2.
   ============================================================================= */

/* « Se connecter » — pilule fantome. */
body #evo_site_header a.evo_widget_basic_menu_link_login{
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 3px 16px 0;
  border: 1.5px solid rgba(255,255,255,.4);
  border-radius: var(--r-pilule);
  background: transparent;
  color: #fff;
  font-size: var(--t-petit);
  font-weight: var(--g-moyen);
  line-height: 1;
  white-space: nowrap;
}
body #evo_site_header a.evo_widget_basic_menu_link_login:hover,
body #evo_site_header a.evo_widget_basic_menu_link_login:focus{
  border-color: #fff;
  background: rgba(255,255,255,.14);
  color: #fff;
}

/* « S'inscrire » — pilule blanche a texte marine.
   Le skin de site pose `.bg-white` ; on passe devant par (1,1,2) contre (1,1,1). */
body #evo_site_header a.bg-white.evo_widget_basic_menu_link_register{
  display: inline-flex;
  align-items: center;
  height: 38px;
  padding: 3px 18px 0;
  border: 0;
  border-radius: var(--r-pilule);
  background: var(--surface);
  color: var(--titre);
  font-size: 15px;
  font-weight: var(--g-demi);
  line-height: 1;
  margin-right: 0;
  white-space: nowrap;
}
body #evo_site_header a.bg-white.evo_widget_basic_menu_link_register:hover,
body #evo_site_header a.bg-white.evo_widget_basic_menu_link_register:focus{
  background: var(--lavande);
  color: var(--titre);
}


/* =============================================================================
   9. LA LISTE D'ARTICLES EN TUILES — cible maquette du 28/08
   Posé le 29/08/2026, lot 7.

   Le widget est passé en « Blocs RWD » (back-office), ce qui produit :

     .widget_rwd_blocks.row
       └ .col-md-6.col-sm-6.col-xs-12
           └ .widget_rwd_content
               ├ .item_categories                ← la pilule de rubrique
               ├ .item_first_image_placeholder   ← l'emplacement d'image
               ├ .item_title
               └ .item_excerpt

   🎯 `item_first_image_placeholder` est émis MÊME SANS IMAGE. C'est lui qui porte
   le bandeau lavande. `cat_image_file_ID` étant NULL sur les sept rubriques, le
   bandeau est uni aujourd'hui ; le jour où les bandeaux de rubrique seront
   déposés, l'image se posera dedans sans une ligne de CSS de plus.

   ⚠️ PAS DE PIED DE CARTE. La maquette y met un temps de lecture ; le widget
   n'offre ni date ni durée. Les deux passent par une variante de gabarit
   (`evo_templates`), traitée à part.
   ============================================================================= */

/* --- 9.1 Le titre de section, avec sa barre ------------------------------- */
/* La maquette pose un filet gris barré d'un segment vermillon de 64 px. Un seul
   pseudo-élément suffit : c'est un dégradé à arrêts francs, pas deux barres.   */

#skin_wrapper .widget_core_coll_post_list > h3,
#skin_wrapper .widget_core_coll_featured_posts > h3{
  display: flex;
  align-items: center;
  gap: var(--e-3);
  font-size: var(--t-h2-sec);
  font-weight: var(--g-noir);
  color: var(--titre);
  margin: var(--e-6) 0 var(--e-4);
}
#skin_wrapper .widget_core_coll_post_list > h3::after,
#skin_wrapper .widget_core_coll_featured_posts > h3::after{
  content: "";
  flex: 1;
  height: 3px;
  border-radius: var(--r-filet);
  background: linear-gradient(90deg, var(--orange) 0 64px, var(--gris-2) 64px);
}

/* --- 9.2 La grille -------------------------------------------------------- */
/* Bootstrap 3 fait flotter ses colonnes, avec 15 px de chaque côté — soit 30 px
   de gouttière, contre 18 px voulus. On passe la rangée en flex : les colonnes
   gardent leur largeur, les cartes gagnent des hauteurs égales, et les flottants
   sont ignorés.                                                               */

#skin_wrapper .widget_rwd_blocks{
  display: flex;
  flex-wrap: wrap;
  margin-left: -9px;
  margin-right: -9px;
}
#skin_wrapper .widget_rwd_blocks > div{
  display: flex;
  padding-left: 9px;
  padding-right: 9px;
  margin-bottom: 18px;
  float: none;
}

/* La première tuile occupe toute la ligne — le `grid-column: 1 / -1` de la
   maquette. `.col-md-6` vaut (0,1,0) : notre (1,1,1) passe devant.            */
#skin_wrapper .widget_rwd_blocks > div:first-child{ width: 100%; }

/* --- 9.3 La carte --------------------------------------------------------- */

#skin_wrapper .widget_rwd_content{
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: var(--trait);
  border-radius: var(--r-carte);
  overflow: hidden;
  transition: box-shadow .15s ease, transform .15s ease;
}
#skin_wrapper .widget_rwd_content:hover{
  box-shadow: var(--ombre-carte);
  transform: translateY(-2px);
}

/* Le bandeau. Vide aujourd'hui, il tient sa hauteur tout seul. */
#skin_wrapper .widget_rwd_content .item_first_image_placeholder{
  position: relative;
  height: 76px;
  background: var(--lavande);
  overflow: hidden;
}
#skin_wrapper .widget_rwd_content .item_first_image_placeholder::after{
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: var(--orange);
}
#skin_wrapper .widget_rwd_content .item_first_image_placeholder a{
  display: block;
  height: 100%;
}
#skin_wrapper .widget_rwd_content .item_first_image_placeholder img{
  position: absolute;
  right: 10px;
  bottom: -10px;
  height: 92px;
  width: auto;
  max-width: none;
}

/* La pilule de rubrique, posée sur le bandeau. Elle est PREMIÈRE dans le DOM :
   en la sortant du flux, le bandeau redevient le premier élément visible.     */
#skin_wrapper .widget_rwd_content .item_categories{
  position: absolute;
  top: 38px;
  left: 14px;
  z-index: 2;
  transform: translateY(-50%);
  margin: 0;
}
/* Assiette Jost compensee comme les capsules du § 8 : hauteur fixe, centrage
   par le flex, puis 2 px de decalage vers le bas. Un padding asymetrique seul
   ne centre pas — il deplace, et le resultat depend de la taille du texte.   */
#skin_wrapper .widget_rwd_content .item_categories a{
  display: inline-flex;
  align-items: center;
  height: 28px;
  background: var(--marine);
  color: #fff;
  font-family: var(--police-titre);
  font-size: var(--t-meta);
  font-weight: var(--g-demi);
  line-height: 1;
  padding: 2px 15px 0;
  border-radius: var(--r-pilule);
  text-decoration: none;
  letter-spacing: .02em;
}
#skin_wrapper .widget_rwd_content .item_categories a:hover{
  background: var(--marine-d);
  color: #fff;
  text-decoration: none;
}

/* Titre et chapô. */
#skin_wrapper .widget_rwd_content .item_title{
  padding: var(--e-4) var(--e-4) 0;
}
#skin_wrapper .widget_rwd_content .item_title a{
  font-family: var(--police-titre);
  font-size: var(--t-h3);
  font-weight: var(--g-demi);
  line-height: 1.3;
  color: var(--marine-txt);
  text-decoration: none;
}
#skin_wrapper .widget_rwd_content .item_title a:hover{
  color: var(--titre);
  text-decoration: none;
}

#skin_wrapper .widget_rwd_content .item_excerpt{
  padding: var(--e-2) var(--e-4) var(--e-5);
  font-size: var(--t-petit);
  line-height: var(--lh-corps);
  color: var(--gris-6);
}

/* Le bouton « … » que le widget ajoute en fin d'extrait : la maquette n'en a
   pas, et le titre est déjà un lien vers le même article. Masqué, pas supprimé
   — c'est un réglage du widget, pas du contenu.                               */
#skin_wrapper .widget_rwd_content .item_excerpt .btn{ display: none; }

/* --- 9.4 La première tuile, plus généreuse -------------------------------- */

#skin_wrapper .widget_rwd_blocks > div:first-child .item_first_image_placeholder{
  height: 84px;
}
#skin_wrapper .widget_rwd_blocks > div:first-child .item_categories{ top: 42px; }
#skin_wrapper .widget_rwd_blocks > div:first-child .item_first_image_placeholder img{
  height: 100px;
  right: 22px;
}
#skin_wrapper .widget_rwd_blocks > div:first-child .item_title a{
  font-size: var(--t-h3-feat);
}
#skin_wrapper .widget_rwd_blocks > div:first-child .item_excerpt{
  font-size: var(--t-base);
}

/* --- 9.5 La taille de l accroche dans les tuiles ordinaires ---------------
   Mesure du 01/09 sur capture d ecran : les tuiles a deux colonnes composent
   leur accroche a --t-petit — pas de 46,6 px en 2x, hauteur d encre 27 px —
   contre --t-base pour la premiere — 49,7 px et 29 px. L ecart d un point,
   voulu par le 9.4, se cumule avec une colonne deux fois plus etroite : le
   meme texte y tient sur huit a dix lignes au lieu de quatre, d ou une
   impression de tassement.
   On aligne donc la taille des accroches sur celle de la premiere tuile. Le
   9.4 garde sa generosite par le titre (--t-h3-feat) et la hauteur d image :
   c est la que la hierarchie doit se lire, pas dans le corps du teaser.
   📌 Le numero charte58 avait d abord designe un essai de -webkit-line-clamp
   a cinq lignes, abandonne le soir meme — une sixieme ligne debordait sous
   le cadre, l overflow de l accroche ne coincidant pas avec le bas de la
   carte. Rien n en a ete conserve.
   Arbitrage de Yorgos, 01/09/2026.                                        */
#skin_wrapper .widget_rwd_blocks > div:not(:first-child) .item_excerpt{
  font-size: var(--t-base);
}

/* =============================================================================
   10. LA BARRE LATÉRALE — cible maquette v2, vue connectée
   Posé le 29/08/2026, lot 6.

   ⚠️ TOUT EST PORTÉ PAR `aside`. `.panel` sert AUSSI au formulaire de
   commentaire de la page article (« Laisser un commentaire ») : habiller
   `.panel` sans ce cadre déborderait sur le lot 8.

   📌 POURQUOI DU CSS ET PAS UNE REPRISE DE index.main.php.
   Les conteneurs `sidebar` et `sidebar_2` enveloppent chaque widget dans un
   panneau Bootstrap. On a envisage de retirer ce panneau dans notre copie du
   gabarit ; verification faite, c'est inutile : #evo_skin_styles ne depasse
   pas (0,2,0) sur les panneaux (`.panel .panel-heading`) et son unique
   !important porte sur la pagination. Un selecteur prefixe `#skin_wrapper`
   vaut (1,x,y) et passe devant sans effort. On garde donc index.main.php
   intact — un fichier de moins a rejouer au lot 12.

   🎯 `panel_border_color` des reglages de skin vaut deja #E1E1E3, soit
   --gris-2 : la couleur de filet de la maquette. Il n'y a que le fond de
   titre (#EEEFFE) et la typographie a reprendre.

   ⚠️ ECARTS ASSUMES A LA MAQUETTE, pour ne pas casser l'echelle de charte :
   titre de boite a --t-base (15,5 px) la ou la maquette dit 15 ; padding et
   marge a --e-5 (22 px) la ou elle dit 20 ; gouttiere de pastille a --e-2
   (8 px) la ou elle dit 10. Invisible a l'oeil, et l'echelle reste pure.
   ============================================================================= */

/* --- 10.1 La boîte -------------------------------------------------------- */

#skin_wrapper aside .panel{
  background: var(--surface);
  border: var(--trait);
  border-radius: var(--r-carte);
  box-shadow: none;
  margin-bottom: var(--e-5);
  padding: var(--e-5);
}
#skin_wrapper aside .panel-heading{
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
}
#skin_wrapper aside .panel-heading h4.panel-title{
  font-family: var(--police-titre);
  font-size: var(--t-base);
  font-weight: var(--g-noir);
  line-height: 1.2;
  color: var(--titre);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin: 0 0 var(--e-3);
}
#skin_wrapper aside .panel-body{ padding: 0; }

/* --- 10.2 La liste de rubriques ------------------------------------------ */
/* Le widget rend <ul><li class="evo_cat_leaf"><a>. La pastille de la maquette
   est un pseudo-element : aucun balisage a produire.                        */

#skin_wrapper aside .widget_core_coll_category_list ul{
  list-style: none;
  margin: 0;
  padding: 0;
}
#skin_wrapper aside .widget_core_coll_category_list a{
  display: flex;
  align-items: center;
  gap: var(--e-2);
  padding: 7px 0;
  color: var(--gris-9);
  font-family: var(--police-texte);
  font-size: var(--t-petit);
  font-weight: var(--g-moyen);
  text-decoration: none;
}
#skin_wrapper aside .widget_core_coll_category_list a::before{
  content: "";
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: var(--lilas);
}
#skin_wrapper aside .widget_core_coll_category_list a:hover{
  color: var(--titre);
  text-decoration: none;
}
#skin_wrapper aside .widget_core_coll_category_list a:hover::before{
  background: var(--marine);
}

/* --- 10.3 Le champ de recherche ------------------------------------------ */
/* Bootstrap 3 rend .input-group en table ; on passe en flex pour que le champ
   absorbe la place et que le bouton garde sa largeur propre. Le filet et le
   rayon sont portes par le groupe, pas par ses deux enfants : c'est ce qui
   donne le champ d'un seul tenant de la maquette.
   ⚠️ Le libelle « Rechercher » vient du gabarit search_form_simple_fr (lot 3).
   La maquette dessine une fleche : ecarte, une fleche seule n'a pas de nom
   accessible.                                                               */

#skin_wrapper aside .compact_search_form .input-group{
  display: flex;
  border: var(--trait-fort);
  border-radius: var(--r-champ);
  overflow: hidden;
}
#skin_wrapper aside .compact_search_form .input-group:focus-within{
  border-color: var(--marine);
}
#skin_wrapper aside .compact_search_form .form-control{
  flex: 1;
  min-width: 0;
  height: auto;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 9px var(--e-3);
  font-family: var(--police-texte);
  font-size: var(--t-petit);
}
#skin_wrapper aside .compact_search_form .input-group-btn{
  display: flex;
  width: auto;
}
#skin_wrapper aside .compact_search_form .btn{
  border: 0;
  border-radius: 0;
  padding: 0 var(--e-4);
  background: var(--marine);
  color: #fff;
  font-family: var(--police-titre);
  font-size: var(--t-meta);
  font-weight: var(--g-demi);
}
#skin_wrapper aside .compact_search_form .btn:hover,
#skin_wrapper aside .compact_search_form .btn:focus{
  background: var(--marine-d);
  color: #fff;
}

/* --- 10.4 Les commentaires récents --------------------------------------- */

#skin_wrapper aside .widget_core_coll_comment_list ul{
  list-style: none;
  margin: 0;
  padding: 0;
}
#skin_wrapper aside .widget_core_coll_comment_list li{
  padding: 7px 0;
  border-bottom: 1px solid var(--gris-1);
  font-family: var(--police-texte);
  font-size: var(--t-meta);
  line-height: var(--lh-corps);
  color: var(--gris-6);
}
#skin_wrapper aside .widget_core_coll_comment_list li:last-child{
  border-bottom: 0;
  padding-bottom: 0;
}
#skin_wrapper aside .widget_core_coll_comment_list a{
  color: var(--gris-9);
  text-decoration: none;
}
#skin_wrapper aside .widget_core_coll_comment_list a:hover{
  color: var(--titre);
  text-decoration: none;
}
#skin_wrapper aside .widget_core_coll_comment_list .login.user{
  color: var(--titre);
  font-weight: var(--g-demi);
}

/* =============================================================================
   11. LA LISTE COMPACTE — « Tous les articles », vue connectée
   Posé le 29/08/2026, lot 6e.

   Le balisage vient d'un GABARIT MAISON (evo_templates, content_list_compact_sf
   et son enfant _item), designe par le champ « Gabarit » du widget 758.
   C'est ce qui donne la DATE, que le widget seul n'offre pas — piege n° 27,
   vrai du widget, faux du gabarit.

   ⚠️ CE QU'ON PERD EN MODE GABARIT : `item_first_image_placeholder`, decrit
   dans le coeur comme « to auto-templates only ». Le repli « image de rubrique »
   du lot 7 n'existe donc pas ici, et aucune balise [Item:…] ne le remplace —
   [Cat:image] existe mais le rendu d'un article n'injecte que l'objet Item.
   Sans consequence AUJOURD'HUI : `cat_image_file_ID` est NULL sur les sept
   rubriques, donc la voie « avec image » rendrait un aplat lavande vide. La
   pastille ci-dessous est identique a l'ecran. A rouvrir le jour ou les
   bandeaux de rubrique seront deposes.

   📌 `[Item:read_status]` rend une chaine VIDE tant que `track_unread_content`
   n'est pas active sur la collection de l'article. La balise est posee des
   maintenant : elle s'allumera sans toucher au gabarit.
   ============================================================================= */

#skin_wrapper .sf_liste_compacte{
  list-style: none;
  margin: 0;
  padding: 0;
}
#skin_wrapper .sf_ligne{
  display: flex;
  align-items: center;
  gap: var(--e-3);
  padding: var(--e-3) var(--e-1);
  border-bottom: 1px solid var(--gris-1);
}
#skin_wrapper .sf_ligne:last-child{ border-bottom: 0; }

#skin_wrapper .sf_ligne__pastille{
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: var(--r-champ);
  background: var(--lavande);
}

#skin_wrapper .sf_ligne__titre{ min-width: 0; }
#skin_wrapper .sf_ligne__titre a{
  font-family: var(--police-titre);
  font-size: var(--t-base);
  font-weight: var(--g-moyen);
  line-height: 1.35;
  color: var(--marine-txt);
  text-decoration: none;
}
#skin_wrapper .sf_ligne__titre a:hover{
  color: var(--titre);
  text-decoration: none;
}

#skin_wrapper .sf_ligne__meta{
  flex: 0 0 auto;
  margin-left: auto;
  font-family: var(--police-titre);
  font-size: var(--t-mini);
  color: var(--gris-6);
  white-space: nowrap;
}
/* La classe `sf_neuf` habillait la mention « Nouveau » de [Item:read_status].
   🔴 BALISE RETIREE DU GABARIT LE 29/08 a 00 h 15 : elle ignore le plancher de
   date du compteur, donc elle annoncait « Nouveau » sur toute l'archive
   pendant que le chapeau annoncait 0 — DEUX DEFINITIONS DE « NOUVEAU » SUR LA
   MEME PAGE. Et sa chaine `T_('Read')` est rendue « Lire » par la locale
   francaise, un imperatif la ou il faudrait « Lu ». La regle part avec elle :
   zero regle morte.                                                        */

/* =============================================================================
   12. LE CHAPEAU MEMBRE — salutation calculee
   Pose le 29/08/2026, lot 6g.

   La BANDE est mutualisee : `.sf_chapeau_membre` a ete ajoute au selecteur du
   § 7.1, qui porte l'aplat pleine largeur. Ici, seule la typographie.

   ⚠️ ECART A LA MAQUETTE, ASSUME. La maquette v2 remplace le titre de
   collection par la salutation. Chez nous le <h1> vient du conteneur `header`,
   servi sur TOUTES les pages du skin : le deplacer pour une seule vue serait
   disproportionne. La salutation se pose donc SOUS le titre, dans la meme
   bande — le sens y est, un conteneur partage n'est pas touche.

   📌 Le texte de la phrase vit dans _front.disp.php, pas en back-office : c'est
   le prix du calcule. Le changer coute une ligne et un incrementde $version.
   ============================================================================= */

body.disp_front #skin_wrapper .sf_chapeau_membre p.sf_bienvenue{
  margin: 0;
  font-family: var(--police-titre);
  font-size: var(--t-h2-sec);
  font-weight: var(--g-demi);
  line-height: 1.35;
  color: var(--marine-txt);
  max-width: none;
}
body.disp_front #skin_wrapper .sf_chapeau_membre strong{
  color: var(--orange-txt);
  font-weight: var(--g-noir);
}


/* ==================================================================
   § 7.1 bis — LE DÉBORDEMENT DU DÉGRADÉ PLEINE LARGEUR   (30/08/2026)
   Le pseudo-élément du chapeau s'étend de -100vw à +100vw : son bord
   droit dépasse la fenêtre de la largeur utile — 1 326 px mesurés sur
   une fenêtre de 1 512, sur la page visiteur comme sur la connectée.
   `html{ overflow-x: clip }` ne l'absorbe PAS : la valeur est bien
   calculée sur <html>, la page défile quand même.
   On clippe donc sur `body`, dont la boîte vaut la largeur de fenêtre.
   `clip` et non `hidden` : il ne crée pas de conteneur de défilement,
   donc `position: sticky` reste possible ailleurs dans la feuille.

   31/08/2026, lot 13 — LES DEUX REGLES FONCTIONNENT EN PAIRE.
   Le point ouvert disait de retirer le clip pose sur html, puisqu'il
   ne ferait rien. Retrait effectue, puis MESURE : le site s'est remis
   a defiler de 1 326 px sur disp_front, vue connectee ET vue anonyme,
   exactement le chiffre du 30/08. Retour arriere immediat.
   Table de verite, mesuree et non deduite :
     html clip   + body absent  ->  scrollX 1 326   (30/08)
     html absent + body clip    ->  scrollX 1 326   (31/08, 22 h 55)
     html clip   + body clip    ->  scrollX 0       (7 releves, 1 512
                                                     a 3 024 px)
   Mecanisme : quand html vaut visible, l'overflow du body est PROPAGE
   a la zone d'affichage, et le body cesse de decouper sa propre boite.
   getComputedStyle affiche pourtant toujours clip sur le body : c'est
   la valeur CALCULEE, pas la valeur UTILISEE. La propriete est la,
   elle n'agit plus.
   Le clip sur html n'absorbe donc rien lui-meme : il EMPECHE LA
   PROPAGATION, et c'est ce qui laisse le clip du body agir.
   NE RIEN RETIRER ICI. Le point ouvert du lot 13 est clos.
   ================================================================== */
body{
  overflow-x: clip;
}

/* =============================================================================
   13. LA PAGE ARTICLE — cible maquette v3 du 28/08
   Posé le 30/08/2026, lot 8.

   TOUT est porté par `body.disp_single`. Le conteneur `header`, le titre de
   collection et `.panel` existent sur toutes les pages du skin : sans ce
   préfixe, ces règles déborderaient sur l'accueil et sur la barre latérale.

   MESURÉ SUR LA PAGE SERVIE, PAS SUR LA MAQUETTE :
   - les intertitres arrivent en <h3 class="evo_auto_anchor_header">, PAS en
     <h2> ; la maquette dessine un h2. Les deux sont visés.
   - la page porte DEUX <h1> : le titre de collection puis celui de l'article.
     Le premier est retiré ici — un document n'a qu'un premier titre, et la
     maquette ouvre l'article par un fil d'Ariane.
   - les commentaires arrivent en AJAX (load_ajax_form_on_page_load: false) :
     leur DOM n'existe pas dans la page servie. À habiller après recette
     dans le navigateur.

   ÉCARTS ASSUMÉS À LA MAQUETTE :
   - corps à --t-corps (16px) là où elle dit 16,5 : 16 est la valeur du forum,
     arbitrée le 13/08, et l'échelle de charte prime sur un demi-pixel.
   - la navigation bas de page n'a pas ses libellés « Article précédent » :
     le widget ne rend que le titre. Réglage de widget, traité à part.
   ============================================================================= */

/* --- 13.1 Un seul premier titre ------------------------------------------- */
body.disp_single #skin_wrapper .container > header.row{ display: none; }

/* --- 13.2 La colonne de lecture ------------------------------------------- */
body.disp_single #skin_wrapper article.evo_post{
  max-width: var(--article);
  margin: 0 auto;
  padding: var(--e-8) var(--e-5) var(--e-6);
}

/* --- 13.3 Le titre d article ---------------------------------------------- */
body.disp_single #skin_wrapper .evo_post_title h1{
  font-size: var(--t-h1-art);
  font-weight: var(--g-noir);
  line-height: var(--lh-titre);
  color: var(--marine-txt);
  margin: 0 0 var(--e-4);
  text-wrap: pretty;
}

/* --- 13.4 Le corps -------------------------------------------------------- */
/* La mesure de 66 signes est portée par les blocs de TEXTE seulement.
   Les tableaux et les images prennent la largeur de la colonne : les
   contraindre à 66 signes les rendrait illisibles.                          */
body.disp_single #skin_wrapper .evo_post__full_text p,
body.disp_single #skin_wrapper .evo_post__full_text ul,
body.disp_single #skin_wrapper .evo_post__full_text ol,
body.disp_single #skin_wrapper .evo_post__full_text blockquote{
  max-width: var(--lecture);
}
body.disp_single #skin_wrapper .evo_post__full_text p{
  margin: 0 0 var(--e-4);
  color: var(--gris-9);
  text-wrap: pretty;
}
body.disp_single #skin_wrapper .evo_post__full_text ul,
body.disp_single #skin_wrapper .evo_post__full_text ol{
  margin: 0 0 var(--e-4);
  padding-left: var(--e-5);
  font-size: var(--t-corps);   /* le ch de --lecture se resout ICI : a 14 px Bootstrap, 66ch = 661 px et non 756 (mesure du 02/09) */
}
body.disp_single #skin_wrapper .evo_post__full_text li{
  margin-bottom: var(--e-1);
  color: var(--gris-9);
}

/* --- 13.5 Les intertitres, et leur filet ---------------------------------- */
/* h3 d abord parce que c est ce que le moteur sert ; h2 par precaution, le
   jour ou un article en portera un.
   `scroll-margin-top` compense l en-tete fixe : sans lui, l ancre posee par
   auto_anchors amene le titre SOUS la barre marine.                         */
body.disp_single #skin_wrapper .evo_post__full_text h2,
body.disp_single #skin_wrapper .evo_post__full_text h3{
  font-size: var(--t-h2);
  font-weight: var(--g-noir);
  line-height: var(--lh-titre);
  color: var(--titre);
  margin: var(--e-7) 0 var(--e-3);
  scroll-margin-top: calc(var(--entete) + var(--filet) + var(--e-3));
}
body.disp_single #skin_wrapper .evo_post__full_text h2::before,
body.disp_single #skin_wrapper .evo_post__full_text h3::before{
  content: "";
  display: block;
  width: 44px;
  height: 4px;
  margin-bottom: var(--e-3);
  border-radius: var(--r-filet);
  background: var(--orange);
}
body.disp_single #skin_wrapper .evo_post__full_text h4{
  font-size: var(--t-h3-feat);
  font-weight: var(--g-demi);
  color: var(--marine-txt);
  margin: var(--e-5) 0 var(--e-2);
}

/* --- 13.6 Citations, filets, tableaux ------------------------------------- */
body.disp_single #skin_wrapper .evo_post__full_text blockquote{
  background: var(--lilas-pale);
  border-left: 4px solid var(--lilas);
  border-radius: 0 var(--r-encart) var(--r-encart) 0;
  padding: var(--e-4) var(--e-5);
  margin: var(--e-5) 0;
  font-size: var(--t-corps);
}
body.disp_single #skin_wrapper .evo_post__full_text blockquote p:last-child{
  margin-bottom: 0;
}
body.disp_single #skin_wrapper .evo_post__full_text hr{
  border: 0;
  border-top: var(--trait);
  margin: var(--e-6) 0;
  max-width: var(--lecture);
}
body.disp_single #skin_wrapper .evo_post__full_text table{
  width: 100%;
  border-collapse: collapse;
  margin: var(--e-5) 0;
  font-size: var(--t-petit);
}
body.disp_single #skin_wrapper .evo_post__full_text th,
body.disp_single #skin_wrapper .evo_post__full_text td{
  border: var(--trait);
  padding: var(--e-2) var(--e-3);
  text-align: left;
  vertical-align: top;
}
body.disp_single #skin_wrapper .evo_post__full_text th{
  background: var(--lilas-pale);
  color: var(--titre);
  font-family: var(--police-titre);
  font-weight: var(--g-demi);
}

/* --- 13.7 Les etiquettes -------------------------------------------------- */
body.disp_single #skin_wrapper .widget_core_item_tags nav.post_tags{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-2);
  margin-top: var(--e-7);
  padding-top: var(--e-5);
  border-top: var(--trait);
  font-size: var(--t-meta);
  color: var(--gris-6);
}
body.disp_single #skin_wrapper .widget_core_item_tags nav.post_tags a{
  background: var(--gris-1);
  color: var(--gris-9);
  font-family: var(--police-titre);
  font-size: var(--t-meta);
  font-weight: var(--g-moyen);
  line-height: 1;
  padding: 6px 12px 4px;
  border-radius: var(--r-pilule);
  text-decoration: none;
}
body.disp_single #skin_wrapper .widget_core_item_tags nav.post_tags a:hover{
  background: var(--lilas-pale);
  color: var(--titre);
  text-decoration: none;
}

/* --- 13.8 La navigation precedent / suivant ------------------------------- */
/* Bootstrap 3 fait flotter les .pager li et arrondit a 15px. On passe la
   liste en flex : deux cartes de largeur egale, comme la maquette.          */
body.disp_single #skin_wrapper .widget_core_item_next_previous ul.pager{
  display: flex;
  gap: var(--e-3);
  margin: var(--e-6) 0 0;
  padding: 0;
  list-style: none;
}
body.disp_single #skin_wrapper .widget_core_item_next_previous ul.pager li{
  display: flex;
  flex: 1;
  float: none;
}
body.disp_single #skin_wrapper .widget_core_item_next_previous ul.pager li.next{
  margin-left: auto;
}
body.disp_single #skin_wrapper .widget_core_item_next_previous ul.pager li a{
  flex: 1;
  background: var(--surface);
  border: var(--trait-fort);
  border-radius: var(--r-carte);
  padding: var(--e-3) var(--e-4);
  color: var(--marine-txt);
  font-family: var(--police-titre);
  font-size: var(--t-petit);
  font-weight: var(--g-moyen);
  line-height: 1.35;
  text-decoration: none;
}
body.disp_single #skin_wrapper .widget_core_item_next_previous ul.pager li.next a{
  text-align: right;
}
body.disp_single #skin_wrapper .widget_core_item_next_previous ul.pager li a:hover{
  border-color: var(--marine);
  color: var(--titre);
  text-decoration: none;
}

/* --- 13.9 Le badge « Membres » -------------------------------------------- */
/* ⚠️ NON ÉPROUVÉ : le widget item_visibility_badge ne rend rien sur un
   article publié. À vérifier sur un article protégé en recette.            */
body.disp_single #skin_wrapper .evo_status__protected{
  background-color: var(--marine);
  color: #fff;
  font-family: var(--police-titre);
  font-size: var(--t-meta);
  font-weight: var(--g-demi);
  line-height: 1;
  padding: 6px 13px 4px;
  border-radius: var(--r-pilule);
}

/* --- 13.10 Le message servi au visiteur sur les commentaires -------------- */
body.disp_single #skin_wrapper .comment_posting_disabled_msg{
  background: var(--lilas-pale);
  border-radius: var(--r-carte);
  padding: var(--e-5);
  margin-top: var(--e-6);
  font-size: var(--t-petit);
}
body.disp_single #skin_wrapper .comment_posting_disabled_msg p:last-child{
  margin-bottom: 0;
}

/* --- 13.11 Le fil d Ariane ------------------------------------------------ */
body.disp_single #skin_wrapper .sf_ariane{
  font-family: var(--police-texte);
  font-size: var(--t-meta);
  color: var(--gris-6);
  margin-bottom: var(--e-3);
}
body.disp_single #skin_wrapper .sf_ariane a{
  color: var(--orange-txt);
  font-weight: var(--g-demi);
  text-decoration: none;
}

/* --- 13.12 Badges de rubrique et badge Membres ---------------------------- */
/* `font-size: 0` sur le conteneur efface la virgule que le moteur place entre
   deux rubriques ; la taille est rendue aux enfants. La virgule reste dans le
   DOM et un lecteur d ecran l entend, ce qui est correct.
   ⚠️ CE N EST PAS le defaut du lot 4 : on ne FABRIQUE aucun texte en CSS, on
   masque un separateur devenu redondant une fois les pastilles posees.     */
body.disp_single #skin_wrapper .sf_badges{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-2);
  margin-bottom: var(--e-4);
  font-size: 0;
}
body.disp_single #skin_wrapper .sf_badges a{
  background: var(--lilas-pale);
  color: var(--titre);
  font-family: var(--police-titre);
  font-size: var(--t-meta);
  font-weight: var(--g-demi);
  line-height: 1;
  padding: 6px 13px 4px;
  border-radius: var(--r-pilule);
  text-decoration: none;
}
body.disp_single #skin_wrapper .sf_badges a:hover{
  background: var(--lilas);
  color: var(--titre);
  text-decoration: none;
}

/* --- 13.13 La ligne d auteur ---------------------------------------------- */
/* La maquette met le nom sur une ligne et la fonction sous le nom. Le moteur
   rend l avatar et le nom dans un MEME lien : on ne peut pas les separer sans
   forker. Ecart assume — une seule ligne, et la fonction de l auteur reste a
   trouver (aucun champ du moteur ne la porte).
   Le point median est purement decoratif : il ne cree aucune information.  */
body.disp_single #skin_wrapper .sf_byline{
  display: flex;
  align-items: center;
  gap: var(--e-3);
  margin: 0 0 var(--e-6);
  padding: var(--e-4) 0;
  border-top: var(--trait);
  border-bottom: var(--trait);
  font-size: var(--t-meta);
  color: var(--gris-6);
}
body.disp_single #skin_wrapper .sf_byline img{
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--lilas);
}
body.disp_single #skin_wrapper .sf_auteur{
  display: inline-flex;
  align-items: center;
  gap: var(--e-3);
}
body.disp_single #skin_wrapper .sf_auteur .identity_link_username{
  font-family: var(--police-titre);
  font-size: var(--t-base);
  font-weight: var(--g-demi);
  color: var(--marine-txt);
}
body.disp_single #skin_wrapper .sf_date{
  font-family: var(--police-titre);
  font-size: var(--t-meta);
  color: var(--gris-6);
  white-space: nowrap;
}
body.disp_single #skin_wrapper .sf_date::before{
  content: "\00b7";
  margin-right: var(--e-2);
  color: var(--gris-2);
}

/* --- 13.13 bis Le mois en bas de casse ------------------------------------ */
/* La locale francaise du moteur rend « 30 Août 2026 ». En francais le nom du
   mois s ecrit en bas de casse. `lowercase` ne touche pas aux chiffres.    */
body.disp_single #skin_wrapper .sf_date{ text-transform: lowercase; }

/* --- 13.14 Mandat et duree de lecture ------------------------------------- */
/* Le mandat peut etre vide : aucun separateur ne s y accroche, et `:empty`
   le retire du flux pour que le `gap` du flex ne laisse pas un trou.
   La duree prend la pastille grise de la maquette, poussee a droite.       */
body.disp_single #skin_wrapper .sf_mandat{
  font-family: var(--police-texte);
  font-size: var(--t-meta);
  color: var(--gris-6);
}
body.disp_single #skin_wrapper .sf_mandat:empty{ display: none; }
body.disp_single #skin_wrapper .sf_duree{
  margin-left: auto;
  background: var(--gris-1);
  color: var(--gris-6);
  font-family: var(--police-titre);
  font-size: var(--t-meta);
  line-height: 1;
  padding: 6px 13px 4px;
  border-radius: var(--r-pilule);
  white-space: nowrap;
}
body.disp_single #skin_wrapper .sf_duree:empty{ display: none; }

/* --- 13.15 La byline sur deux lignes -------------------------------------- */
/* Cible maquette : le nom seul sur la premiere ligne, la qualite et la date
   sous lui. Possible parce que le gabarit appelle [Item:author] DEUX fois —
   une pour l avatar, une pour le nom — au lieu de laisser le moteur les
   rendre dans un meme lien.
   La pastille de duree s aligne sur la PREMIERE ligne, pas sur le milieu du
   bloc : c est le nom qu elle accompagne, pas la ligne secondaire.         */
body.disp_single #skin_wrapper .sf_qui{
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
body.disp_single #skin_wrapper .sf_auteur{
  display: block;
}
body.disp_single #skin_wrapper .sf_meta{
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--e-1);
}
body.disp_single #skin_wrapper .sf_date::before{
  margin-right: var(--e-1);
}
body.disp_single #skin_wrapper .sf_duree{
  align-self: flex-start;
  margin-top: 3px;
}
/* Sans mandat, le point median n a plus rien a separer : il disparait avec
   lui. Le selecteur de frere adjacent le dit sans une ligne de PHP.        */
body.disp_single #skin_wrapper .sf_mandat:empty + .sf_date::before{
  content: none;
}

/* --- 13.16 La premiere ligne de la byline --------------------------------- */
/* La pastille de duree est DANS la ligne du nom, pas a cote de la colonne :
   `align-items: baseline` l aligne alors sur la ligne de base du nom, par
   construction. Le reglage precedent — align-self plus une marge de 3 px —
   la calait sur le haut de l avatar, c est-a-dire sur rien.               */
body.disp_single #skin_wrapper .sf_qui{
  flex: 1;
  min-width: 0;
}
body.disp_single #skin_wrapper .sf_ligne1{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e-4);
}
body.disp_single #skin_wrapper .sf_duree{
  margin-left: 0;
  margin-top: 0;
  align-self: baseline;
  flex-shrink: 0;
}

/* --- 13.17 La date rejoint la pastille ------------------------------------ */
/* Arbitrage de Yorgos, 30/08 : la date n a rien a faire dans la ligne qui
   parle de la personne, et une seconde pastille aurait alourdi un chapeau
   qui porte deja quatre niveaux. Une seule pastille porte donc les deux
   faits — c est le vocabulaire des tuiles de la maquette, « 25 aout 2026
   · 6 min ».
   Le point median passe de la date a la duree : c est lui qui les separe.
   ⚠️ Les regles de .sf_meta du § 13.15 deviennent mortes — le niveau a
   disparu du gabarit. A retirer a la cloture du lot, avec le reste du
   menage : on ne retire pas une regle au milieu d une seance.            */
body.disp_single #skin_wrapper .sf_date::before{ content: none; }
body.disp_single #skin_wrapper .sf_min::before{
  content: "\00b7";
  margin: 0 var(--e-1);
  color: var(--gris-2);
}
body.disp_single #skin_wrapper .sf_mandat{
  display: block;
}

/* --- 13.18 Le separateur de la pastille ----------------------------------- */
/* Le point median est desormais un CARACTERE du gabarit, pas un pseudo-
   element. Un separateur ecrit se voit dans le HTML servi, se debogue au
   `grep` et ne depend pas d une sequence d echappement CSS.
   L ancien ::before est neutralise ici : sans ca, le jour ou il se
   remettrait a rendre, on aurait deux points.                             */
body.disp_single #skin_wrapper .sf_min::before{ content: none; }
body.disp_single #skin_wrapper .sf_sep{
  margin: 0 var(--e-1);
  color: var(--gris-2);
}

/* --- 13.18 bis La couleur du separateur ----------------------------------- */
/* --gris-2 est le jeton des BORDURES (#E1E1E3). Sur le fond --gris-1 de la
   pastille (#F4F4F6) il ne se voit pas : environ 1,1:1. Le separateur est
   du TEXTE, il prend donc le jeton du texte secondaire, --gris-6, comme le
   reste de la pastille.                                                    */
body.disp_single #skin_wrapper .sf_sep{
  color: var(--gris-6);
}

/* =============================================================================
   14. LE PIED DE CARTE — date et duree de lecture
   Pose le 30/08/2026, lot 8.

   Le widget en disposition « Blocs RWD » n emet ni date ni duree, et aucun
   de ses parametres ne les expose — mesure faite. La seule voie est le mode
   gabarit, qui fait perdre `item_first_image_placeholder`, decrit dans le
   coeur comme reserve aux gabarits automatiques. On le REECRIT a la main :
   il est vide, c est la feuille qui le peint.
   `margin-top: auto` colle le pied au bas de la carte, dont la boite est
   une colonne flex depuis le § 9.3 : les pieds s alignent donc entre eux
   quels que soient les titres.                                            */
#skin_wrapper .widget_rwd_content .item_excerpt{
  padding-bottom: var(--e-3);
}
#skin_wrapper .widget_rwd_content .sf_carte_pied{
  margin-top: auto;
  padding: 0 var(--e-4) var(--e-4);
  font-family: var(--police-titre);
  font-size: var(--t-mini);
  color: var(--gris-6);
}
#skin_wrapper .widget_rwd_content .sf_carte_pied .sf_sep{
  margin: 0 var(--e-1);
  color: var(--gris-6);
}

/* Le mois en bas de casse, comme au § 13.13 bis : regle typographique
   francaise, et le moteur capitalise.                                      */
#skin_wrapper .widget_rwd_content .sf_carte_date{
  text-transform: lowercase;
}

/* --- 14.1 La colonne s elargit, la barre laterale est partie -------------- */
/* 720 px etait la valeur de la maquette, qui pensait la page AVEC une barre
   laterale a cote. Elle est retiree depuis (arbitrage du 30/08) : la colonne
   peut s elargir. 75 signes est la borne HAUTE de la mesure de lecture —
   au-dela, l oeil perd le retour a la ligne. Ces deux valeurs remplacent
   celles du bloc :root en tete de feuille ; a fusionner a la cloture.     */
:root{
  --article: 800px;
  --lecture:  75ch;
}

/* --- 14.2 La pilule de rubrique — une seule, et sans lien ----------------- */
/* La maquette ne pose qu une pilule par tuile et n en fait PAS un lien :
   <div class="rub">. Le gabarit rend donc [Item:cat_name], la rubrique
   principale en texte. L habillage quitte le <a>, qui n existe plus, pour
   le conteneur lui-meme.                                                  */
#skin_wrapper .widget_rwd_content .item_categories{
  display: inline-flex;
  align-items: center;
  height: 28px;
  background: var(--marine);
  color: #fff;
  font-family: var(--police-titre);
  font-size: var(--t-meta);
  font-weight: var(--g-demi);
  line-height: 1;
  padding: 2px 15px 0;
  border-radius: var(--r-pilule);
  letter-spacing: .02em;
}

/* --- 14.3 Les bandeaux de rubrique ---------------------------------------- */
/* Mascottes decoupees dans les cartes og-*-1200x630.png de
   media/shared/global/charte/. LES ORIGINAUX N ONT PAS ETE TOUCHES : ce sont
   les images d apercu social, partagees par les quatre collections.
   Le fond des cartes vaut #E7E8FD, soit --lavande a l identique : la decoupe
   se pose sans jointure et sans transparence, donc sans halo.
   La rubrique est portee par data-rub, ecrit par le gabarit. On filtre sur un
   FRAGMENT du libelle : le prefixe [T] du developpement n y change rien, et
   son retrait a la cloture non plus.                                       */
#skin_wrapper .widget_rwd_content .item_first_image_placeholder{
  background-image: url(img/rubriques/rub-defaut.png);
  background-repeat: no-repeat;
  background-position: right 10px bottom -10px;
  background-size: auto 92px;
}
#skin_wrapper .item_first_image_placeholder[data-rub*="Comptes rendus"]{
  background-image: url(img/rubriques/rub-cse.png);
}
#skin_wrapper .item_first_image_placeholder[data-rub*="Vos droits"]{
  background-image: url(img/rubriques/rub-vos-droits.png);
}
#skin_wrapper .item_first_image_placeholder[data-rub*="negociations"],
#skin_wrapper .item_first_image_placeholder[data-rub*="négociations"]{
  background-image: url(img/rubriques/rub-nos-negociations.png);
}
#skin_wrapper .item_first_image_placeholder[data-rub*="Actualit"]{
  background-image: url(img/rubriques/rub-actualite-sociale.png);
}
#skin_wrapper .item_first_image_placeholder[data-rub*="Aide et mode"]{
  background-image: url(img/rubriques/rub-aide.png);
}
#skin_wrapper .item_first_image_placeholder[data-rub*="La Section"]{
  background-image: url(img/rubriques/rub-la-section.png);
}
/* La premiere tuile est plus genereuse : la maquette y met 100 px. */
#skin_wrapper .widget_rwd_blocks > div:first-child .item_first_image_placeholder{
  background-size: auto 100px;
  background-position: right 22px bottom -10px;
}

/* --- 14.4 La mascotte redevient un motif, pas un signe de rubrique -------- */
/* Constat du 30/08, verifie sur planche de comparaison : meme montree en
   ENTIER, la mascotte ne differencie pas les rubriques — les poses sont
   subtiles et deux sont identiques (CSE et defaut). Le cadrage precedent,
   92 px cale en bas dans une bande de 76, n en montrait qu une tranche
   centrale : le visage, qui est le meme partout.
   Elle est donc reduite et montree entiere : motif de marque, pas signe de
   rubrique. L identification reste portee par la pilule, qui NOMME la
   rubrique. Arbitrage en attente : pictogrammes, ou teinte par rubrique.  */
#skin_wrapper .widget_rwd_content .item_first_image_placeholder{
  background-size: auto 62px;
  background-position: right 14px center;
}
#skin_wrapper .widget_rwd_blocks > div:first-child .item_first_image_placeholder{
  background-size: auto 68px;
  background-position: right 20px center;
}

/* --- 14.5 Les bandeaux passent aux pictos de Leonie ----------------------- */
/* Les decoupes des cartes LinkedIn ne differenciaient pas les rubriques : le
   personnage y est le meme, seules les poses changent, et deux etaient
   identiques. Leonie a fourni HUIT EMOTIONS distinctes, en vectoriel — elles
   se lisent a 62 px, ce qui a ete verifie sur planche avant pose.
   ⚠️ L emotion est attachee a la RUBRIQUE, donc a TOUS ses articles, y
   compris les mauvaises nouvelles. « Sad » et « sleep » sont volontairement
   inemployes : un nuage en larmes au-dessus d un plan de departs se lirait
   comme un commentaire.                                                    */
#skin_wrapper .widget_rwd_content .item_first_image_placeholder{
  background-image: url(img/rubriques/rub-defaut.svg?v=20260906);
}
#skin_wrapper .item_first_image_placeholder[data-rub*="Comptes rendus"]{
  background-image: url(img/rubriques/rub-cse.svg?v=20260906);
}
#skin_wrapper .item_first_image_placeholder[data-rub*="Vos droits"]{
  background-image: url(img/rubriques/rub-vos-droits.svg?v=20260906);
}
#skin_wrapper .item_first_image_placeholder[data-rub*="negociations"],
#skin_wrapper .item_first_image_placeholder[data-rub*="négociations"]{
  background-image: url(img/rubriques/rub-nos-negociations.svg?v=20260906);
}
#skin_wrapper .item_first_image_placeholder[data-rub*="Actualit"]{
  background-image: url(img/rubriques/rub-actualite-sociale.svg?v=20260906);
}
#skin_wrapper .item_first_image_placeholder[data-rub*="Aide et mode"]{
  background-image: url(img/rubriques/rub-aide.svg?v=20260906);
}
#skin_wrapper .item_first_image_placeholder[data-rub*="La Section"]{
  background-image: url(img/rubriques/rub-la-section.svg?v=20260906);
}

/* --- 14.6 Les pastilles de la liste compacte ------------------------------ */
/* Meme principe que les bandeaux de tuiles : la rubrique est portee par
   data-rub, ecrit par le gabarit content_list_compact_sf_item. A 44 px la
   mascotte est petite — c est une pastille, pas une illustration : elle
   donne un rythme et une couleur a la liste, la rubrique reste nommee
   ailleurs.                                                               */
#skin_wrapper .sf_ligne__pastille{
  background-image: url(img/rubriques/rub-defaut.svg?v=20260906);
  background-repeat: no-repeat;
  background-position: center bottom -2px;
  background-size: auto 32px;
}
#skin_wrapper .sf_ligne__pastille[data-rub*="Comptes rendus"]{
  background-image: url(img/rubriques/rub-cse.svg?v=20260906);
}
#skin_wrapper .sf_ligne__pastille[data-rub*="Vos droits"]{
  background-image: url(img/rubriques/rub-vos-droits.svg?v=20260906);
}
#skin_wrapper .sf_ligne__pastille[data-rub*="negociations"],
#skin_wrapper .sf_ligne__pastille[data-rub*="négociations"]{
  background-image: url(img/rubriques/rub-nos-negociations.svg?v=20260906);
}
#skin_wrapper .sf_ligne__pastille[data-rub*="Actualit"]{
  background-image: url(img/rubriques/rub-actualite-sociale.svg?v=20260906);
}
#skin_wrapper .sf_ligne__pastille[data-rub*="Aide et mode"]{
  background-image: url(img/rubriques/rub-aide.svg?v=20260906);
}
#skin_wrapper .sf_ligne__pastille[data-rub*="La Section"]{
  background-image: url(img/rubriques/rub-la-section.svg?v=20260906);
}

/* --- 14.6 bis Cadrage des pastilles --------------------------------------- */
/* La mascotte doit tenir ENTIERE dans le carre de 44 px, avec de l air : a
   32 px calee en bas elle touchait l arrondi et ses jambes etaient coupees. */
#skin_wrapper .sf_ligne__pastille{
  background-position: center;
  background-size: auto 26px;
}

/* =============================================================================
   15. LE SOMMAIRE D ARTICLE
   Pose le 30/08/2026, lot 8.

   Rendu par le widget du greffon b2evoTOC, pose en ordre 0 du conteneur
   item_single : il vient donc AVANT le contenu, ou la maquette le place.
   Le greffon gere le cas vide — `if( empty( $toc ) )` dans son code : pas de
   boite sur un article sans intertitre.
   ⚠️ Il rend un <ul>, la maquette dessine une liste numerotee. Le numero est
   pose par un COMPTEUR CSS, ce qui est son usage propre : il ne cree aucune
   information, l ordre est deja porte par l ordre du document.
   ⚠️ Chaque <li> porte style="margin-left:0px" EN ATTRIBUT, donc hors de
   portee sans !important. Sans consequence tant que tous les intertitres sont
   de meme niveau — verifie : neuf entrees, toutes a 0.                     */
body.disp_single #skin_wrapper .widget_plugin_b2evoTOC{
  background: var(--lilas-pale);
  border-radius: var(--r-carte);
  padding: var(--e-5) var(--e-6);
  margin: 0 0 var(--e-7);
}
body.disp_single #skin_wrapper .widget_plugin_b2evoTOC h3{
  font-family: var(--police-titre);
  font-size: var(--t-petit);
  font-weight: var(--g-noir);
  line-height: 1.2;
  color: var(--titre);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin: 0 0 var(--e-3);
}
body.disp_single #skin_wrapper ul.evo_plugin__table_of_contents{
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: sf_toc;
}
body.disp_single #skin_wrapper ul.evo_plugin__table_of_contents li{
  counter-increment: sf_toc;
  padding: 3px 0;
  font-size: var(--t-petit);
  line-height: 1.4;
}
body.disp_single #skin_wrapper ul.evo_plugin__table_of_contents li::before{
  content: counter(sf_toc) ".";
  margin-right: var(--e-2);
  font-family: var(--police-titre);
  font-weight: var(--g-demi);
  color: var(--titre);
}
body.disp_single #skin_wrapper ul.evo_plugin__table_of_contents a{
  color: var(--marine-txt);
  text-decoration: none;
}
body.disp_single #skin_wrapper ul.evo_plugin__table_of_contents a:hover{
  color: var(--titre);
  text-decoration: underline;
}

/* =============================================================================
   16. LA ZONE DE COMMENTAIRES
   Posee le 30/08/2026, lot 8.

   ⚠️ Elle n est rendue que pour un lecteur AUTORISE a commenter. Le droit
   vient du groupe sur la collection 1 et d un droit individuel sur la 3 :
   une preproduction qui ne copie pas les droits fait juger une page que
   personne ne verra.
   La maquette veut UN bloc « suivre » ; le moteur en rend deux, l un pour le
   fil de commentaires, l autre pour les nouveaux articles. On les reunit
   visuellement plutot que d en supprimer un : ils ne disent pas la meme
   chose et l un des deux est le seul canal qui ramene un lecteur.        */
body.disp_single #skin_wrapper h3.evo_comment__list_title{
  font-size: var(--t-h2-sec);
  font-weight: var(--g-noir);
  line-height: var(--lh-titre);
  color: var(--titre);
  margin: var(--e-8) 0 var(--e-4);
}
body.disp_single #skin_wrapper .evo_container__comment_area .panel{
  background: var(--surface);
  border: var(--trait);
  border-radius: var(--r-carte);
  box-shadow: none;
  margin-bottom: var(--e-3);
}
body.disp_single #skin_wrapper .evo_container__comment_area .panel-heading{
  background: var(--lilas-pale);
  border: 0;
  border-radius: var(--r-carte) var(--r-carte) 0 0;
  padding: var(--e-3) var(--e-5);
}
body.disp_single #skin_wrapper .evo_container__comment_area .panel-title{
  font-family: var(--police-titre);
  font-size: var(--t-base);
  font-weight: var(--g-demi);
  color: var(--titre);
  margin: 0;
}
body.disp_single #skin_wrapper .evo_container__comment_area .panel-body{
  padding: var(--e-5);
}
/* Les deux blocs d abonnement, donnes a lire comme un seul. */
body.disp_single #skin_wrapper .evo_post_comment_notification,
body.disp_single #skin_wrapper .evo_post_notification{
  background: var(--lilas-pale);
  padding: var(--e-3) var(--e-5);
  font-size: var(--t-petit);
  line-height: var(--lh-corps);
  color: var(--gris-9);
  text-align: left;
}
body.disp_single #skin_wrapper .evo_post_comment_notification{
  border-radius: var(--r-carte) var(--r-carte) 0 0;
  margin-top: var(--e-5);
}
body.disp_single #skin_wrapper .evo_post_notification{
  border-radius: 0 0 var(--r-carte) var(--r-carte);
  border-top: 1px solid var(--lilas);
  margin-bottom: var(--e-8);
}
body.disp_single #skin_wrapper .evo_post_comment_notification a,
body.disp_single #skin_wrapper .evo_post_notification a{
  color: var(--orange-txt);
  font-weight: var(--g-demi);
  text-decoration: none;
}

/* --- 16bis. LES TROIS ACTIONS D ABONNEMENT, UNE SEULE FORME -------------
   Constat de Yorgos, 01/09 : le controle d article n a pas la meme forme
   que les deux du dessous. La cause n est PAS un ecart entre widgets mais
   entre les deux ETATS du widget d article :
   _item_comment_notification.widget.php rend un .btn quand on n est pas
   abonne (ligne 248) et une phrase suivie d un lien quand on l est (234).
   Les deux blocs de collection restent des boutons dans les deux etats.
   La note du 30/08 au paragraphe mobile disait « non tranchee, a verser a
   la recette ». Arbitrage Yorgos du 01/09 : on tranche pour le bouton.
   On cesse aussi de dependre du .btn-default de Bootstrap : les trois
   actions prennent la forme de la charte. Cible tactile : 14,5 x 1,2 =
   17,4 px de texte + 2 x 13 de marge interne + 2 x 1,5 de filet = 46,4 px,
   au-dessus du jeton --cible (44 px).                                    */
body.disp_single #skin_wrapper .evo_post_comment_notification .btn,
body.disp_single #skin_wrapper .evo_post_comment_notification span > a,
body.disp_single #skin_wrapper .evo_post_notification .btn{
  display: inline-block;
  margin-top: var(--e-3);
  padding: 13px var(--e-5);
  background: var(--surface);
  border: 1.5px solid var(--marine);
  border-radius: var(--r-pilule);
  color: var(--titre);
  font-weight: var(--g-demi);
  font-size: var(--t-petit);
  line-height: 1.2;
  text-decoration: none;
}

/* === 17. LE BADGE MEMBRES SOUS LA PASTILLE ================================ */
/* Arbitrage Yorgos du 30/08 : le badge doit tomber sous la pastille date -
   duree, pas sous le nom. .sf_qui etait une colonne flex, donc tout
   s empilait a gauche. Elle passe en grille deux colonnes : la ligne du nom
   occupe toute la largeur, la ligne 2 porte le mandat a gauche et le badge
   a droite, aligne sur le bord droit de la pastille. Les regles 13.15 et
   13.16 restent en place ; celles-ci les completent par la cascade, sans
   un seul !important.                                                      */
body.disp_single #skin_wrapper .sf_qui{
  display: grid;
  grid-template-columns: 1fr auto;
  row-gap: 2px;
  column-gap: var(--e-4);
  align-items: center;
}
body.disp_single #skin_wrapper .sf_ligne1{
  grid-column: 1 / -1;
}
body.disp_single #skin_wrapper .sf_mandat{
  grid-column: 1;
  grid-row: 2;
}
body.disp_single #skin_wrapper .sf_statut{
  grid-column: 2;
  grid-row: 2;
  justify-self: end;
}
body.disp_single #skin_wrapper .sf_statut:empty{ display: none; }


/* =============================================================================
   18. LE MOBILE — lot 9
   Pose le 30/08/2026.

   Le mobile n est PAS un skin separe : aucun `mobile_skin_ID` n est designe,
   et des quatre jeux de conteneurs `normal|mobile|tablet|alt` seul le
   premier est rendu. Tout se joue ici, en points de rupture.

   ⚠️ DEUX REGLES DE CE BLOC NE SONT PAS DANS UNE MEDIA QUERY, et c est
   volontaire : elles corrigent des defauts qui existent a TOUTES les
   largeurs, et que la vue etroite a seulement rendus visibles.
   ============================================================================= */

/* --- 18.1 Le site est clair, et il le declare ----------------------------- */
/* Sans cette ligne, un navigateur regle en mode sombre — Firefox avec son
   reglage, Chrome Android en « auto-dark », les extensions — FABRIQUE une
   version sombre en retournant les luminances. Mesure du 30/08 sur Firefox
   iOS : le marine devient noir, le lilas devient anthracite, et l editeur de
   commentaire reste blanc pur au milieu de la page. La charte n y survit pas.
   📌 CE N EST PAS UN REFUS DU MODE SOMBRE, c est un refus du mode sombre
   AUTOMATIQUE. Un vrai theme sombre est un lot a part, et il est a portee :
   toute la charte vit dans le bloc :root, il suffira de le redeclarer sous
   `prefers-color-scheme: dark`. Mesure faite sur la palette de Leonie —
   Grey 100 sur Blue 800 donne 15,63:1, Blue 100 donne 11,18:1.
   ⚠️ Safari ne fabrique pas de mode sombre automatique : cette ligne ne
   change rien chez lui. Elle protege les lecteurs sous Firefox et Chrome.  */
:root{ color-scheme: light; }

/* --- 18.2 Le titre de tuile doit pouvoir passer a la ligne ---------------- */
/* HORS MEDIA QUERY : le defaut existe a toutes les largeurs.
   `[Item:permalink]` emet `<a class="nowrap">` — LA CLASSE EST DANS LE HTML,
   pas dans une feuille. C est pour cela qu aucun grep sur `.item_title`,
   ni dans charte.css, ni dans style.css, ni dans les blocs <style> generes,
   n avait rien trouve.
   Mesure du 30/08 a 440 px : le titre demande 662 px pour 408 px de place,
   et l `overflow: hidden` de la carte (§ 9.3) le coupe net, sans points de
   suspension.
   📌 Le gabarit 68 (liste compacte) ne connait pas ce defaut : il ecrit
   `[Item:permalink|text=#title|class=default]`. Le gabarit 74 (tuiles)
   appelle `[Item:permalink]` nu. La voie du gabarit est plus propre, mais
   elle touche `evo_templates`, PARTAGEE avec la production : on corrige
   ici, et le gabarit se reprendra a froid, hors seance.                    */
#skin_wrapper .widget_rwd_content .item_title a.nowrap{
  white-space: normal;
}

/* --- 18.3 La pastille date · duree se replie sous le nom ------------------ */
/* La pastille porte `white-space: nowrap` (§ 13.14) et ne peut pas se
   couper. Sous 768 px, « 30 aout 2026 · 6 min de lecture » ne tient plus a
   cote du nom et sort de la colonne.
   On NE RETIRE PAS le nowrap — une pastille coupee sur deux lignes serait
   pire que le debordement — on autorise la ligne du nom a passer a la
   ligne. La grille du § 17 n est pas touchee : `.sf_ligne1` occupe deja
   toute la largeur, elle en prend simplement deux hauteurs, et la ligne
   « mandat + badge Membres » reste dessous.
   ⚠️ Le libelle « min de lecture » vient du gabarit 72, pas de la feuille :
   le raccourcir supposerait de toucher `evo_templates`.                    */
@media (max-width: 767px){
  body.disp_single #skin_wrapper .sf_ligne1{
    flex-wrap: wrap;
    row-gap: var(--e-2);
  }
}


/* --- 18.4 Le badge « Membres » -------------------------------------------- */
/* HORS MEDIA QUERY : le badge est faux a toutes les largeurs.
   `rsc/css/bootstrap-blog_base.css` ligne 1310 porte
   `background-color: #FF9C2A !important`. Aucune specificite ne passe devant
   un !important, et cette feuille en tient ZERO depuis 2 100 lignes.
   🎯 ON NE DISPUTE PAS LA PROPRIETE. `background-color` et `background-image`
   sont deux couches, et l image se peint PAR-DESSUS la couleur. Un degrade a
   un seul ton est un aplat : on pose le marine en `background-image`,
   propriete que personne ne revendique, et le #FF9C2A reste dessous.
   Les TROIS occurrences relevees le 30/08 portent `.evo_status__protected` —
   la ligne d auteur et les deux en-tetes de commentaire. Une regle suffit.
   ⚠️ Le `background: var(--marine)` du § 13.9 devient redondant : a retirer
   au menage de cloture, pas au milieu d une seance.                        */
#skin_wrapper .evo_status.badge.evo_status__protected{
  background-image: linear-gradient(var(--marine), var(--marine));
  color: #fff;
}

/* --- 18.5 Les chips de rubriques ------------------------------------------ */
/* LA BARRE LATERALE DEVIENT LA RANGEE DE CHIPS. Aucun widget nouveau, aucune
   ligne de runbook a la bascule : on remet en page ce que le moteur emet.

   DOM releve dans Safari le 30/08 a 440 px, pas suppose :
     .row
       ├ DIV.col-md-9                          le contenu
       └ ASIDE.col-md-3
           ├ .evo_container__sidebar     → widget_core_coll_category_list
           └ .evo_container__sidebar_2   → widget_core_coll_comment_list

   Sous 768 px Bootstrap empile, et l aside tombe SOUS les articles. La
   maquette veut les rubriques sous l en-tete. `display: contents` dissout la
   boite de l aside : ses deux conteneurs deviennent enfants de la rangee, et
   `order` les place. C est la technique du § 4, deja eprouvee sur
   `site_header` (P-285).
   ⚠️ `:has()` ne vise que la rangee qui porte un aside — celle du corps. Les
   rangees d en-tete et de pied n y touchent pas. Supporte par Safari 15.4+
   et Chrome 105+ ; la ou il manque, rien ne s applique et la page reste
   telle qu aujourd hui.
   📌 La boite de l aside dissoute, ses 15 px de gouttiere disparaissent : le
   § retablit le padding sur le conteneur des commentaires, et la rangee de
   chips s en sert pour filer d un bord a l autre. Une chip coupee au bord
   DIT qu il y en a d autres ; un blanc ne le dit pas.
   ⚠️ ECART ASSUME A LA MAQUETTE : elle dessine des chips de 30 px et ecrit
   par ailleurs « cible tactile >= 44 px partout ». Les deux ne tiennent pas
   ensemble. On suit la seconde — c est celle qui engage l accord handicap. */
@media (max-width: 767px){

  #skin_wrapper .row:has(> aside){
    display: flex;
    flex-direction: column;
  }
  #skin_wrapper .row:has(> aside) > .col-md-9{ order: 2; }
  #skin_wrapper .row:has(> aside) > aside{ display: contents; }
  #skin_wrapper .evo_container__sidebar{ order: 1; }
  #skin_wrapper .evo_container__sidebar_2{ order: 3; padding: 0 15px; }

  #skin_wrapper aside .widget_core_coll_category_list{
    border: 0;
    padding: 0;
    background: transparent;
    margin: 0 0 var(--e-5);
  }

  /* Le titre « RUBRIQUES » quitte l ecran SANS quitter le document.
     ⚠️ Ni `display: none` ni `font-size: 0` : c est exactement le defaut
     releve a l audit du 15/08 sur « Articles en acces libre », sur un site
     qui porte un accord handicap signe. Le clip garde le titre lisible par
     un lecteur d ecran.                                                    */
  #skin_wrapper aside .widget_core_coll_category_list .panel-heading{
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  #skin_wrapper aside .widget_core_coll_category_list ul{
    display: flex;
    gap: var(--e-2);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    margin: 0;
    padding: var(--e-1) 15px;
  }
  #skin_wrapper aside .widget_core_coll_category_list ul::-webkit-scrollbar{
    display: none;
  }
  #skin_wrapper aside .widget_core_coll_category_list li{
    flex: 0 0 auto;
  }

  /* La pastille carree du § 10.2 n a plus d objet : dans une liste verticale
     elle donnait le rythme, dans une pilule elle fait doublon.            */
  #skin_wrapper aside .widget_core_coll_category_list a{
    display: inline-flex;
    align-items: center;
    min-height: var(--cible);
    padding: 2px 16px 0;
    gap: 0;
    background: var(--lilas-pale);
    color: var(--titre);
    font-family: var(--police-titre);
    font-size: var(--t-meta);
    font-weight: var(--g-demi);
    line-height: 1;
    border-radius: var(--r-pilule);
    white-space: nowrap;
  }
  #skin_wrapper aside .widget_core_coll_category_list a::before{
    display: none;
  }
  #skin_wrapper aside .widget_core_coll_category_list a:hover{
    background: var(--marine);
    color: #fff;
    text-decoration: none;
  }
}


/* --- 18.6 Le sommaire, resserre en etroit --------------------------------- */
/* Sept entrees avant le premier paragraphe occupent environ 250 px sur un
   ecran de 956 : un quart de la hauteur avant d avoir lu une ligne.
   ⚠️ ON NE LE REPLIE PAS, ET C EST UNE DECISION. Le greffon b2evoTOC rend un
   <h3> et un <ul>, SANS aucun element interactif. Un repli demanderait soit
   du JavaScript — qui ne s ecrit pas sur ce chantier sans arbitrage, regle
   posee pour B-1 — soit une commande fabriquee en CSS, c est-a-dire
   exactement le defaut releve a l audit du 15/08 sur « Articles en acces
   libre », sur un site qui porte un accord handicap signe.
   On se contente donc de lui faire prendre moins de place. Le repli part en
   backlog sous B-8.                                                        */
@media (max-width: 767px){
  body.disp_single #skin_wrapper .widget_plugin_b2evoTOC{
    padding: var(--e-4);
    margin-bottom: var(--e-5);
  }
  body.disp_single #skin_wrapper .widget_plugin_b2evoTOC h3{
    margin-bottom: var(--e-2);
  }
  body.disp_single #skin_wrapper ul.evo_plugin__table_of_contents li{
    padding: 1px 0;
    line-height: 1.35;
  }
}


/* --- 18.7 La zone de commentaires en etroit ------------------------------- */
/* Releve dans Safari le 30/08 a 440 px, page article, connecte :
     DIV.btn-group.dropup.pull-right              169 px, flottant a droite
     DIV.evo_fileuploader_form / TABLE.filelist   113 px
     DIV.qq-uploader-selector                     103 px
   🎯 LA ZONE DE DEPOT N EST PAS TROP LARGE, ELLE EST ECRASEE. Le groupe de
   boutons flotte a droite sur 169 px et ne laisse que 113 px a la liste dans
   une colonne qui en fait 319 : d ou le libelle coupe et le defileur interne.
   Ce n est PAS un debordement de page — la liste complete de ce qui deborde
   tient en trois lignes, toutes a 2 px, et scrollX vaut 0. C est un
   empilement horizontal qui n a plus la place de s empiler.
   ⚠️ ON NE TOUCHE PAS A LA BARRE DE TinyMCE. Elle est positionnee en
   JavaScript, prefixe mce- (TinyMCE 4) : la restyler casserait en silence.
   ⚠️ ET ON NE CORRIGE PAS LES 2 PX. Leur cause n est pas etablie, la page ne
   defile pas, personne ne les voit. Constat, pas action.                   */
@media (max-width: 767px){
  body.disp_single #skin_wrapper .evo_container__comment_area .btn-group.pull-right{
    float: none;
    display: block;
    margin-bottom: var(--e-3);
  }
  body.disp_single #skin_wrapper .evo_container__comment_area .panel-body{
    padding: var(--e-4);
  }
}


/* --- 18.8 L en-tete d article et la barre de balises ---------------------- */
/* (a) LA BARRE b2evQTag EST MASQUEE SOUS 768 px. Arbitrage de Yorgos, 30/08.
   Ce sont les boutons de balises HTML brutes — ins, del, str, em, code, p,
   block, ul, ol, li — qui font double emploi avec TinyMCE juste dessous et
   coutent 71 px sur 956. ⚠️ MASQUAGE MOBILE SEULEMENT : l outil reste entier
   sur ordinateur. Ce n est pas un retrait de capacite, c est un choix de
   place — la distinction compte, elle est celle de B-2.

   (b) L AVATAR SE RECALE EN HAUT, ET LA COLONNE PASSE EN UN SEUL RANG.
   Effet de bord du § 18.3, releve par Yorgos : en laissant la pastille date ·
   duree passer a la ligne, le bloc a grandi, et `align-items: center` du
   § 13.13 a recentre l avatar a cote de la PASTILLE au lieu du NOM. Avec un
   mandat sur deux lignes, les trois niveaux se brouillent.
   La grille deux colonnes du § 17 est faite pour une largeur d ordinateur :
   sous 768 px le mandat et le badge n ont plus de quoi cohabiter sur un
   rang. Ils s empilent — nom + pastille, mandat, badge — ce qui est l ordre
   de lecture, et la grille reste celle du § 17 sur les grandes largeurs.  */
@media (max-width: 767px){
  body.disp_single #skin_wrapper .b2evQTag_toolbar{
    display: none;
  }
  body.disp_single #skin_wrapper .sf_byline{
    align-items: flex-start;
  }
  body.disp_single #skin_wrapper .sf_qui{
    grid-template-columns: 1fr;
  }
  body.disp_single #skin_wrapper .sf_mandat{
    grid-column: 1;
    grid-row: 2;
  }
  body.disp_single #skin_wrapper .sf_statut{
    grid-column: 1;
    grid-row: 3;
    justify-self: start;
  }
}


/* --- 18.9 L en-tete d article, compose et non empile ---------------------- */
/* ⚠️ DEUXIEME PASSE SUR LE MEME OBJET. Le § 18.8 (b) a range les quatre
   niveaux, il ne les a pas composes : nom, pastille, mandat et badge se
   suivaient en escalier, quatre formes differentes calees sur le bord de
   l avatar. Constat de Yorgos.
   🎯 LA REGLE DE LECTURE : le nom et la qualite vont ensemble — c est la
   PERSONNE. La date, la duree et le statut vont ensemble — c est le
   DOCUMENT. Deux pastilles sur une meme ligne se lisent comme un rang de
   meta ; empilees, elles se lisent comme une pile.
   📌 La pastille est prisonniere de `.sf_ligne1` dans le gabarit 72, et le
   gabarit vit dans `evo_templates`, table PARTAGEE. `display: contents`
   dissout ce niveau et rend ses deux enfants directement placables dans la
   grille du § 17 — troisieme emploi de la technique apres l en-tete de site
   (P-285) et les chips du § 18.5.
   ⚠️ Le `flex-wrap` pose au § 18.3 devient sans objet sous 768 px : un
   element en `display: contents` n a plus de mise en page flex. Il reste
   utile entre 768 px et la largeur ou la pastille tient. A revoir au menage.
   ⚠️ Verifie a 375 px : pastille ~200 px + badge ~85 px + gouttiere dans une
   colonne de 319. Ca tient, mais sans marge — si un mandat plus long ou une
   duree a deux chiffres le fait deborder, c est ici qu il faudra repasser. */
@media (max-width: 767px){
  body.disp_single #skin_wrapper .sf_qui{
    grid-template-columns: 1fr auto;
    row-gap: var(--e-2);
  }
  body.disp_single #skin_wrapper .sf_ligne1{
    display: contents;
  }
  body.disp_single #skin_wrapper .sf_auteur{
    grid-column: 1 / -1;
    grid-row: 1;
  }
  body.disp_single #skin_wrapper .sf_mandat{
    grid-column: 1 / -1;
    grid-row: 2;
  }
  body.disp_single #skin_wrapper .sf_duree{
    grid-column: 1;
    grid-row: 3;
    justify-self: start;
    margin-left: 0;
  }
  body.disp_single #skin_wrapper .sf_statut{
    grid-column: 2;
    grid-row: 3;
    justify-self: end;
  }
}


/* --- 18.10 La pastille perd son assiette en etroit ------------------------ */
/* Constat de Yorgos : « alignement de la capsule de gauche pas terrible avec
   le Yorgos et le delegue ».
   🎯 LA CAUSE EST LE REMBOURRAGE, PAS LA POSITION. La pastille porte
   `padding: 6px 13px 4px` (§ 13.14) : sa BOITE part du bord de la colonne,
   son TEXTE part 13 px plus loin. Le nom et le mandat, eux, commencent au
   bord. Trois lignes qui devraient partager une seule verticale optique, et
   la troisieme rentre.
   La tirer de 13 px vers la gauche la collerait a l avatar — la gouttiere
   n en fait que 12. On retire donc l assiette : sous 768 px la date et la
   duree redeviennent du texte, comme le mandat juste au-dessus.
   📌 L assiette avait ete dessinee pour une pastille posee A COTE du nom, a
   droite d une ligne large, ou elle se lit comme un objet separe. Empilee
   sous le nom, elle devient un troisieme bloc sur le meme bord.
   Il ne reste alors qu UNE pilule dans l en-tete — le badge — ce qui est
   l arbitrage de Yorgos au lot 8 : « je ne veux pas multiplier les puces ».
   ⚠️ `background-color` et non le raccourci `background` : lecon du § 18.4,
   un raccourci efface les couches qu on n ecrit pas.                      */
@media (max-width: 767px){
  body.disp_single #skin_wrapper .sf_duree{
    background-color: transparent;
    padding: 0;
    border-radius: 0;
    line-height: 1.4;
  }
}


/* --- 18.11 La date et le badge sur la meme regle d alignement ------------- */
/* Constat de Yorgos, mesure sur capture : le texte de la date a son centre
   vertical a 162, la boite du badge a 167,5. Ils ne sont pas decales par
   hasard — ILS N OBEISSENT PAS A LA MEME REGLE.
   Le § 13.16 pose `align-self: baseline` sur la pastille. C etait juste au
   lot 8 : elle vivait DANS la ligne du nom et devait s asseoir sur sa ligne
   de base. Le badge, lui, n a rien et prend le `align-items: center` de la
   grille du § 17.
   Depuis que le § 18.9 les met sur le meme rang, l ecart se voit. On les
   remet sur la meme regle — le centre, parce qu une pilule et un texte se
   lisent alignes sur leurs centres optiques, pas sur une ligne de base que
   la pilule n a pas.
   ⚠️ Troisieme effet de bord d un reglage JUSTE DANS SON ANCIEN CONTEXTE
   (apres l avatar du § 18.8 et l assiette du § 18.10). Deplacer un element
   dans une grille ne deplace pas les regles ecrites pour sa place d avant.
   📌 A la cloture, les §§ 13.15 a 13.17 seront a relire en entier : ils
   portent plusieurs reglages devenus sans objet ou contradictoires en
   etroit.                                                                 */
@media (max-width: 767px){
  body.disp_single #skin_wrapper .sf_duree{
    align-self: center;
  }
}


/* --- 18.12 Les deux blocs d abonnement en etroit -------------------------- */
/* Constat de Yorgos a 375 px. Deux defauts distincts, mesures :
     P.text-center          → text-align: center, largeur 257 px
     A.btn.btn-default      → inline-block, largeur 317 px DANS ce 257 px
   (a) LE CENTRAGE NE VIENT PAS DE NOUS. Le § 16 pose bien `text-align: left`
   sur le bloc — la mesure le confirme — mais le moteur enveloppe le contenu
   dans un <p class="text-center">, et une regle posee sur le PARENT ne peut
   rien contre une regle posee sur l ENFANT. Ce n est pas une question de
   specificite, c est une question de cible.
   (b) LE BOUTON DEBORDE DE SON PROPRE PARAGRAPHE — 317 px dans 257 — parce
   qu il est `inline-block` a sa largeur naturelle et que le § 2 lui pose
   `white-space: nowrap`. Il passe en bloc pleine largeur et redevient
   coupable en lignes.
   ⚠️ ON NE LE TRANSFORME PAS EN LIEN. Ce serait plus coherent avec le bloc
   jumeau, dont l action est un lien dans une phrase — mais ici l action est
   SEULE : en lien inline, sa cible tactile tomberait a ~19 px, sur un site
   qui porte un accord handicap signe. Il reste un bouton, donc 44 px.
   📌 L incoherence entre les deux blocs — un lien d un cote, un bouton de
   l autre — existe aussi en desktop. Elle n est pas de notre fait et elle
   n est pas tranchee : a verser a la recette du lot 13.                  */
@media (max-width: 767px){
  body.disp_single #skin_wrapper .evo_post_comment_notification .text-center,
  body.disp_single #skin_wrapper .evo_post_notification .text-center{
    text-align: left;
  }
  body.disp_single #skin_wrapper .evo_post_comment_notification .btn,
  body.disp_single #skin_wrapper .evo_post_comment_notification span > a,
  body.disp_single #skin_wrapper .evo_post_notification .btn{
    display: block;
    width: 100%;
    white-space: normal;
    text-align: center;
  }
}


/* --- 18.13 Les deux derniers ecarts a 375 px ------------------------------ */
/* (a) LE BADGE SORTAIT DE LA BOITE A CAUSE DU NOWRAP DE LA DATE. Le § 13.14
   pose `white-space: nowrap` sur la pastille : elle ne peut pas se couper,
   donc la colonne 1fr ne peut pas descendre sous sa largeur de contenu,
   donc la grille du § 18.9 deborde et pousse le badge hors du cadre.
   A 440 px ca tenait — a 375 non. La date redevient coupable en lignes.
   ⚠️ Le nowrap avait ete pose au lot 8 pour une PASTILLE, ou une coupure en
   deux lignes aurait ete laide. Le § 18.10 lui a retire son assiette : ce
   n est plus une pastille, c est du texte, et du texte se coupe. Quatrieme
   reglage devenu faux parce que son objet a change.

   (b) LES DEUX RUBRIQUES SONT SURTOUT VICTIMES DU PREFIXE [T]. Mesure sur
   capture a 375 px : 195 px + 108 px + gouttieres = 319 pour une colonne de
   299. Il manque 20 px — et CHAQUE prefixe « [T] » en coute 28. Au retrait
   des prefixes (ligne N-2 du runbook), elles tiendront sans rien changer.
   On les resserre quand meme : au corps mini et au rembourrage court, elles
   tiennent des aujourd hui, et resteront plus aerees apres le nettoyage.  */
@media (max-width: 767px){
  body.disp_single #skin_wrapper .sf_duree{
    white-space: normal;
    min-width: 0;
  }
  body.disp_single #skin_wrapper .sf_badges a{
    font-size: var(--t-mini);
    padding: 5px 10px 3px;
  }
}


/* =============================================================================
   19. LE FORMULAIRE DE COMMENTAIRE
   Pose le 30/08/2026. ⚠️ CETTE SECTION APPARTIENT AU LOT 8, PAS AU LOT 9 :
   elle ne porte aucune media query. Le § 16 avait habille le panneau, les
   titres et les blocs d abonnement — jamais le formulaire lui-meme. Le lot 9
   l a rendu visible en regardant cette zone pour la premiere fois.

   🔴 TOUTES LES REGLES SONT PORTEES PAR `.evo_form__comment`, JAMAIS PAR
   `.form-horizontal` SEUL. La meme classe sert au formulaire d inscription
   — refondu le 27/08, gabarits par traduction et plugin sf_registration —
   et au formulaire de contact. Une regle posee sur `.form-horizontal`
   casserait l entonnoir d inscription sans qu on s en apercoive ici.

   Mesures du 30/08, page article, pleine largeur :
     .control-label.col-sm-3      178 px
     .controls.col-sm-9           533 px
     .control-buttons             col-sm-offset-3, soit 25 % de decalage
     « Pas de resultats. »        TD.firstcol.lastcol, -apple-system 16px
   ============================================================================= */

/* --- 19.1 Le libelle passe au-dessus, l editeur reprend la largeur -------- */
/* Trois mots de libelle ne valent pas un quart de la largeur. En colonne, la
   zone de saisie perdait 178 px sur 711. Le libelle remonte, le champ prend
   tout — c est aussi la disposition qui tient en etroit sans une regle de
   plus.                                                                    */
#skin_wrapper .evo_form__comment .control-label{
  width: 100%;
  float: none;
  text-align: left;
  padding-left: 0;
  padding-right: 0;
  margin-bottom: var(--e-2);
}
#skin_wrapper .evo_form__comment .controls{
  width: 100%;
  float: none;
  padding-left: 0;
  padding-right: 0;
}
/* Le decalage de trois colonnes n a plus d objet une fois le libelle remonte :
   les boutons se calent sur le bord du champ, la ou l oeil les attend.     */
#skin_wrapper .evo_form__comment .control-buttons{
  width: 100%;
  float: none;
  margin-left: 0;
  padding-left: 0;
  padding-right: 0;
}

/* --- 19.2 La typographie des titres et des tableaux ----------------------- */
/* Le § 16 habille `.panel-title` ; le titre « Images & Pieces jointes » n en
   est pas un — le fond lilas s applique, la police non. On porte la police
   sur le `.panel-heading` lui-meme, quel que soit son enveloppe interne.   */
#skin_wrapper .evo_container__comment_area .panel-heading{
  font-family: var(--police-titre);
  font-size: var(--t-base);
  font-weight: var(--g-demi);
  color: var(--titre);
}
/* La liste de fichiers est un tableau du moteur : aucune regle ne l atteignait,
   d ou « Pas de resultats. » en pile systeme a 16 px au milieu de la charte. */
#skin_wrapper .evo_container__comment_area table{
  font-family: var(--police-texte);
  font-size: var(--t-petit);
  color: var(--gris-9);
}


/* =============================================================================
   20. LES PAGES CONNEXES — connexion, inscription, mot de passe perdu
   Posé le 31/08/2026, lot 21.

   ⚠️ PORTÉE : ces règles sont bornées aux enveloppes `.evo_panel__*` que le
   moteur pose sur ces pages, et JAMAIS écrites sur `.panel` ou `.control-label`
   nus. Ce balisage est le même que celui de la zone de commentaires, habillée
   aux sections 16 et 19 et déjà recettée : une règle non bornée y déborderait.
   📌 La 20.1 fait exception, et c'est voulu — un titre qui prend la couleur des
   liens est un défaut général, pas une particularité de ces pages.
   📌 Le formulaire de CONTACT n'est pas ici : il est chargé en AJAX, son
   balisage n'existe pas dans le HTML servi. Il aura son relevé et sa passe.
   ============================================================================= */

/* 20.1 — Le lien du titre de collection.
   Mesuré : le <h1> sort bien en marine, mais le <a> qu'il contient rend
   #337ab7 — le bleu de Bootstrap. Aucune règle ne le visait, et la couleur de
   lien du réglage de skin reprenait la main. Un titre garde sa couleur.       */
#skin_wrapper .widget_core_coll_title h1 a{ color: inherit; }
#skin_wrapper .widget_core_coll_title h1 a:hover,
#skin_wrapper .widget_core_coll_title h1 a:focus{ color: var(--orange); }

/* 20.2 — Les panneaux.
   Mesuré : en-tête #f5f5f5, le gris de Bootstrap, alors que le réglage de skin
   `panel_heading_bg_color` vaut #EEEFFE — il n'atteint pas ces pages. Et le
   corps rend #333 / 14px là où la charte dit --gris-9 / --t-base.            */
#skin_wrapper .evo_panel__login .panel,
#skin_wrapper .evo_panel__register .panel,
#skin_wrapper .evo_panel__lostpass .panel{
  border-color: var(--gris-2);
  border-radius: var(--r-carte);
  color: var(--gris-9);
  font-size: var(--t-base);
}
#skin_wrapper .evo_panel__login .panel-heading,
#skin_wrapper .evo_panel__register .panel-heading,
#skin_wrapper .evo_panel__lostpass .panel-heading{
  background-color: var(--lilas-pale);
  border-bottom-color: var(--gris-2);
}

/* 20.3 — Les libellés de formulaire, à la charte plutôt qu'au Bootstrap.     */
#skin_wrapper .evo_panel__login .control-label,
#skin_wrapper .evo_panel__register .control-label,
#skin_wrapper .evo_panel__lostpass .control-label{
  color: var(--gris-9);
  font-size: var(--t-base);
}

/* 20.4 — UN SEUL VERMILLON PAR PAGE.
   Sur la page de connexion, « Se connecter! » est un .btn-success et
   « S'inscrire » un .btn-primary : la section 2 repeint les deux en vermillon,
   et deux appels à l'action de même poids côte à côte n'en font plus aucun.
   Le second passe en secondaire — même traitement que .btn-default, mais posé
   ici parce que ces pages n'emploient pas cette classe.
   ⚠️ Ne pas généraliser : le vermillon reste l'accent unique de la charte, et
   c'est « Adhérer » qui le porte dans le bandeau.                            */
#skin_wrapper .evo_panel__login a.btn-primary{
  background-color: var(--surface);
  background-image: none;
  border: var(--trait-fort);
  color: var(--titre);
}
#skin_wrapper .evo_panel__login a.btn-primary:hover,
#skin_wrapper .evo_panel__login a.btn-primary:focus{
  border-color: var(--marine);
  color: var(--titre);
}

/* =============================================================================
   22. PIED COLLANT — lot 21, groupe C, 31/08/2026
   Constat : sur arcdir, catdir et tags, le contenu ne remplit pas la fenetre et
   le bandeau sombre flotte au milieu de l ecran, avec du blanc dessous. Sur
   posts et msgform le defaut ne se voyait pas : le contenu etait assez haut.
   Le bandeau sombre est `footer.row`, A L INTERIEUR de `.container` — verifie
   sur l emboitement du 31/08 — et `#evo_site_footer:empty` (§ 5) escamote le
   vrai pied de site. On ne peut donc pas coller le pied au niveau du wrapper
   seul : il faut relayer la hauteur jusqu au conteneur.
   Trois regles : le wrapper occupe la fenetre entiere, le conteneur herite de
   ce qui reste, et seule la rangee de contenu s etire — `header.row` et
   `footer.row` gardent leur hauteur propre, d ou le selecteur `div.row` qui
   les exclut par leur nom de balise.
   ============================================================================= */
#skin_wrapper{
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
#skin_wrapper > .container{
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
}
#skin_wrapper > .container > div.row{
  flex: 1 0 auto;
}

/* --- 20.5 — MEME REGLE, AUTRE ENVELOPPE -----------------------------------
   Le paragraphe 20.4 pose « un seul vermillon par page » sur .evo_panel__login.
   La page de connexion REQUISE — disp=access_requires_login, celle ou atterrit
   un visiteur qui clique sur un lien reserve — n a PAS cette classe : son
   enveloppe est .evo_container__login_required, et son formulaire vient du
   widget user_login, dont les parametres portent
       login_button_class  = btn btn-success btn-lg
       register_link_class = btn btn-primary btn-lg pull-right
   La section 2 repeint les deux en vermillon. Sans la regle ci-dessous, deux
   appels a l action de meme poids se neutralisent — exactement le defaut que le
   20.4 corrige ailleurs. Le lien d inscription passe donc en secondaire, et
   « Se connecter! » garde le vermillon.
   Balises verifiees le 31/08/2026 : le lien est un <a>, le bouton un <input>.
   ------------------------------------------------------------------------- */
#skin_wrapper .evo_container__login_required a.btn-primary{
  background-color: var(--surface);
  background-image: none;
  border: var(--trait-fort);
  color: var(--titre);
}
#skin_wrapper .evo_container__login_required a.btn-primary:hover,
#skin_wrapper .evo_container__login_required a.btn-primary:focus{
  border-color: var(--marine);
  color: var(--titre);
}

/* --- 22 bis. Le conteneur sous 768 px — correctif du 02/09 ------------------ */
/* Le § 22 met #skin_wrapper en flex colonne pour le pied collant. Or .container
   porte `margin: 0 auto` (Bootstrap) : des marges auto sur l axe transversal
   ANNULENT l etirement d un item flex, qui retombe alors sur sa largeur de
   contenu — 958 px mesures a 375 px le 02/09, la rangee de chips bout a bout.
   Tout ce qui est dedans suivait, coupe par les deux clips. Au-dessus de
   768 px Bootstrap fixe .container en dur (750/970/1170), rien a faire.     */
@media (max-width: 767px){
  #skin_wrapper > .container{
    width: 100%;
  }
}

/* =============================================================================
   23. NUIT — theme sombre, actif UNIQUEMENT sous html.nuit (pose par le skin
   pour le compte yorgos). Jetons derives de la table de Leonie (06/09) :
   inversion symetrique autour de 500, aplats marine/vermillon conserves,
   mascottes et logo exemptes. Version d'essai, avant son arbitrage.
   ============================================================================= */
html.nuit{ color-scheme: dark; }
html.nuit{
  --surface:     #1D1D22;   /* Gris 100 -> 900 */
  --gris-9:      #EFEFEF;   /* texte courant : 900 -> 100 */
  --gris-6:      #A1A1A7;   /* texte secondaire : 600 -> 400 */
  --gris-2:      #4D4D57;   /* bordures : 300 -> 700 */
  --gris-1:      #34343B;   /* pastilles, separateurs : 200 -> 800 */
  --titre:       #ADB8FF;   /* marine texte -> Bleu 100 */
  --marine-txt:  #ADB8FF;
  --lilas-pale:  #000337;   /* lilas de fond -> 900 */
  --lavande:     #000B70;   /* lavande -> 700 */
  --lavande-txt: #C6C8FC;   /* texte sur marine : reste lilas */
  --orange-txt:  #FD8580;   /* vermillon texte : 700 -> 300 */
  --orange-pale: #640D03;   /* survol pale : 200 -> 800 */
  --ombre-carte: 0 8px 24px rgba(0,0,0,.55);
}
/* Ce que #evo_skin_styles et Bootstrap posent en blanc apres cette feuille. */
html.nuit, html.nuit body{ background-color: var(--surface); } /* body est blanc chez Bootstrap : visible sur les 27 px de la barre d'outils */
html.nuit #skin_wrapper{ background-color: var(--surface); color: var(--gris-9); }
html.nuit a{ color: var(--titre); }
html.nuit a:hover{ color: var(--orange-txt); }
html.nuit h4.panel-title a, html.nuit h4.evo_comment_title a{ color: var(--titre); }
html.nuit .panel, html.nuit .pagination>li>a, html.nuit .well, html.nuit .dropdown-menu,
html.nuit .modal-content, html.nuit .list-group-item, html.nuit .popover{
  background-color: var(--surface); color: var(--gris-9); border-color: var(--gris-2);
}
html.nuit .panel-default, html.nuit .panel .panel-heading, html.nuit .panel .panel-footer,
html.nuit .nav-tabs, html.nuit .table, html.nuit .table th, html.nuit .table td,
html.nuit .pagination li a, html.nuit .pagination li span{ border-color: var(--gris-2); }
html.nuit .panel .panel-heading{ background-color: var(--lilas-pale); }
html.nuit ul.nav.nav-tabs li a.selected{ background-color: var(--surface); color: var(--gris-9); }
html.nuit ul.nav.nav-tabs li a.default:hover{ background-color: var(--gris-1); border-color: var(--gris-1); }
html.nuit #skin_wrapper .form-control, html.nuit #skin_wrapper textarea, html.nuit #skin_wrapper select{
  background-color: var(--surface); color: var(--gris-9); border-color: var(--gris-2);
}
html.nuit #skin_wrapper .form-control::placeholder{ color: var(--gris-6); }
html.nuit #skin_wrapper .btn-default{ background-color: var(--gris-1); color: var(--gris-9); border-color: var(--gris-2); }
html.nuit img.avatar, html.nuit .evo_image_block img{ opacity: .92; }

/* 23.1 — Mobile connecte : b2evolution met sa barre d'outils DANS LE FLUX sous 1024 px
   (div#evo_toolbar position:relative) et ajoute 27 px de marge au wrapper ; la charte
   decale encore l'en-tete de 27 px (18.x, ligne ~283). Trois empilements pour une
   barre qui n'a plus de libelles a cette largeur. Sous html.nuit seulement, pour mesure. */
@media (max-width: 767px){
  html.nuit div#evo_toolbar{ display: none; }
  html.nuit body.evo_toolbar_visible #evo_site_header{ top: 0; }
  html.nuit div#skin_wrapper.skin_wrapper_loggedin{ margin-top: 0; padding-top: 0; }
}