/**
 * Élections professionnelles 2026 — styles dédiés.
 *
 * Feuille séparée volontairement : style.scss est tronqué à 65 536 octets sur
 * ce site (il se termine au milieu d'une déclaration et ne compile plus), et
 * style.css a été édité à la main depuis. Recompiler le SCSS détruirait une
 * partie du CSS du site. On n'y touche donc pas et on ajoute ici.
 *
 * Les classes .elections-* produites par les shortcodes sont volontairement
 * conservées à l'identique entre 2022 et 2026 : le CSS est de la présentation,
 * pas de la donnée, et le dupliquer représenterait ~600 lignes à maintenir en
 * double sans bénéfice. Ce fichier ne contient que ce qui est propre à 2026.
 *
 * Chargé par functions.php uniquement sur les templates template-elec26-*.php.
 */

/* ======================================================================
   1. Accessibilité — titre de page masqué visuellement
   ====================================================================== */
/* .screen-reader-text n'est pas garantie sur ces pages (elle vient de
   wp-block-library, qui n'est pas toujours chargée) : on définit la nôtre. */

.elec26-visually-hidden {
   position: absolute !important;
   width: 1px;
   height: 1px;
   padding: 0;
   margin: -1px;
   overflow: hidden;
   clip: rect(0, 0, 0, 0);
   white-space: nowrap;
   border: 0;
}

/* ======================================================================
   2. Barre de navigation de page — le tampon
   ====================================================================== */
/*
 * Le tampon (876 × 292, ratio 3:1) réunit le macaron « Je vote F.S.U. » et la
 * barre de dates. Il porte donc à lui seul l'information que le texte de repli
 * affichait ; ce texte n'est plus rendu, voir elec26_nav().
 *
 * CONTRAINTE : .elections-nav-container fait 140px de haut avec
 * overflow:hidden. À 320px de large le tampon occupe 107px : il tient
 * largement. Y rajouter le slogan sur deux lignes (~48px + gouttière)
 * porterait la colonne à 154px et le bas serait rogné sans avertissement —
 * c'est pourquoi elec26_nav() ne rend plus le slogan quand ELEC26_NAV_ICON
 * est défini. Toute réintroduction de texte ici doit repasser ce calcul.
 */

body[class*="page-template-template-elec26-"] .elections-main-nav .nav-max-content {
   flex-direction: column;
   align-items: flex-start;
   justify-content: center;
   gap: 6px;
   height: 140px;
   padding: 0;
}

body[class*="page-template-template-elec26-"] .elections-main-nav .nav-img {
   height: auto;
}

body[class*="page-template-template-elec26-"] .elections-main-nav .nav-img img {
   display: block;
   width: 320px;
   max-width: 100%;
   height: auto;
   margin-top: 0;
}

/* État réduit (barre sticky) : le tampon seul, plus petit. */
body[class*="page-template-template-elec26-"] .elections-main-nav.minified .nav-min-content {
   padding: 14px 0;
}

body[class*="page-template-template-elec26-"] .elections-main-nav.minified .nav-min-content img {
   display: block;
   width: 230px;
   height: auto;
}

/* Le slogan n'est plus rendu tant que le tampon est en place : il ferait
   deborder la colonne des 140px disponibles. Les regles restent ci-dessous,
   utiles si l'on revenait a une nav sans visuel. */

body[class*="page-template-template-elec26-"] .elections-main-nav .nav-title {
   margin-left: 0;
   font-size: 15px;
   line-height: 1.2;
}

body[class*="page-template-template-elec26-"] .elections-main-nav .nav-title span {
   padding: 3px 8px;
}

body[class*="page-template-template-elec26-"] .elections-main-nav .nav-title .title-green {
   margin-left: 1.5rem;
   margin-top: 4px;
}

/* Sous 992px le thème masque .nav-max-content et force l'affichage de
   .nav-min-content (style.css, @media max-width: 992px) : c'est donc l'image
   de l'état réduit qui s'affiche, même hors du mode sticky.

   Les anciennes règles à 767 et 480px visaient .nav-img img, c'est-à-dire
   l'image de l'état déployé — masquée à ces largeurs. Elles ne s'appliquaient
   jamais, et l'image réduite, qui n'avait de largeur qu'en mode sticky,
   s'affichait à sa taille par défaut : trop petite pour lire
   « ÉLECTIONS PRO ».

   Le mode sticky garde ses 230px : la règle .minified plus haut est plus
   spécifique que celle-ci. */
@media (max-width: 992px) {
   body[class*="page-template-template-elec26-"] .elections-main-nav .nav-min-content img {
      display: block;
      width: 300px;
      max-width: 100%;
      height: auto;
   }
}

/* ======================================================================
   3. Ancres et barre sticky
   ====================================================================== */
/* .elections-nav-container.minified est en position:sticky à 80px du haut
   (112px avec la barre d'admin). Sans compensation, toute cible d'ancre
   arrive sous la barre rose. Hauteur de la barre réduite ≈ 56px.           */

body[class*="page-template-template-elec26-"] :target,
body[class*="page-template-template-elec26-"] .elementor-section,
body[class*="page-template-template-elec26-"] .elementor-widget-heading h2,
body[class*="page-template-template-elec26-"] .elementor-widget-heading h3,
body[class*="page-template-template-elec26-"] .elementor-widget-heading h4,
body[class*="page-template-template-elec26-"] .elections-news h2 {
   scroll-margin-top: 152px;
}

body.logged-in.admin-bar[class*="page-template-template-elec26-"] :target,
body.logged-in.admin-bar[class*="page-template-template-elec26-"] .elementor-section,
body.logged-in.admin-bar[class*="page-template-template-elec26-"] .elementor-widget-heading h2,
body.logged-in.admin-bar[class*="page-template-template-elec26-"] .elementor-widget-heading h3,
body.logged-in.admin-bar[class*="page-template-template-elec26-"] .elementor-widget-heading h4,
body.logged-in.admin-bar[class*="page-template-template-elec26-"] .elections-news h2 {
   scroll-margin-top: 184px;
}

/* ======================================================================
   4. Bloc « L'actu de la campagne »
   ====================================================================== */

body[class*="page-template-template-elec26-"] .elections-news .block-title h2 {
   font-family: "Archivo Black", Arial, sans-serif;
   font-size: 24px;
   margin: 20px 0;
}

.elections-news-empty {
   border: 1px dashed #dee2e6;
   border-radius: 4px;
   padding: 24px;
   color: #868e96;
   background: #f8f9fa;
}

.elections-news-empty p {
   margin: 0;
}

.elections-news-empty .elections-news-empty-hint {
   margin-top: 12px;
   font-size: 13px;
   color: #adb5bd;
}

.elections-news-empty .elections-news-empty-hint code {
   background: #eceef0;
   padding: 1px 5px;
   border-radius: 3px;
}

/* ======================================================================
   5. Hero pleine largeur
   ====================================================================== */
/* Visuel desktop 2000 × 750 (ratio 2,67:1) et variante mobile 750 × 500,
   chacune masquée sur l'autre breakpoint par les réglages Elementor.       */

body.page-template-template-elec26-home .elementor-section:first-of-type .elementor-widget-image img {
   display: block;
   width: 100%;
   height: auto;
   max-width: none;
}

body.page-template-template-elec26-home .elementor-section:first-of-type .elementor-widget-image .elementor-widget-container {
   line-height: 0;
}

/* ======================================================================
   6. Grille « Voter FSU c'est agir pour »
   ====================================================================== */
/* Trois cartes de hauteur égale, bouton aligné en bas de chaque carte. */

/* ATTENTION a la portee : l'accroche « Du 3 au 10 decembre 2026 » vit elle
   aussi dans une section interne. Cibler .elementor-inner-section sans plus
   de precision lui imposait flex-direction: column, ce qui empilait ses deux
   boutons alors qu'ils doivent etre cote a cote. On restreint donc aux
   colonnes des cartes. L'accroche, elle, est decoupee en deux moities (col-50)
   depuis l'ajout du tampon : elle n'est plus concernee. Voir 6 bis. */

body.page-template-template-elec26-home .elementor-inner-section .elementor-col-33 {
   display: flex;
}

body.page-template-template-elec26-home .elementor-inner-section .elementor-col-33 > .elementor-widget-wrap {
   display: flex;
   flex-direction: column;
   align-content: flex-start;
   /* flex: 1 et non width: 100% — les marges ci-dessous doivent etre deduites
      de la largeur, sinon la carte deborde de sa colonne. */
   flex: 1;
   margin: 0 12px;
}

/* Gouttiere entre les cartes.
   Elle etait portee par le padding de colonne d'Elementor (gap: extended),
   que le padding pose sur les colonnes (30/25) a remplace : l'encadre
   occupait donc toute la largeur et les trois bordures se touchaient.
   On la remet en marge, a l'exterieur de la bordure. Les bords exterieurs
   restent affleurants, pour rester alignes sur le reste de la page. */
body.page-template-template-elec26-home .elementor-inner-section .elementor-col-33:first-child > .elementor-widget-wrap {
   margin-left: 0;
}

body.page-template-template-elec26-home .elementor-inner-section .elementor-col-33:last-child > .elementor-widget-wrap {
   margin-right: 0;
}

body.page-template-template-elec26-home .elementor-inner-section .elementor-col-33 .elementor-widget-button {
   margin-top: auto;
}

/* Le theme impose border-radius: 0 a tous les boutons Elementor. Depuis que
   les cartes ont des coins arrondis, un bouton a angles vifs a l'interieur
   jure. On ne corrige que ces trois-la. */
body.page-template-template-elec26-home .elementor-inner-section .elementor-col-33 .elementor-button {
   border-radius: 4px;
}

/* ======================================================================
   6 bis. Accroche : bandeau rouge, texte, tampon
   ====================================================================== */
/* Mise en page :
 *   - le bandeau rouge (le titre) occupe seul sa section, pleine largeur ;
 *   - dessous, deux moities : texte + boutons a gauche, tampon a droite.
 *
 * Alignements : la colonne de texte reprend le padding gauche de 30px du
 * bandeau, les deux blocs partagent donc la meme verticale a gauche. A droite,
 * la colonne du tampon n'a pas de padding et le tampon est cale a droite : son
 * bord affleure celui du bandeau rouge.
 */

/* Le titre : le fond rouge doit courir sur toute la largeur de sa colonne.
   Elementor rend le h2 en inline-block dans certains themes ; on force le bloc
   pour que l'aplat ne s'arrete pas a la fin du texte. */
body.page-template-template-elec26-home .elementor-element-e260005 .elementor-heading-title {
   display: block;
}

/* Le chapo : sa derniere ligne portait la marge basse du <p> du theme, qui
   s'ajoutait a la gouttiere Elementor et creusait un trou avant les boutons. */
body.page-template-template-elec26-home .elec26-accroche-txt p:last-child {
   margin-bottom: 0;
}

/* Les deux boutons : meme ligne, meme hauteur, memes bords hauts.
   Sans align-self, la gouttiere verticale d'Elementor les etirait
   differemment et le bouton bleu remontait par rapport au vert. */
body.page-template-template-elec26-home .elec26-accroche-btn {
   align-self: flex-start;
}

body.page-template-template-elec26-home .elec26-accroche-btn .elementor-button {
   display: inline-flex;
   align-items: center;
   min-height: 44px;
   padding: 10px 22px;
}

/* Le tampon : cale a droite, a la meme hauteur que le texte (le centrage
   vertical est porte par la section, content_position: middle).
   876 × 292, ratio 3:1 — a 380px il fait 127px de haut, soit a peu pres la
   hauteur du chapo + des boutons. */
body.page-template-template-elec26-home .elec26-tampon {
   text-align: right;
}

body.page-template-template-elec26-home .elec26-tampon img {
   display: inline-block;
   width: 100%;
   max-width: 380px;
   height: auto;
}

@media (max-width: 767px) {
   /* Marges latérales symétriques.
      En desktop, le bandeau rouge et le texte partent à 30px du bord gauche
      et le bandeau court jusqu'au bord droit : en regard du tampon, c'est
      voulu. Une fois les colonnes empilées, il ne reste que l'asymétrie —
      le bandeau semblait coupé à droite. On aligne tout à 15px des deux
      côtés.

      Les colonnes sont visées par leur identifiant Elementor : leur padding
      est écrit par Elementor avec cette même précision, il faut la même
      pour le remplacer. */
   body.page-template-template-elec26-home .elementor-element.elementor-element-e260009 > .elementor-element-populated,
   body.page-template-template-elec26-home .elementor-element.elementor-element-e26t011 > .elementor-element-populated,
   body.page-template-template-elec26-home .elementor-element.elementor-element-e26t001 > .elementor-element-populated {
      padding-left: 15px;
      padding-right: 15px;
   }

   /* Le titre à 31px tenait sur trois lignes et remplissait l'écran. */
   body.page-template-template-elec26-home .elementor-element.elementor-element-e260005 .elementor-heading-title {
      font-size: 24px;
   }

   /* Les colonnes s'empilent : le tampon passe sous les boutons, centre. */
   body.page-template-template-elec26-home .elec26-tampon {
      margin-top: 22px;
      text-align: center;
   }

   body.page-template-template-elec26-home .elec26-tampon img {
      max-width: 300px;
   }
}

/* ======================================================================
   7. Reprise des règles scopées sur le template 2022
   ====================================================================== */

body[class*="page-template-template-elec26-"] .elections-page-content-container {
   padding-right: 30px;
}

/* Ces 30px separaient le contenu de la colonne laterale. En pleine largeur il
   n'y a plus rien a en separer, et ils decaleraient le texte vers la gauche. */
body[class*="page-template-template-elec26-"] .col-12.elections-page-content-container {
   padding-right: 0;
}

body.page-template-template-elec26-events .page-elections-insc-mail,
body.page-template-template-elec26-instances .page-elections-insc-mail,
body.page-template-template-elec26-page .page-elections-insc-mail {
   background: #f19226;
}

body.page-template-template-elec26-events .page-elections-insc-mail .newsletter-elections-pro,
body.page-template-template-elec26-instances .page-elections-insc-mail .newsletter-elections-pro,
body.page-template-template-elec26-page .page-elections-insc-mail .newsletter-elections-pro {
   width: 100%;
   max-width: 1200px;
   margin: 0 auto;
}

body.page-template-template-elec26-mon-vote .block-videos {
   padding-top: 20px;
   padding-bottom: 20px;
}

/* ======================================================================
   8. Mobile
   ====================================================================== */
/* Les regles de l'ancien repli texte de la nav (.elec26-nav-baseline) ont ete
   retirees : depuis la fourniture du tampon, elec26_nav() rend l'image et non
   plus du texte. Le repli reste dans le code, inactif tant que les constantes
   ELEC26_NAV_ICON* sont renseignees.                                        */

@media (max-width: 767px) {
   /* Cartes empilées : la gouttière horizontale n'a plus de sens et
      décalerait chaque carte de 12px par rapport au reste de la page.
      L'écart repasse en vertical. */
   body.page-template-template-elec26-home .elementor-inner-section .elementor-col-33 > .elementor-widget-wrap {
      margin-left: 0;
      margin-right: 0;
   }

   body.page-template-template-elec26-home .elementor-inner-section > .elementor-container > .elementor-col-33 {
      margin-bottom: 16px;
   }

   /* Nav de page : le tampon passe au-dessus du menu à 4 entrées. */
   body[class*="page-template-template-elec26-"] .elections-main-nav {
      flex-direction: column;
      align-items: flex-start;
   }

   body[class*="page-template-template-elec26-"] .elections-main-nav .nav-max-content {
      flex-direction: column;
      align-items: flex-start;
      gap: 6px;
      height: auto;
      padding: 10px 0;
   }

   /* La barre sticky est plus haute en mobile : on desserre les ancres. */
   body[class*="page-template-template-elec26-"] :target,
   body[class*="page-template-template-elec26-"] .elementor-section,
   body[class*="page-template-template-elec26-"] .elementor-widget-heading h2,
   body[class*="page-template-template-elec26-"] .elementor-widget-heading h3,
   body[class*="page-template-template-elec26-"] .elementor-widget-heading h4,
   body[class*="page-template-template-elec26-"] .elections-news h2 {
      scroll-margin-top: 200px;
   }
}

/* ======================================================================
   9. Notes éditoriales — [elec26_note]
   ====================================================================== */
/* Encadrés visibles seulement par la rédaction connectée : ils portent les
   points à reconfirmer ou à compléter avant validation par le secteur.
   Voir elec26_note() dans inc/elections-2026.php.                         */

.elec26-note {
   display: block;
   position: relative;
   margin: 20px 0;
   padding: 16px 18px 12px;
   border-left: 4px solid #f39200;
   border-radius: 0 4px 4px 0;
   background: #fff8ee;
   color: #6b5636;
   font-size: 15px;
}

.elec26-note--manquant {
   border-left-color: #e40045;
   background: #fdeef3;
   color: #7a3346;
}

.elec26-note-label {
   display: inline-block;
   margin-bottom: 6px;
   font-family: "Archivo Black", Arial, sans-serif;
   font-size: 11px;
   letter-spacing: 0.06em;
   text-transform: uppercase;
   color: #f39200;
}

.elec26-note--manquant .elec26-note-label {
   color: #e40045;
}

.elec26-note-body p {
   margin: 0 0 8px;
}

.elec26-note-body p:last-child {
   margin-bottom: 0;
}

.elec26-note-foot {
   display: block;
   margin-top: 10px;
   font-size: 12px;
   opacity: 0.7;
}

/* ======================================================================
   10. Pages filles — mise en page du contenu rédigé
   ====================================================================== */

body[class*="page-template-template-elec26-"] .page-content h2 {
   font-family: "Archivo Black", Arial, sans-serif;
   font-size: 24px;
   margin: 36px 0 14px;
   color: #212529;
}

body[class*="page-template-template-elec26-"] .page-content h3 {
   font-family: "Archivo Black", Arial, sans-serif;
   font-size: 18px;
   margin: 26px 0 8px;
   color: #1469ad;
}

body[class*="page-template-template-elec26-"] .page-content .elec26-chapo {
   font-size: 18px;
   line-height: 1.5;
   color: #495057;
   border-left: 4px solid #e40045;
   padding-left: 16px;
   margin: 0 0 28px;
}

body[class*="page-template-template-elec26-"] .page-content .elec26-appel {
   margin: 32px 0;
   padding: 20px 24px;
   background: #f1f3f5;
   border-radius: 4px;
   font-family: "Archivo Black", Arial, sans-serif;
   font-size: 19px;
   color: #212529;
}

body[class*="page-template-template-elec26-"] .page-content .elec26-actions {
   display: flex;
   flex-wrap: wrap;
   gap: 12px;
   margin: 24px 0 8px;
}

body[class*="page-template-template-elec26-"] .page-content .elec26-faq h3 {
   color: #212529;
   margin-top: 22px;
}

body[class*="page-template-template-elec26-"] .page-content .elec26-etape {
   margin: 22px 0;
   padding-left: 18px;
   border-left: 3px solid #21a257;
}

body.page-template-template-elec26-page .page-content .elec26-etape h3 {
   color: #21a257;
   margin-top: 0;
}

/* ======================================================================
   11. Page « Listes et professions de foi » — largeur de contenu
   ====================================================================== */
/* Le template Mon vote rend directement post_content, sans le conteneur
   centré que fournissait Elementor sur la page 2022 équivalente. Résultat :
   sur un viewport de 1920, le titre, le chapô, le bloc de listes et l'encadré
   de note partaient du bord gauche (x=0, w=1905) au lieu de s'aligner sur la
   nav de page (x=353, w=1200).
   On applique donc à tous les enfants directs de .page-content la même
   contrainte que .elections-container.
   Exception : .elections-mon-vote-container garde son fond bleu en pleine
   largeur, son contenu interne étant déjà centré par sa propre
   .elections-mon-vote-content.elections-container.                        */

body.page-template-template-elec26-mon-vote .page-content > * {
   max-width: 1200px;
   margin-left: auto;
   margin-right: auto;
}

body.page-template-template-elec26-mon-vote .page-content > .elections-mon-vote-container {
   max-width: none;
   margin-left: 0;
   margin-right: 0;
}

/* ======================================================================
   12. Boutons d'accroche sur une seule ligne
   ====================================================================== */
/* Les deux boutons « Pourquoi voter ? » et « Comment voter ? » portent
   _element_width = auto côté Elementor, ce qui suffit à les mettre côte à
   côte. On ne règle ici que la gouttière et le repli en mobile.          */

body.page-template-template-elec26-home .elementor-widget-button.elementor-widget__width-auto {
   margin-right: 12px;
}

@media (max-width: 767px) {
   /* Côte à côte tant qu'ils tiennent, empilés avec un écart sinon.

      Ils se touchaient une fois empilés : Elementor annule la marge basse
      des widgets à largeur automatique (margin-block-end: 0 sur
      .elementor-widget__width-auto), et l'ancienne règle de repli ne
      prévoyait aucun écart vertical. Deux cibles tactiles collées, c'est
      aussi un défaut d'accessibilité, pas seulement d'aspect.

      Texte un peu resserré (14px, padding réduit) pour que la paire tienne
      sur une ligne dès 360px d'écran ; en dessous, flex-wrap les empile et
      la marge basse garde l'écart. Chacun prend la moitié de la ligne, ou
      toute la ligne une fois seul : mêmes largeurs, bords alignés. */
   /* column-gap et non une marge droite : il ne joue qu'entre deux éléments
      d'une même ligne. Une marge droite sur le premier bouton le laisserait
      plus étroit que le second une fois les deux empilés. */
   body.page-template-template-elec26-home .elementor-element.elementor-element-e26t011 > .elementor-widget-wrap {
      column-gap: 10px;
   }

   body.page-template-template-elec26-home .elementor-element.elec26-accroche-btn {
      flex: 1 1 140px;
      margin: 0 0 10px 0;
   }

   body.page-template-template-elec26-home .elec26-accroche-btn .elementor-button {
      width: 100%;
      justify-content: center;
      padding: 10px 12px;
      font-size: 14px;
   }
}

/* ======================================================================
   Élections 2026 — repli sur les instances
   ====================================================================== */
/* Quand aucune liste ne correspond au couple métier / académie, le bloc
   « Mon vote » présente les instances. Les cartes réutilisent .item-list,
   déjà stylée (en-tête orange). On ajuste seulement l'intro et le cas où
   l'instance n'a pas encore de description.                              */

.elections-mon-vote .item-list .list-content:empty {
   display: none;
}

/* Pas de souligne sur les cartes d'instance. Le titre et le lien
   « Qu'est ce que c'est ? » sont deja identifiables : gros, gras, blancs sur
   un aplat orange, et la carte entiere se lit comme un bloc cliquable.

   Meme specificite que la regle du theme qu'elle annule
   (.elections-mon-vote .block-content .item-list .list-title .title-infos a,
   soit cinq classes et un element) : cette feuille est chargee apres
   style.css, c'est donc l'ordre de cascade qui tranche.

   Le souligne revient au survol et au focus clavier : sans lui, plus rien
   ne distingue un lien d'un intitule pour qui navigue au clavier. */
.elections-mon-vote .block-content .item-list .list-title h5 a,
.elections-mon-vote .block-content .item-list .list-title .title-infos a {
   text-decoration: none;
}

.elections-mon-vote .block-content .item-list .list-title h5 a:hover,
.elections-mon-vote .block-content .item-list .list-title h5 a:focus-visible,
.elections-mon-vote .block-content .item-list .list-title .title-infos a:hover,
.elections-mon-vote .block-content .item-list .list-title .title-infos a:focus-visible {
   text-decoration: underline;
}

/* ======================================================================
   Page « Mon vote » — colonne latérale
   ====================================================================== */
/* Reprise de la structure 2022 : sélecteur pleine largeur au-dessus, puis
   listes à gauche (col-8) et colonne latérale à droite (col-4).          */

body.page-template-template-elec26-mon-vote .elections-page-content-container {
   padding-right: 30px;
}

body.page-template-template-elec26-mon-vote .elec26-sidebar-bloc {
   margin: 18px 0;
}

body.page-template-template-elec26-mon-vote .elec26-sidebar-bloc h3 {
   font-family: "Archivo Black", Arial, sans-serif;
   font-size: 18px;
   margin: 0 0 10px;
   color: #212529;
}

body.page-template-template-elec26-mon-vote .elec26-sidebar-bloc p {
   font-size: 15px;
   line-height: 1.5;
   margin: 0 0 10px;
}

body.page-template-template-elec26-mon-vote .elec26-sidebar-bloc a {
   color: #1469ad;
   font-weight: 600;
}

@media (max-width: 767px) {
   body.page-template-template-elec26-mon-vote .elections-page-content-container {
      padding-right: 0;
   }
}

/* ======================================================================
   Instances — fiche et liste
   ====================================================================== */
/* Les deux vues reprennent l'habillage des pages de l'espace. Seul ce lien
   de retour leur est propre. */

.elec26-retour-instances {
   margin: 28px 0 0;
   font-size: 15px;
}

.elec26-retour-instances a {
   font-family: "Archivo Black", Arial, sans-serif;
   color: #1469ad;
}

/* ======================================================================
   Selecteur de profil — [elec26_profil]
   ====================================================================== */
/* Habillage volontairement sobre : la maquette de la page bilan n'est pas
   arretee, ces regles donnent une mise en page correcte sans prejuger du
   design final. */

.elec26-profil {
   margin: 32px 0;
}

.elec26-profil-form {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: 12px;
   padding: 18px 20px;
   background: #1469ad;
   border-radius: 4px;
}

.elec26-profil-titre {
   margin: 0;
   font-family: "Archivo Black", Arial, sans-serif;
   font-size: 20px;
   color: #fff;
}

.elec26-profil-titre span {
   font-family: "Archivo", Arial, sans-serif;
   font-weight: normal;
}

.elec26-profil-champs {
   display: flex;
   flex-wrap: wrap;
   gap: 10px;
   flex: 1 1 auto;
}

.elec26-profil-champs select {
   flex: 1 1 200px;
   max-width: 320px;
   padding: 10px 12px;
   font-size: 16px;
   line-height: 1.3;
   color: #212529;
   background: #fff;
   border: 0;
   border-radius: 3px;
}

.elec26-profil-valider {
   padding: 10px 20px;
   font-family: "Archivo Black", Arial, sans-serif;
   font-size: 15px;
   color: #1469ad;
   background: #fff;
   border: 0;
   border-radius: 3px;
   cursor: pointer;
}

.elec26-profil-champs select:focus-visible,
.elec26-profil-valider:focus-visible {
   outline: 3px solid #f39200;
   outline-offset: 2px;
}

.elec26-profil-contenu {
   padding: 22px 24px;
   background: #e8f1f9;
}

.elec26-profil-invite,
.elec26-profil-vide {
   margin: 0;
   padding: 18px 24px;
   background: #f1f3f5;
   color: #495057;
}

@media (max-width: 767px) {
   .elec26-profil-form {
      flex-direction: column;
      align-items: stretch;
   }

   .elec26-profil-champs select,
   .elec26-profil-valider {
      flex-basis: 100%;
      max-width: none;
      width: 100%;
   }
}

/* ======================================================================
   Actualites de l'espace — article et archive de categorie
   ====================================================================== */
/* Les deux vues reprennent l'habillage des pages ; seules les quelques
   regles propres a une liste d'articles sont ici. */

.elec26-article-date {
   margin: 6px 0 0;
   font-size: 14px;
   color: #868e96;
}

.elec26-article-visuel {
   display: block;
   width: 100%;
   height: auto;
   margin: 0 0 22px;
}

.elec26-liste-articles {
   display: flex;
   flex-direction: column;
   gap: 26px;
}

.elec26-article-resume {
   display: flex;
   gap: 18px;
   padding-bottom: 26px;
   border-bottom: 1px solid #dee2e6;
}

.elec26-article-resume:last-child {
   border-bottom: 0;
}

.elec26-article-vignette {
   flex: 0 0 180px;
}

.elec26-article-vignette img {
   display: block;
   width: 100%;
   height: auto;
}

.elec26-article-texte {
   flex: 1 1 auto;
}

.elec26-article-texte h2 {
   margin: 0 0 4px;
   font-family: "Archivo Black", Arial, sans-serif;
   font-size: 20px;
   line-height: 1.25;
}

.elec26-article-texte h2 a {
   color: #212529;
   text-decoration: none;
}

.elec26-article-texte h2 a:hover,
.elec26-article-texte h2 a:focus-visible {
   color: #1469ad;
   text-decoration: underline;
}

.elec26-article-texte p {
   margin: 10px 0 0;
}

@media (max-width: 600px) {
   /* La vignette passerait sous 100px de large a cote du texte : on empile. */
   .elec26-article-resume {
      flex-direction: column;
      gap: 12px;
   }

   .elec26-article-vignette {
      flex-basis: auto;
      max-width: 320px;
   }
}

/* ======================================================================
   Pastille « brouillon »
   ====================================================================== */
/* Visible seulement par qui a le droit de modifier ces contenus : le bloc
   leur montre les brouillons pour qu'ils verifient leur saisie en situation.
   Sans ce reperage, ils croiraient leur travail en ligne. */

.elec26-pastille-brouillon {
   display: inline-block;
   margin-left: 8px;
   padding: 2px 8px;
   font-family: "Archivo", Arial, sans-serif;
   font-size: 11px;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: .05em;
   vertical-align: middle;
   color: #8a2340;
   background: #fff;
   border: 1px solid #e40045;
   border-radius: 10px;
}