/*
 * Styles du theme IIRCF qui ne relevent pas d'une classe utilitaire.
 *
 * Tout ce qui peut s'ecrire en classes Tailwind dans un gabarit y reste :
 * ce fichier ne porte que les etats pilotes par le JavaScript, et les
 * elements qu'on ne peut pas atteindre autrement.
 */

/* ---------------------------------------------------------------------------
 * Lien d'evitement : invisible jusqu'a ce qu'il recoive le focus.
 *
 * « display: none » le retirerait aussi du parcours clavier, ce qui annulerait
 * son interet. Il est donc deplace hors de l'ecran, puis ramene au focus.
 * ------------------------------------------------------------------------- */
.iircf-lien-evitement {
  position: absolute;
  top: -100px;
  left: 1rem;
  z-index: 100;
  padding: 0.75rem 1rem;
  background: #ffffff;
  color: #002C5F;
  font-weight: 600;
  border-radius: 0.25rem;
  transition: top 0.15s ease;
}
.iircf-lien-evitement:focus {
  top: 1rem;
}

/* ---------------------------------------------------------------------------
 * En-tete.
 *
 * Il est OPAQUE en permanence sur les pages interieures : c'est ce que montre
 * la maquette, dont la barre superieure bleue et la carte de marque blanche
 * couvrent toute la largeur des le haut de page.
 *
 * L'etat transparent - l'en-tete pose sur le heros, en texte blanc - n'existe
 * que sur la page d'ACCUEIL. Il sera introduit avec son gabarit. Le declarer
 * ici serait une faute visible : le texte blanc du menu se retrouverait sur le
 * fond blanc de l'en-tete, donc invisible, sur toutes les pages du site.
 *
 * L'ombre et la classe is-scrolled restent posees par js/header.js : elles
 * serviront a la page d'accueil.
 * ------------------------------------------------------------------------- */
#entete-iircf {
  background: #ffffff;
  border-bottom-color: rgba(197, 198, 206, 0.42);
}

/* ---------------------------------------------------------------------------
 * Contenu redige par les editeurs.
 *
 * Le corps des pages vient de l'import du copywriting : du HTML simple, sans
 * classes. Tailwind ne met en forme que ce qu'il voit dans les gabarits, il
 * ne peut donc rien pour ce texte - d'ou ces regles, limitees au conteneur de
 * texte formate.
 * ------------------------------------------------------------------------- */
.champ-texte > * + * {
  margin-top: 1rem;
}
.champ-texte h2 {
  margin-top: 2.5rem;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 28px;
  line-height: 36px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #0b1c30;
}
.champ-texte h3 {
  margin-top: 2rem;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 22px;
  line-height: 30px;
  font-weight: 600;
  color: #0b1c30;
}
.champ-texte p {
  font-size: 15px;
  line-height: 24px;
}
.champ-texte ul {
  list-style: disc;
  padding-left: 1.5rem;
}
.champ-texte ul > li + li {
  margin-top: 0.5rem;
}
.champ-texte a {
  color: #2258c3;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------------------------------------------------------------------------
 * MEGA-MENUS — regles reprises de la maquette validee.
 *
 * Le panneau n'est PAS un menu deroulant accroche a son bouton : il occupe
 * toute la largeur de l'ecran, sous l'en-tete. D'ou « position: fixed » et un
 * decalage vertical egal a la hauteur de l'en-tete, que le JavaScript mesure
 * et ecrit dans --hauteur-entete : figer cette valeur la ferait glisser des
 * que la barre superieure change de hauteur, au telephone par exemple.
 * ------------------------------------------------------------------------- */
.mega-menu {
  display: none;
  position: fixed;
  top: var(--hauteur-entete, 116px);
  left: 0;
  right: 0;
  z-index: 60;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease;
}
.groupe-menu.is-open .mega-menu {
  display: block;
  opacity: 1;
  transform: translateY(0);
}
/* Le panneau a une HAUTEUR FIXE et c'est sa colonne d'entrees qui defile.

   Deux raisons. La premiere : les sept rubriques n'ont pas le meme nombre
   d'entrees - cinq pour « L'IIRCF », onze pour « Domaines d'excellence ». Un
   panneau qui s'ajuste a son contenu saute de hauteur a chaque survol, et le
   volet illustre change de proportion d'une rubrique a l'autre.

   La seconde : un panneau en position fixe NE SUIT PAS le defilement de la
   page. Sans borne, les dernieres entrees de « Domaines d'excellence »
   tombaient sous la ligne de flottaison sur un portable de 768 px de haut -
   inatteignables, et rien n'indiquait qu'il restait a lire.

   Le defilement est confie a la colonne de droite et non au panneau entier :
   le volet illustre reste en place, comme un sommaire qui ne bouge pas
   pendant qu'on parcourt ses entrees. */
@media (min-width: 768px) {
  .mega-menu > div > div {
    height: min(30rem, calc(100vh - var(--hauteur-entete, 116px) - 2rem));
  }

  /* « min-height: 0 » n'est pas une precaution : un element de grille vaut
     « auto » par defaut, ce qui l'empeche de devenir plus petit que son
     contenu. Sans cette ligne, la colonne deborde au lieu de defiler. */
  .mega-menu .colonne-entrees {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

/* Une entree de mega-menu : icone a gauche, titre puis description a droite.

   La maquette se contente de 4 px entre les lignes parce que sa micro-copie
   tient sur une ligne. Nos descriptions viennent du texte du client et vont
   jusqu'a 90 caracteres : sur deux lignes, sous un titre lui-meme sur deux
   lignes, les entrees se touchaient.

   POURQUOI UNE HAUTEUR MAXIMALE ET PAS SEULEMENT UN « line-clamp »

   « -webkit-line-clamp » coupe bien le texte a l'affichage, mais l'element
   reste en « display: -webkit-box » et ne declare pas toujours a la grille la
   hauteur qu'il occupe reellement. La rangee se calculait donc trop courte,
   l'entree debordait par le bas, et l'entree SUIVANTE - dont le fond de survol
   est peint apres - venait recouvrir la fin de la description precedente. Ce
   que l'on prenait pour un survol incomplet etait en fait un chevauchement.

   La hauteur maximale, elle, est une valeur que la grille comprend : deux
   lignes a 1,35 d'interlignage. Le « overflow: hidden » sur le lien est la
   ceinture : plus rien ne peut etre peint hors de sa boite, quoi qu'il arrive
   au contenu. */
.mega-menu a.entree-menu {
  min-height: 4.5rem;
  align-items: flex-start;
  overflow: hidden;
}

.mega-menu a.entree-menu .description-entree {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  line-height: 1.35;
  max-height: 2.7em;
}

/* Le volet de gauche : trame de points, et photo en fond attenue. */
.volet-illustre {
  background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.16) 1px, transparent 0);
  background-size: 14px 14px;
  padding: 1.75rem;
}
.volet-illustre > :not(.volet-image) {
  position: relative;
  z-index: 1;
}
.volet-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Attenuee : c'est un fond, le texte passe devant et doit rester lisible. */
  opacity: .28;
  pointer-events: none;
}

/* ---------------------------------------------------------------------------
 * La carte de marque : logo et nom, sur fond blanc, dans la barre principale.
 *
 * Elle NE DEBORDE PLUS sur la barre superieure bleue (decision du 24/09/2026) :
 * le debord de la maquette mordait sur la barre des langues et de l'appel a
 * l'action, et le bord du blanc tombait au milieu de la bande bleue. Elle
 * s'arrete desormais au bord de la barre principale.
 *
 * Elle reste dans le FLUX, et n'est pas en position absolue. La maquette, elle,
 * la sortait du flux - et c'est ce qui a produit le premier defaut visible du
 * theme : la navigation passait par-dessous, « Accueil » et « L'IIRCF »
 * disparaissaient derriere le logo, et « Programmes et formations »
 * s'affichait ampute de son P. Dans le flux, la barre principale est une
 * rangee flex : la carte occupe sa largeur, la navigation prend le reste, et
 * aucun recouvrement n'est possible quelle que soit la longueur des libelles.
 * ------------------------------------------------------------------------- */
.carte-marque {
  position: relative;
  z-index: 70;
  display: flex;
  align-items: center;
  align-self: stretch;
  flex-shrink: 0;
  background: #ffffff;
  padding-right: 1.5rem;
}


/* --------------------------------------------------------------------------
   Photographie qui couvre son cadre.

   A poser sur le CADRE, jamais sur l'image : cartes de parcours, banniere,
   vignettes de domaine, de programme, de solution, d'actualite.

   Le formateur d'image de Drupal n'accepte aucune classe - impossible donc
   d'ecrire « object-fit: cover » sur le <img> depuis un gabarit. La regle est
   ici, et vise UNIQUEMENT l'image : l'avoir posee sur « > * » avait etire
   l'etiquette « Se former » de la section 2 jusqu'a recouvrir toute la
   photographie d'un aplat bleu.

   Le cadre doit etre positionne (« relative » ou « absolute inset-0 »), sans
   quoi l'image se cale sur l'ancetre positionne le plus proche.
   -------------------------------------------------------------------------- */
.image-couvrante > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --------------------------------------------------------------------------
   Etiquette de rubrique des vignettes : bleu, bleu nuit, bleu, bleu nuit.

   L'alternance de la maquette est une POSITION, pas une donnee. Les vignettes
   etant desormais enfants directs de la grille, :nth-child() la lit
   directement - inutile de faire remonter un rang jusqu'au gabarit.

   Les couleurs reprennent les jetons « primary-container » et « on-primary »
   de tailwind.config.js, genere depuis la maquette.
   -------------------------------------------------------------------------- */
.iircf-vignettes > *:nth-child(even) .etiquette-rubrique {
  background-color: #0c1b33;
  color: #fff;
}

/* --------------------------------------------------------------------------
   Carrousel de cartes (section « Nos programmes » de l'accueil).

   Les largeurs sont ici et non sur la carte : la meme vignette de programme
   sert dans ce carrousel ET dans la grille du catalogue. Ecrire
   « lg:w-[calc((100%-4rem)/3)] » sur la carte, comme le fait la maquette,
   la rendrait inutilisable ailleurs.

   Une carte visible, puis deux, puis trois ; la gouttiere vaut space-xl,
   soit 2rem, d'ou « 100% - 1 gouttiere » sur deux colonnes et
   « 100% - 2 gouttieres » sur trois.

   CORRECTION SUR LA MAQUETTE : elle ecrit « overflow: hidden », ce qui
   reserve le defilement aux deux boutons. Sur un ecran tactile, ou l'on fait
   glisser, le carrousel serait fige apres la premiere carte. Le defilement
   horizontal est donc autorise, son ascenseur masque, et l'accrochage
   ramene chaque carte au bord.
   -------------------------------------------------------------------------- */
.iircf-carrousel {
  display: flex;
  gap: 2rem;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.iircf-carrousel::-webkit-scrollbar {
  display: none;
}

.iircf-carrousel > * {
  flex: 0 0 100%;
  scroll-snap-align: start;
}

@media (min-width: 768px) {
  .iircf-carrousel > * {
    flex-basis: calc((100% - 2rem) / 2);
  }
}

@media (min-width: 1024px) {
  .iircf-carrousel > * {
    flex-basis: calc((100% - 4rem) / 3);
  }
}

/* Un bouton d'extremite reste visible mais cesse d'appeler le clic. */
.iircf-carrousel-bouton:disabled {
  opacity: .4;
  cursor: default;
}

/* --------------------------------------------------------------------------
   Les deux volets de la section 7, inegaux.

   La maquette donne cinq colonnes sur douze au volet individuel et sept au
   volet institutionnel : le premier tient en deux entrees, le second en six.
   Cette repartition ne peut pas s'ecrire sur la carte - une meme carte sert
   aux sections 5 et 7 - ni depuis le gabarit de section, les cartes etant
   rendues sans enveloppe. Elle se lit donc sur la POSITION, comme
   l'alternance des etiquettes de vignette.
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) {
  .iircf-volets > *:first-child {
    grid-column: span 5 / span 5;
  }

  .iircf-volets > *:nth-child(2) {
    grid-column: span 7 / span 7;
  }
}

/* --------------------------------------------------------------------------
   BARRE DE DEFILEMENT, pour tout le site.

   Celle du systeme est grise et large : sur une page institutionnelle bleue,
   elle se remarque plus que le contenu qu'elle sert. Les couleurs reprennent
   les jetons du theme - « outline-variant » au repos, « outline » au survol,
   « surface-container-low » pour la glissiere.

   Deux syntaxes, et ce n'est pas une redondance : Firefox ne connait que
   « scrollbar-width » et « scrollbar-color », les moteurs WebKit et Blink ne
   connaissent que les pseudo-elements. Ecrire l'une sans l'autre laisse la
   moitie des visiteurs devant la barre du systeme.

   La regle ne touche NI le carrousel de l'accueil, dont l'ascenseur est
   volontairement masque et remplace par deux boutons, NI les zones ou le
   defilement doit rester invisible : elles posent leur propre valeur, plus
   specifique.
   -------------------------------------------------------------------------- */
/* POURQUOI « scrollbar-width » EST ENFERME DANS UN @supports

   Chrome sait desormais lire « scrollbar-width », et des qu'il le voit il
   IGNORE la largeur des pseudo-elements : la barre repassait a la largeur
   « thin » du systeme, une dizaine de pixels, quelle que soit la valeur
   ecrite dans ::-webkit-scrollbar. La regle avait donc l'effet inverse de
   celui cherche.

   Le test « @supports not selector(::-webkit-scrollbar) » est vrai chez
   Firefox, qui ne connait pas ce pseudo-element, et faux chez Chrome, Edge et
   Safari. Chacun recoit ainsi la seule syntaxe qu'il applique vraiment. */
@supports not selector(::-webkit-scrollbar) {
  html {
    scrollbar-width: thin;
    scrollbar-color: #c5c6ce #eff4ff;
  }

  .volet-illustre,
  .bg-primary-container {
    scrollbar-color: rgba(255, 255, 255, .35) rgba(255, 255, 255, .08);
  }
}

*::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

*::-webkit-scrollbar-track {
  background: #eff4ff;
}

*::-webkit-scrollbar-thumb {
  background-color: #c5c6ce;
  border-radius: 999px;
}

*::-webkit-scrollbar-thumb:hover {
  background-color: #75777e;
}

/* Sur un fond sombre, la meme barre disparaitrait. Le panneau de reperes et
   les volets illustres des mega-menus inversent donc le contraste. */
.volet-illustre::-webkit-scrollbar-track,
.bg-primary-container::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, .08);
}

.volet-illustre::-webkit-scrollbar-thumb,
.bg-primary-container::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, .35);
}

/* --------------------------------------------------------------------------
   FOCUS CLAVIER

   L'anneau par defaut de Drupal est bleu. Sur ce site, le bleu est deja la
   couleur des liens ET celle du fond de plusieurs sections : l'anneau s'y
   confondait, et une personne qui navigue au clavier perdait la trace de sa
   position. L'accent ambre ne se confond ni avec le bleu des liens, ni avec
   le bleu nuit des fonds, ni avec le blanc des cartes.

   « :focus-visible » et non « :focus » : le navigateur ne le declenche que
   pour une navigation au clavier, l'anneau n'apparait donc pas au clic a la
   souris, ou il n'apporte rien.

   Le decalage de 2 px detache l'anneau du bord de l'element ; sans lui, sur un
   bouton ambre, l'anneau disparaitrait dans le bouton.
   -------------------------------------------------------------------------- */
:focus-visible {
  outline: 2px solid #d28811;
  outline-offset: 2px;
  border-radius: 2px;
}

/* Sur les fonds ambres, l'anneau reprend le blanc : un anneau ambre sur un
   bouton ambre ne se verrait pas. */
.bg-accent :focus-visible,
.bg-accent:focus-visible {
  outline-color: #fff;
}

/* --------------------------------------------------------------------------
   LARGEUR DE LECTURE des pages non encore composees.

   Tant qu'une page n'a pas recu ses sections, elle affiche son corps de texte
   d'un seul tenant. Sur 1 280 px, un paragraphe fait plus de deux cents
   caracteres par ligne : en revenant a gauche, l'oeil ne retrouve pas sa
   ligne suivante et relit la meme.

   La regle ne vise QUE le corps de page - « .champ-texte-page » - et non tous
   les champs riches : dans un texte illustre, la colonne est deja bornee par
   la grille, et une seconde borne la retrecirait sans raison.

   Les IMAGES et les tableaux echappent a la borne : ce sont eux qui donnent
   sa respiration a une page longue, et les brider au meme format que le texte
   les rendrait inutiles.
   -------------------------------------------------------------------------- */
/* La borne vise le TEXTE, pas l enveloppe. Posee sur « > * », elle bridait
   aussi les pages qui ont leur propre mise en page : la fiche Domaine, dont
   le corps partage la largeur avec un sommaire de 16 rem, se retrouvait avec
   une colonne de trois cents pixels. Le defaut ne venait pas de la fiche mais
   d une regle ecrite trois etages plus haut. */
.champ-texte-page .champ-texte > p,
.champ-texte-page .champ-texte > ul,
.champ-texte-page .champ-texte > ol,
.champ-texte-page .champ-texte > h2,
.champ-texte-page .champ-texte > h3,
.champ-texte-page .champ-texte > h4,
.champ-texte-page .champ-texte > blockquote {
  max-width: 44rem;
}

/* --------------------------------------------------------------------------
   Le corps d'un passage de recit.

   « .champ-texte » est calibre pour les fiches, ou le texte accompagne des
   donnees : 15 px. Sur une page de recit, ou le texte EST le contenu, c'est
   trop petit - les sites institutionnels qui servent de reference lisent
   autour de 17 a 18 px.
   -------------------------------------------------------------------------- */
.champ-texte-recit p {
  font-size: 17px;
  line-height: 28px;
}

.champ-texte-recit > * + * {
  margin-top: 1.25rem;
}

/* Le corps d'une phrase en exergue : la taille est portee par le gabarit, la
   regle ne fait que neutraliser celle de .champ-texte, calibree pour les
   fiches. */
.champ-texte-exergue p {
  font-size: inherit;
  line-height: inherit;
}

/* --------------------------------------------------------------------------
   Le sommaire d'une fiche longue.

   L'entree active est marquee par un filet a gauche, dans le prolongement du
   filet gris de la liste. La classe est posee par js/sommaire.js.
   -------------------------------------------------------------------------- */
.lien-sommaire.est-actif {
  border-left-color: #2258c3;
  color: #0b1c30;
  font-weight: 600;
}

/* Une liste numerotee dans un texte riche : le numero est porte par le
   navigateur, mais la puce par defaut colle au texte et se perd. */
.champ-texte ol {
  list-style: decimal;
  padding-left: 1.5rem;
}

.champ-texte ol > li {
  margin-top: .75rem;
  padding-left: .25rem;
}

.champ-texte ol > li::marker {
  color: #2258c3;
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   Le sommaire collant se cale sous l'en-tete, avec de l'air.

   « top-32 » etait une valeur en dur - 8 rem - posee au jugé. Or la hauteur
   de l'en-tete n'est pas une constante : elle change au defilement, et de
   nouveau selon la largeur. Le sommaire se retrouvait colle sous la barre de
   navigation, quand il ne passait pas dessous.

   --hauteur-entete est mesuree par js/header.js. Les 2 rem qui s'y ajoutent
   ne sont pas un ajustement : c'est la respiration qui separe une navigation
   secondaire de la navigation principale, sans quoi les deux se lisent comme
   un seul bloc.

   La meme valeur sert d'« ancre haute » aux sections : sans elle, un clic
   dans le sommaire amene le titre vise DERRIERE l'en-tete fixe.
   -------------------------------------------------------------------------- */
.sommaire-collant {
  position: sticky;
  top: calc(var(--hauteur-entete, 116px) + 2rem);
}

.section-ancree {
  scroll-margin-top: calc(var(--hauteur-entete, 116px) + 2rem);
}

/* --------------------------------------------------------------------------
   La grille des vues de liste.

   Deux a trois cartes par ligne selon la largeur. Les valeurs sont en « rem »
   et non en nombre de colonnes : « repeat(auto-fill, minmax(20rem, 1fr)) »
   donne une carte de 320 px au minimum, et le navigateur en met autant qu'il
   peut. Une liste filtree qui ne rend qu'un resultat garde ainsi la largeur
   d'une carte au lieu de s'etaler sur tout l'ecran - ce que ferait une grille
   a nombre de colonnes fixe.
   -------------------------------------------------------------------------- */
.iircf-grille-vue {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
}

/* LES ARRONDIS SONT REMIS ICI, et seulement ici.

   Une tuile de Domaine n en porte pas : sur la page d accueil elle appartient
   a une frise ou les tuiles se touchent, et des angles arrondis y laisseraient
   quatre encoches blanches a chaque jonction.

   Sur une page de LISTE, il n y a pas de frise : les cartes sont separees par
   une gouttiere, et c est alors l angle vif qui detonne. Le meme gabarit sert
   les deux contextes ; c est donc au conteneur de trancher, pas a la carte. */
.iircf-grille-vue > .views-row > article {
  border-radius: .5rem;
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   LES FILTRES D'UNE VUE.

   Drupal construit ces champs lui-meme : on ne peut pas leur passer de classe
   depuis un gabarit, d'ou des regles CSS plutot que des utilitaires Tailwind.

   L'apparence native d'un <select> change d'un systeme a l'autre - une fleche
   bleue sur Windows, grise sur macOS, absente sur certains Android. La fleche
   est donc dessinee en SVG dans le fond, et l'apparence native neutralisee.
   -------------------------------------------------------------------------- */
.iircf-filtres label {
  display: block;
  margin-bottom: .375rem;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 700;
  line-height: 16px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #44474d;
}

.iircf-filtres select,
.iircf-filtres input[type="text"],
.iircf-filtres input[type="search"] {
  width: 100%;
  padding: .625rem 2.25rem .625rem .75rem;
  border: 1px solid #c5c6ce;
  border-radius: .25rem;
  background-color: #fff;
  font-family: Inter, system-ui, sans-serif;
  font-size: 15px;
  line-height: 24px;
  color: #0b1c30;
  appearance: none;
  -webkit-appearance: none;
}

.iircf-filtres select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%2344474d' stroke-width='2'%3E%3Cpath d='M5 7.5 10 12.5 15 7.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .625rem center;
  background-size: 1.125rem;
}

.iircf-filtres select:hover {
  border-color: #75777e;
}

.iircf-filtres select:focus,
.iircf-filtres input:focus {
  border-color: #2258c3;
  outline: 2px solid #d28811;
  outline-offset: 2px;
}

/* Le bouton « Filtrer » doit ressembler aux autres boutons du site, et non a
   un bouton de formulaire administratif. */
.iircf-filtres input[type="submit"],
.iircf-filtres button[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .625rem 1.5rem;
  border: 0;
  border-radius: .25rem;
  background-color: #2258c3;
  color: #fff;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 20px;
  cursor: pointer;
  transition: background-color .15s ease;
}

.iircf-filtres input[type="submit"]:hover,
.iircf-filtres button[type="submit"]:hover {
  background-color: #0c1b33;
}

/* Le « Reinitialiser » de Views, quand il est active, reste un bouton : il
   est rendu discret pour ne pas concurrencer « Filtrer ». */
.iircf-filtres [id*="edit-reset"] {
  background-color: #e5eeff;
  color: #0b1c30;
}

.iircf-filtres [id*="edit-reset"]:hover {
  background-color: #dce9ff;
}

/* Drupal ajoute ses propres enveloppes autour de chaque champ ; elles ne
   doivent pas ajouter de marges par-dessus celles de la barre. */
.iircf-filtres .form-item,
.iircf-filtres .js-form-item {
  margin: 0;
}

/* ---------------------------------------------------------------------------
 * TEXTE FORMATE SUR FOND SOMBRE.
 *
 * « .champ-texte » fixe la couleur des titres et des liens en bleu nuit -
 * une valeur juste sur fond clair, invisible sur le panneau sombre du
 * « texte illustre ». La classe du parent ne peut rien y faire : ces regles
 * visent les elements eux-memes, et non ce qui les contient.
 * ------------------------------------------------------------------------- */
.champ-texte-clair h2,
.champ-texte-clair h3,
.champ-texte-clair h4,
.champ-texte-clair strong {
  color: #ffffff;
}
.champ-texte-clair a {
  color: #ffffff;
  text-decoration-color: rgba(255, 255, 255, 0.5);
}

/* ---------------------------------------------------------------------------
 * CARACTERISTIQUES D'UNE FICHE PROGRAMME.
 *
 * Quarante-sept fiches sur cinquante-trois n'ont qu'UNE caracteristique
 * renseignee. « auto-fit » etirerait alors cette unique colonne sur les
 * 1 280 px de la page, ce qui donnerait a une ligne l'allure d'un tableau
 * casse. « auto-fill » conserve les colonnes vides de la grille : l'entree
 * garde sa largeur, et le reste du rang demeure vide sans le paraitre.
 *
 * La regle est ici et non en classes utilitaires parce que Tailwind ne compile
 * pas de valeur arbitraire contenant une virgule et des parentheses imbriquees
 * de facon fiable.
 * ------------------------------------------------------------------------- */
.iircf-caracteristiques {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: 1.5rem 2rem;
}

/* ---------------------------------------------------------------------------
 * PAGES DE COMPTE.
 *
 * Les formulaires de Drupal - connexion, mot de passe oublie - sont rendus par
 * le coeur, sans une classe utilitaire : Tailwind ne peut rien pour eux, il ne
 * met en forme que ce qu'il lit dans les gabarits. D'ou ces regles, bornees au
 * conteneur « .iircf-auth ».
 * ------------------------------------------------------------------------- */
.iircf-auth .js-form-item {
  margin-top: 1.25rem;
}
.iircf-auth label {
  display: block;
  margin-bottom: 0.375rem;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #0b1c30;
}
.iircf-auth input[type='text'],
.iircf-auth input[type='password'],
.iircf-auth input[type='email'] {
  width: 100%;
  border: 1px solid #c5c6ce;
  border-radius: 0.375rem;
  padding: 0.625rem 0.75rem;
  font-size: 15px;
  color: #0b1c30;
  background: #ffffff;
}
.iircf-auth input[type='text']:focus,
.iircf-auth input[type='password']:focus,
.iircf-auth input[type='email']:focus {
  outline: 2px solid #d28811;
  outline-offset: 1px;
  border-color: #2258c3;
}
.iircf-auth .description {
  margin-top: 0.375rem;
  font-size: 13px;
  line-height: 1.45;
  color: #44474d;
}
.iircf-auth .form-actions {
  margin-top: 1.75rem;
}
.iircf-auth input[type='submit'] {
  width: 100%;
  border: 0;
  border-radius: 0.375rem;
  background: #2258c3;
  padding: 0.75rem 1rem;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: #ffffff;
  cursor: pointer;
  transition: background-color 0.15s;
}
.iircf-auth input[type='submit']:hover {
  background: #0c1b33;
}
/* Les liens « Mot de passe oublie » / « Se connecter » que Drupal pose sous
   le formulaire, sous forme d'onglets. Ils sont ramenes a une ligne de liens :
   des onglets dans une carte de connexion suggerent une navigation qui
   n'existe pas. */
.iircf-auth .tabs,
.iircf-auth ul.tabs {
  margin-top: 1.5rem;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  border-top: 1px solid rgba(197, 198, 206, 0.6);
  padding-top: 1rem;
}
.iircf-auth .tabs a {
  font-size: 13px;
  color: #2258c3;
  text-decoration: underline;
  text-underline-offset: 3px;
}