/**
 * Profil : selecteur du bandeau haut, bandeau de l'accueil, et mise en
 * colonnes de la page d'edition de profil.
 *
 * Habillage volontairement sobre : il s'agit d'une maquette a valider, pas
 * d'un parti pris graphique. Les couleurs sont celles de l'identite.
 */

/*
 * Couleur du bandeau haut : essai en rouge de l'identite (#e40045) a la
 * place du bleu sombre (#0f4f80). Les deux valeurs tiennent ici, passer de
 * l'une a l'autre ne demande que cette ligne.
 *
 * Le rouge coute du contraste : le blanc y donne 4,8:1 contre 8,6:1 sur le
 * bleu. C'est au-dessus des 4,5:1 attendus pour du texte courant, donc
 * conforme, mais la marge est mince et le texte du bandeau est petit.
 */
:root {
   --snes-bandeau-fond: #e40045;
   --snes-bandeau-bouton: transparent;
}

/* ---------------------------------------- le bandeau haut du site */

/*
 * Le bandeau prend un bleu franchement plus sombre que le bleu pale
 * d'origine. Ce n'est pas qu'une question de gout : les etiquettes du
 * selecteur sont blanches, et elles etaient illisibles sur le bleu clair.
 *
 * Par :has() et non par la classe d'identifiant du bloc Elementor : cette
 * classe est propre a la base de chaque environnement, la regle ne vaudrait
 * donc pas forcement en production. Le !important passe devant la regle que
 * genere Elementor pour le fond de section, plus specifique que celle-ci.
 */
.elementor-section:has(.snes-profil-bandeau) {
   background-color: var(--snes-bandeau-fond) !important;
}

/*
 * Les liens de ce bandeau etaient roses, ce qui tenait sur du bleu pale.
 * Sur ce fond ils disparaissent. En blanc ils donnent 4,8:1.
 */
.elementor-section:has(.snes-profil-bandeau) a {
   color: #fff !important;
}

/*
 * Repartition de la barre.
 *
 * Les deux colonnes Elementor valent 50% chacune, ce qui entassait tout le
 * contenu dans la moitie gauche en laissant la droite presque vide. La
 * gauche prend donc la place disponible et la droite juste la sienne.
 */
.elementor-section:has(.snes-profil-bandeau) .elementor-container {
   align-items: center;
}

/*
 * Alignement en hauteur.
 *
 * Les trois niveaux imbriques d'Elementor empilent chacun leur alignement :
 * sans centrage a chacun, un bloc plus haut que son voisin le laissait
 * flotter. La taille et la hauteur de ligne sont unifiees pour la meme
 * raison, les liens existants etant rendus a une autre taille que le
 * selecteur.
 */
.elementor-section:has(.snes-profil-bandeau) .elementor-widget-wrap {
   align-items: center;
   align-content: center;
}

.elementor-section:has(.snes-profil-bandeau) .elementor-shortcode,
.elementor-section:has(.snes-profil-bandeau) #btn-account,
.elementor-section:has(.snes-profil-bandeau) .text-right {
   font-size: 14px;
   line-height: 1.3;
}

.elementor-section:has(.snes-profil-bandeau) .elementor-column:first-child {
   width: auto;
   flex: 1 1 auto;
}

.elementor-section:has(.snes-profil-bandeau) .elementor-column:last-child {
   width: auto;
   flex: 0 0 auto;
   padding-left: 24px;
}

/*
 * Les liens restent sur la ligne du selecteur, et reviennent dessous plutot
 * que de l'ecraser quand la place manque.
 */
.elementor-section:has(.snes-profil-bandeau) .elementor-shortcode {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: 6px 18px;
}

/* La colonne de droite garde son alignement : sans cela son texte venait
   se coller au dernier lien de la colonne de gauche. */
.elementor-section:has(.snes-profil-bandeau) .elementor-column:last-child .elementor-shortcode {
   justify-content: flex-end;
}

.elementor-section:has(.snes-profil-bandeau) #btn-account {
   padding-right: 0;
   white-space: nowrap;
}

.elementor-section:has(.snes-profil-bandeau) .text-right {
   white-space: nowrap;
}

/* ---------------------------------------- le selecteur du bandeau */

/*
 * « Je suis <profession> a <academie> », present sur toutes les pages.
 * Listes courtes et bouton compact : la barre doit rester une barre.
 */
/*
 * Le selecteur ne se laisse pas comprimer : sans flex-shrink a zero, les
 * listes se reduisaient a « Cer » et « GR » des que la barre etait chargee,
 * alors que la place existait a cote.
 */
.snes-profil-bandeau {
   display: flex;
   align-items: center;
   flex: 0 0 auto;
   max-width: 100%;
   min-width: 0;
}

/*
 * La rangee se replie des que la place manque, a toute largeur et non sous
 * un seul point de rupture. Une rangee insecable sortait de l'ecran plutot
 * que de passer a la ligne, et le fond de la barre s'arretait au bord de la
 * fenetre pendant que les champs continuaient au-dela.
 */
.snes-profil-bandeau-champs {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: 6px;
   max-width: 100%;
   min-width: 0;
}

/*
 * Affichage du bouton et bascule des libelles.
 *
 * CES REGLES SONT EN DOUBLE, ici et en ligne dans l'en-tete, posees par
 * inc/snes-profil.php. Les deux copies doivent rester identiques.
 *
 * En ligne, parce qu'une feuille externe peut etre differee ou reconstruite
 * par l'hebergeur : sans elles dans le document, la barre s'affichait
 * depliee puis se repliait en decalant la page.
 *
 * Ici aussi, parce que la page est mise en cache independamment de la
 * feuille. Une page encore en cache, servie avec une feuille fraichement
 * mise a jour, n'a pas le style en ligne : sans copie ici, le bouton se
 * montrait sur grand ecran jusqu'a expiration du cache.
 */
.snes-profil-bandeau-bascule,
.snes-bandeau-court {
   display: none;
}

.snes-profil-bandeau-mot {
   flex: 0 0 auto;
   font-size: 14px;
   color: #fff;
   white-space: nowrap;
}

/*
 * Hauteur commune aux listes et au bouton.
 *
 * Donnee explicitement plutot que laissee aux paddings : un navigateur
 * habille une liste deroulante a sa facon, et la hauteur obtenue ne
 * correspondait pas a celle du bouton. Le box-sizing est repose ici car la
 * bordure des listes doit entrer dans ces 32 pixels, pas s'y ajouter.
 */
.snes-profil-bandeau select,
.snes-profil-bandeau button {
   box-sizing: border-box;
   height: 32px;
}

/* Largeurs fixes : une liste dimensionnee par son option la plus longue
   occuperait a elle seule la moitie de la barre. Plafonnees malgre tout a
   la largeur disponible, pour qu'un ecran etroit ne les laisse pas sortir. */
.snes-profil-bandeau select {
   flex: 0 1 auto;
   width: 190px;
   max-width: 100%;
   padding: 0 4px;
   font-size: 14px;
   color: #212529;
   background: #fff;
   border: 1px solid #fff;
   border-radius: 2px;
}

.snes-profil-bandeau select[name="e26_aca"] {
   width: 150px;
}

/*
 * Le bouton de validation.
 *
 * Il etait blanc, comme les deux listes deroulantes posees juste a sa
 * gauche, et ne s'en distinguait donc plus : trois rectangles blancs a la
 * suite, dont un seul est un bouton. Un aplat sombre reglait la lisibilite
 * mais pesait trop lourd dans une barre de cette hauteur.
 *
 * Contour seul, donc : le bouton se lit comme un bouton par sa bordure, et
 * c'est le vide qui le separe des champs pleins. Le blanc donne 4,8:1
 * contre le rouge, pour le trait comme pour le libelle, au-dessus des 3:1
 * attendus d'un element d'interface et des 4,5:1 d'un texte courant.
 *
 * La bordure est reprise des listes, qui en portent une de meme epaisseur,
 * et le box-sizing commun garde les trois boites a 32 pixels.
 *
 * Cible le bouton d'envoi seul : la bascule de telephone est un
 * <button type="button"> et garde son habillage propre, plus bas.
 */
.snes-profil-bandeau button[type="submit"] {
   flex: 0 0 auto;
   padding: 0 14px;
   font-size: 14px;
   font-weight: 600;
   color: #fff;
   background: var(--snes-bandeau-bouton);
   border: 1px solid #fff;
   border-radius: 2px;
   cursor: pointer;
}

/* Au survol, le contour se remplit legerement : le bouton repond sans
   changer de taille ni de place. */
.snes-profil-bandeau button[type="submit"]:hover {
   background: rgba(255, 255, 255, 0.16);
}

/*
 * Lisere de focus blanc, decale, et non orange colle au champ.
 *
 * L'orange de l'identite ne donne que 2,3:1 contre le blanc des champs,
 * sous les 3:1 attendus pour qu'un indicateur se detache de ce qui
 * l'entoure. Le decalage ecarte le lisere du champ, de sorte qu'il n'a
 * plus que le fond pour voisin, contre lequel le blanc donne 4,8:1.
 */
.snes-profil-bandeau select:focus-visible,
.snes-profil-bandeau button:focus-visible,
.snes-profil-bandeau-bascule:focus-visible {
   outline: 2px solid #fff;
   outline-offset: 2px;
}

/* Sous cette largeur les deux colonnes ne tiennent plus cote a cote. */
@media (max-width: 1100px) {
   .elementor-section:has(.snes-profil-bandeau) .elementor-container {
      flex-wrap: wrap;
   }

   .elementor-section:has(.snes-profil-bandeau) .elementor-column:last-child {
      padding-left: 0;
   }

   .elementor-section:has(.snes-profil-bandeau) .elementor-column:last-child .elementor-shortcode {
      justify-content: flex-start;
   }
}

/*
 * Sur telephone, le selecteur est replie derriere un bouton.
 *
 * Deplie, la barre coutait trois lignes sur chaque page, soit une bonne
 * part du premier ecran. Replie, elle en coute une. Le bouton annonce le
 * profil deja declare, de sorte que le repli ne cache rien d'essentiel.
 *
 * Tout y est en bloc de largeur 100%, et non en calcul de flex.
 *
 * C'est deliberé. Une largeur flex ne vaut que si le parent est bien un
 * conteneur flex : ici le parent ne l'est que par une regle en :has(), donc
 * pas sur un navigateur qui l'ignore, et la largeur demandee retombait
 * silencieusement sur la largeur du contenu. Un bloc a 100% avec
 * box-sizing: border-box ne depend de rien : il ne peut pas sortir de son
 * conteneur, quel que soit le mode d'affichage du parent.
 *
 * Le point de rupture est celui du theme, celui ou le menu passe en
 * hamburger, pour que la barre bascule en meme temps que le reste.
 */
@media (max-width: 991px) {
   .snes-profil-bandeau,
   .snes-profil-bandeau-champs {
      display: block;
      box-sizing: border-box;
      flex: 1 1 100%;
      width: 100%;
      max-width: 100%;
      margin-left: 0;
      margin-right: 0;
   }

   .snes-profil-bandeau-champs {
      margin-top: 8px;
   }

   .snes-profil-bandeau select,
   .snes-profil-bandeau select[name="e26_aca"],
   .snes-profil-bandeau button {
      display: block;
      box-sizing: border-box;
      width: 100%;
      max-width: 100%;
      min-width: 0;
      margin: 0 0 8px;
   }

   /* En double avec l'en-tete, voir plus haut. */
   .snes-profil-bandeau-bascule {
      display: block;
   }

   .snes-profil-bandeau--replie .snes-profil-bandeau-champs {
      display: none;
   }

   .snes-bandeau-long {
      display: none;
   }

   .snes-bandeau-court {
      display: inline;
   }

   .snes-profil-bandeau-bascule {
      box-sizing: border-box;
      width: 100%;
      max-width: 100%;
      margin: 0;
      height: 32px;
      padding: 0 14px;
      font-size: 14px;
      font-weight: 600;
      color: var(--snes-bandeau-fond);
      background: #fff;
      border: 0;
      border-radius: 2px;
      cursor: pointer;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
   }

   .snes-profil-bandeau button {
      margin-bottom: 0;
   }

   /*
    * « Je suis » et « a » disparaissent de l'ecran : empilees, les listes
    * n'ont plus de phrase a former, et l'intitule d'invite de chaque liste
    * dit deja « Metier » et « Academie ».
    *
    * L'etiquette du metier n'est pas supprimee pour autant, seulement
    * sortie du champ de vision : c'est le seul nom rattache a cette liste,
    * et la retirer laisserait un lecteur d'ecran sans rien a annoncer.
    */
   label.snes-profil-bandeau-mot {
      position: absolute;
      width: 1px;
      height: 1px;
      margin: -1px;
      padding: 0;
      overflow: hidden;
      clip-path: inset(50%);
      white-space: nowrap;
      border: 0;
   }

   span.snes-profil-bandeau-mot {
      display: none;
   }

   /*
    * Les trois liens sur une seule rangee.
    *
    * Ils vivent dans deux colonnes Elementor differentes : « Mon profil »
    * et « Se deconnecter » a gauche, « Espace adherent » a droite. Empilees
    * sur telephone, ces colonnes donnaient deux lignes la ou une suffit.
    *
    * display: contents efface les boites intermediaires sans toucher a leur
    * contenu : colonnes, enveloppes de widget et conteneurs disparaissent de
    * la mise en page, et leurs enfants deviennent enfants directs de la
    * rangee. Les trois liens se retrouvent alors voisins et tiennent sur une
    * ligne, le selecteur gardant la sienne grace a sa largeur de 100%.
    *
    * Ce ne sont que des div sans role : les effacer ne retire aucune
    * semantique. Si :has() n'est pas reconnu, rien de tout ceci ne
    * s'applique et on retombe sur l'empilement, plus haut mais correct.
    */
   .elementor-section:has(.snes-profil-bandeau) .elementor-column,
   .elementor-section:has(.snes-profil-bandeau) .elementor-widget-wrap,
   .elementor-section:has(.snes-profil-bandeau) .elementor-element,
   .elementor-section:has(.snes-profil-bandeau) .elementor-widget-container,
   .elementor-section:has(.snes-profil-bandeau) .elementor-shortcode,
   .elementor-section:has(.snes-profil-bandeau) .text-right {
      display: contents;
   }

   /*
    * Les marges reviennent ici. L'aplatissement a emporte le padding des
    * colonnes avec leurs boites, et le contenu venait toucher les bords de
    * la barre. Le conteneur, lui, n'est pas aplati : c'est donc a lui de
    * les porter.
    */
   .elementor-section:has(.snes-profil-bandeau) .elementor-container {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      box-sizing: border-box;
      gap: 10px 16px;
      padding: 14px 16px;
   }

   /* Les liens de compte ont le droit de se couper ici : un libelle plus
      long que l'ecran sortirait sinon de la barre. */
   .elementor-section:has(.snes-profil-bandeau) #btn-account,
   .elementor-section:has(.snes-profil-bandeau) .text-right {
      white-space: normal;
   }

}

/* ------------------------------------ actualite liee a la profession */

/*
 * Le tag qui signale l'emplacement personnalise, a la place du bandeau de
 * categories. Plein, blanc sur bleu : il doit se voir au premier coup
 * d'oeil, sans quoi le visiteur ne percoit pas que cette place a ete
 * choisie pour lui.
 *
 * En bloc de niveau, mais en inline-block : le tag s'arrete a la largeur de
 * son texte, et le titre de l'article passe dessous.
 */
.snes-actu-badge {
   display: inline-block;
   margin: 0 0 8px;
   padding: 4px 11px;
   font-family: "Archivo Black", Arial, sans-serif;
   font-size: 13px;
   line-height: 1.35;
   color: #fff;
   background: #1469ad;
   border-radius: 2px;
}

/* ------------------------------------------- le bandeau de l'accueil */

/*
 * Fond sur toute la largeur de l'ecran, contenu aligne sur le conteneur.
 *
 * La largeur est donnee explicitement et la marge gauche vaut (100% - vw)/2,
 * soit l'oppose de la distance entre le bord de l'ecran et celui du
 * conteneur : le fond atteint les bords au pixel pres, quel que soit le
 * padding interne d'Elementor. Le padding horizontal ramene ensuite le
 * contenu exactement ou il etait, les pourcentages se calculant sur la
 * largeur du parent.
 *
 * --snes-vw est pose par inc/snes-profil.php et vaut la largeur de la
 * fenetre sans la barre de defilement. Sans JavaScript, la valeur de repli
 * 100% annule marge et retrait : le bandeau reste dans son conteneur.
 *
 * Les 40 pixels ajoutes alignent le texte sur les blocs du dessus, et non
 * sur le conteneur : le bloc d'actualites porte lui-meme un padding de
 * 40px (.home .lst-actu dans style.scss), que le bandeau n'avait pas. Sans
 * eux, son texte commencait 40 pixels plus a gauche que celui d'au-dessus.
 *
 * Ils servent aussi de marge minimale : quand le conteneur occupe toute la
 * largeur, la part de realignement tombe a zero et il reste ces 40px, de
 * sorte que le texte ne touche jamais le bord du bandeau.
 */
.snes-profil-encart {
   box-sizing: border-box;
   width: var(--snes-vw, 100%);
   margin: 0 0 0 calc((100% - var(--snes-vw, 100%)) / 2);
   padding: 46px calc(var(--snes-vw, 100%) / 2 - 50% + 40px);
   background: #1469ad;
   color: #fff;
}

/*
 * Sous 768px le bloc d'actualites retombe a 10px de padding, meme regle et
 * meme seuil que dans style.scss. Le bandeau suit, sans quoi l'alignement
 * se perdrait la ou il se voit le plus, les deux colonnes etant empilees.
 */
@media screen and (max-width: 767px) {
   .snes-profil-encart {
      padding-left: calc(var(--snes-vw, 100%) / 2 - 50% + 10px);
      padding-right: calc(var(--snes-vw, 100%) / 2 - 50% + 10px);
   }
}

/*
 * Espace avant le bandeau.
 *
 * Trois sources s'y ajoutaient, toutes dans le bloc d'actualites qui le
 * precede. Elles sont neutralisees une a une plutot que compensees par une
 * marge negative posee au jugé, qui se serait decalee au moindre changement
 * de ce bloc.
 */

/* Saut de ligne apres le bouton « Toute l'actualité ». */
.lst-actu-right > br:last-child {
   display: none;
}

/* Deux sauts de ligne a la fin de la date de l'article principal. Le
   premier, qui precede la date, est conserve. */
.lst-actu .the-date br:last-child,
.lst-actu .the-date br:nth-last-child(2) {
   display: none;
}

/* Marge basse que Elementor pose entre deux blocs d'une meme colonne,
   ciblee sur le seul bloc qui precede le bandeau. */
.elementor-widget:has(+ .elementor-widget .snes-profil-encart) {
   margin-bottom: 0;
}

/* L'attribut hidden doit l'emporter, le bandeau n'ayant rien a montrer tant
   qu'aucun profil n'est declare. Sans cette regle, une feuille tierce posant
   un display sur les sections le rendrait visible et vide. */
.snes-profil-encart[hidden] {
   display: none;
}

/*
 * Toutes les couleurs posees plus bas ont ete verifiees contre ce fond :
 * #fff donne 5,75:1 et #e3edf7 donne 4,85:1, le minimum exige pour du texte
 * courant etant 4,5:1.
 */

/* ------------------------------------------------------ les colonnes */

/*
 * Meme decoupe que le bloc d'actualites du dessus, qui est en col-7 /
 * col-5 : les deux colonnes du bandeau tombent ainsi sous les deux blocs,
 * et la page se lit sur une seule grille au lieu de deux.
 *
 * Sans gouttiere de grille : les 20 pixels qui separent les deux colonnes
 * du dessus viennent de leur habillage interne, pas d'un espacement de
 * grille. Ils sont reproduits ici par la marge et le retrait de la premiere
 * colonne, de sorte que la seconde commence exactement au bord de sa piste,
 * donc exactement sous le bloc de droite.
 */
.snes-profil-colonnes {
   display: grid;
   grid-template-columns: 7fr 5fr;
   gap: 0;
   align-items: start;
}

/*
 * Un filet plutot qu'un fond : la separation suffit a lire deux colonnes.
 *
 * Pose a droite de la premiere colonne et non a gauche de la seconde : a
 * gauche il se serait colle au texte, qui doit commencer au bord exact de
 * la piste. La marge et le retrait de 10px le placent au milieu des 20
 * pixels qui separent les deux colonnes.
 */
.snes-profil-colonne:first-child {
   margin-right: 10px;
   padding: 0 10px 0 0;
   border-right: 1px solid rgba(255, 255, 255, .3);
}

.snes-profil-colonne:last-child {
   padding: 0;
}

.snes-profil-colonne-vide {
   margin: 6px 0 0;
   font-size: 14px;
   line-height: 1.6;
   color: #e3edf7;
}

/* --------------------------------------------------------- la carte */

.snes-profil-carte-titre {
   margin: 0;
   font-size: 13px;
   text-transform: uppercase;
   letter-spacing: .06em;
   color: #e3edf7;
}

.snes-profil-carte-nom {
   margin: 2px 0 10px;
   font-family: "Archivo Black", Arial, sans-serif;
   font-size: 22px;
   color: #fff;
}

.snes-profil-carte-lien {
   display: inline-block;
   padding: 9px 18px;
   font-family: "Archivo Black", Arial, sans-serif;
   font-size: 15px;
   color: #1469ad;
   background: #fff;
   border-radius: 3px;
   text-decoration: none;
}

.snes-profil-carte-infos {
   margin: 12px 0 0;
   font-size: 14px;
   line-height: 1.6;
   color: #e3edf7;
}

.snes-profil-carte-infos a {
   color: #fff;
   text-decoration: underline;
}

/* L'orange du focus ne se detache pas assez du bleu (2,4:1). */
.snes-profil-carte-lien:focus-visible {
   outline: 3px solid #fff;
   outline-offset: 2px;
}

/* ------------------------------------------------------- les replis */

/* En dessous de cette largeur, deux colonnes ne tiennent plus : elles se
   remettent l'une sous l'autre et le filet passe au-dessus. */
@media (max-width: 860px) {
   .snes-profil-colonnes {
      grid-template-columns: 1fr;
      gap: 26px;
   }

   .snes-profil-colonne:first-child {
      margin-right: 0;
      padding: 0;
      border-right: 0;
   }

   .snes-profil-colonne + .snes-profil-colonne {
      padding-top: 26px;
      border-top: 1px solid rgba(255, 255, 255, .3);
   }
}

@media (max-width: 600px) {
   .snes-profil-encart {
      padding-top: 34px;
      padding-bottom: 34px;
   }
}

/* ------------------------- la page d'edition de profil */

/*
 * Deux colonnes sur grand ecran : l'identite a gauche, le choix des
 * contenus a droite. Voir user-profile.php.
 *
 * Le point de rupture est celui du theme, celui du menu hamburger, pour que
 * la page bascule en meme temps que le reste. En dessous, les deux blocs se
 * remettent l'un sous l'autre sans rien avoir a declarer : la grille n'est
 * posee qu'au-dela.
 */
@media (min-width: 992px) {
   .profil-colonnes {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 0 48px;
      align-items: start;
   }

   /*
    * Les cases a cocher passent sur une seule colonne : dans une demi-page,
    * deux colonnes de libelles aussi longs que « Accompagnant-es d'eleves en
    * situation de handicap » se replieraient sur trois lignes chacun.
    */
   .profil-col-perso .grid > .col {
      flex-basis: 100%;
      max-width: 100%;
   }
}