/**
 * Police « Montpellier » — police de marque de la Ville et Métropole.
 *
 * Fichiers récupérés le 2026-07-24 depuis le site des actes administratifs
 * (actes-administratifs-historique.montpellier.fr), qui embarque la fonte en
 * 7 graisses, chacune en romain et italique. Servie localement : aucun appel
 * à un tiers, et le site reste fidèle à la charte hors connexion au CDN.
 */

@font-face {
  font-family: Montpellier;
  src: url(../fonts/Montpellier-Thin.woff2) format("woff2");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Montpellier;
  src: url(../fonts/Montpellier-ThinItalic.woff2) format("woff2");
  font-weight: 100;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: Montpellier;
  src: url(../fonts/Montpellier-Light.woff2) format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Montpellier;
  src: url(../fonts/Montpellier-LightItalic.woff2) format("woff2");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: Montpellier;
  src: url(../fonts/Montpellier-Regular.woff2) format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Montpellier;
  src: url(../fonts/Montpellier-Italic.woff2) format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: Montpellier;
  src: url(../fonts/Montpellier-Medium.woff2) format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Montpellier;
  src: url(../fonts/Montpellier-MediumItalic.woff2) format("woff2");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: Montpellier;
  src: url(../fonts/Montpellier-Bold.woff2) format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Montpellier;
  src: url(../fonts/Montpellier-BoldItalic.woff2) format("woff2");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: Montpellier;
  src: url(../fonts/Montpellier-ExtraBold.woff2) format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Montpellier;
  src: url(../fonts/Montpellier-ExtraBoldItalic.woff2) format("woff2");
  font-weight: 800;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: Montpellier;
  src: url(../fonts/Montpellier-Heavy.woff2) format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Montpellier;
  src: url(../fonts/Montpellier-HeavyItalic.woff2) format("woff2");
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}

body {
  font-family: Montpellier, system-ui, sans-serif;
}

/* Tous les liens dans le bleu du pied de page (pagination comprise) ;
   l'en-tête et le pied, sur fond sombre, gardent leurs liens blancs. */
a {
  color: #093c9b;
}
/**
 * En-tête du site public : bandeau tramé, logo blanc, bouton Contact.
 *
 * Le fond est l'illustration de la newsroom passée au tramage ImageMagick
 * (`-ordered-dither h8x8a`, trame de 8 points orientée à 45°) puis remise en
 * deux tons de bleu (`+level-colors '#0E1D38','#1D4795'`) — la recette est
 * rejouable depuis `bandeau-newsroom.jpg` à la racine du dépôt.
 */

.newsroom-entete {
  background: #0e1d38 url(../images/header-fond.png) center / cover no-repeat;
}

/* Trois zones : logo | titre | contact. La grille 1fr auto 1fr garantit un
   titre réellement centré, quelle que soit la largeur du logo et du bouton. */
.newsroom-entete__contenu {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1.5rem;
  /* Pleine largeur, contrairement au contenu de la page et au pied : le logo
     va à l'extrême gauche et les boutons à l'extrême droite. Seul le padding
     latéral les tient à distance du bord de la fenêtre. La grille 1fr auto 1fr
     garde malgré tout le titre centré sur la fenêtre entière. */
  /* 10px de respiration en plus, demandés par le service presse le 21/08/2026. */
  padding: calc(1.4rem + 10px) 1.5rem;
}

.newsroom-entete__titre {
  color: #fff;
  font-size: 2.3rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  line-height: 1.2;
  text-align: center;
  text-transform: uppercase;
}

/* Accueil seulement : le bloc de titre respire davantage, ce qui grandit
   d'autant le bandeau. Le padding est posé sur le titre — pas sur le
   conteneur — pour que le logo et les boutons restent centrés sur lui.
   Les autres pages gardent la hauteur d'origine. */
.path-frontpage .newsroom-entete__titre {
  padding-block: 3.75rem;
}

/* Le bandeau de l'accueil étant plus haut, seuls le titre reste centré : le
   logo et les deux boutons remontent en partie haute plutôt que de flotter au
   milieu. `align-items: center` du conteneur ne s'applique donc qu'au titre. */
.path-frontpage .newsroom-entete__logo,
.path-frontpage .newsroom-entete__actions {
  align-self: start;
}

.newsroom-entete__sous-titre {
  display: block;
  margin-block-start: 0.15rem;
  color: #d6e4fe;
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

.newsroom-entete__logo {
  display: block;
  justify-self: start;
  line-height: 0;
}

.newsroom-entete__logo img {
  block-size: 58px;
  inline-size: auto;
}

.newsroom-entete__actions {
  justify-self: end;
  display: flex;
  gap: 0.75rem;
}

/* Pastilles rondes à picto (recherche, contact) ; le libellé reste porté
   par aria-label et title. */
.newsroom-entete__rond {
  display: grid;
  place-items: center;
  inline-size: 48px;
  block-size: 48px;
  border-radius: 50%;
  background: #fff;
  color: #0e1d38;
  text-decoration: none;
}

.newsroom-entete__rond:hover,
.newsroom-entete__rond:focus {
  background: #e9f0fe;
  color: #0e1d38;
}

/**
 * Bandeau en version mobile (sous 700px).
 *
 * La grille « logo | titre | boutons » du bureau ne tient pas ici : elle ne
 * laissait que 160px au titre sur un écran de 485px, d'où un titre sur deux
 * lignes et un sous-titre sur trois, collés au logo. On repasse au schéma
 * classique des barres d'application : logo et boutons sur une ligne, titre
 * centré sur la suivante, pleine largeur.
 *
 * ⚠️ Le bandeau est IDENTIQUE sur toutes les pages en mobile : les règles
 * `.path-frontpage` du bureau (titre plus aéré, logo et boutons remontés)
 * sont neutralisées ici — demande explicite, pas d'accueil à part.
 */
@media (max-width: 700px) {
  .newsroom-entete__contenu {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "logo actions"
      "titre titre";
    align-items: center;
    gap: 1.5rem 1rem;
    /* Calibré pour un bandeau d'environ 200px sur un écran de téléphone :
       assez pour laisser voir la photo tramée, assez peu pour que la première
       carte soit amorcée dès le premier écran. */
    padding-block: 1.25rem;
  }

  .newsroom-entete__logo {
    grid-area: logo;
  }

  .newsroom-entete__actions {
    grid-area: actions;
  }

  .newsroom-entete__titre {
    grid-area: titre;
    font-size: 1.5rem;
    /* Centré comme sur le bureau (revirement du 21/08 : le ferrage à gauche
       avait d'abord été retenu). Le titre occupant les deux colonnes, il se
       centre sur la largeur entière de l'écran, pas sur l'espace résiduel. */
    text-align: center;
  }

  .newsroom-entete__logo img {
    block-size: 44px;
  }

  /* Pastilles un peu plus discrètes en mobile. On reste à 40px : au-dessus du
     minimum WCAG 2.2 (24px), un peu en deçà des 44px conseillés par Apple —
     descendre davantage rendrait la cible désagréable au doigt. */
  .newsroom-entete__rond {
    inline-size: 40px;
    block-size: 40px;
  }

  .newsroom-entete__rond svg {
    inline-size: 19px;
    block-size: 19px;
  }

  /* Le sous-titre est retiré en mobile : « Montpellier, Métropole et Ville »
     est déjà écrit dans le logo juste au-dessus, et il coûtait une ligne sur
     une largeur comptée. L'information reste portée par l'alt du logo. */
  .newsroom-entete__sous-titre {
    display: none;
  }

  /* Neutralisation des règles propres à l'accueil : même bandeau partout. */
  .path-frontpage .newsroom-entete__titre {
    padding-block: 0;
  }

  .path-frontpage .newsroom-entete__logo,
  .path-frontpage .newsroom-entete__actions {
    align-self: center;
  }
}
/**
 * Pied de page du site public : bleu foncé uni, écritures blanches.
 * Même bleu que la valeur sombre du bandeau tramé de l'en-tête.
 */

.newsroom-pied {
  /* Collé au bas de la fenêtre : avec le défilement infini de l'accueil,
     il resterait sinon hors d'atteinte. */
  position: sticky;
  inset-block-end: 0;
  z-index: 10;
  /* Plus clair que le ton sombre du bandeau : #0e1d38 passait pour du noir. */
  background: #093c9b;
  color: #fff;
}

.newsroom-pied__contenu {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  max-inline-size: 75rem;
  margin-inline: auto;
  padding: 1.2rem 1.5rem;
  font-size: 0.9rem;
}

.newsroom-pied__liens {
  display: flex;
  gap: 1.5rem;
}

.newsroom-pied__lien {
  color: #fff;
}

.newsroom-pied__lien:hover,
.newsroom-pied__lien:focus {
  color: #d6e4fe;
}
/**
 * Mise en page générale : la zone principale de contenu est centrée et
 * bornée à 1440px ; l'en-tête et le pied restent pleine largeur.
 */

/* Bouton de retour, affiché seulement sur une publication ouverte. */
.newsroom-retour {
  display: inline-block;
  margin-block-start: 1.5rem;
  padding: 0.45rem 1.1rem;
  border: 1px solid #d1d5db;
  border-radius: 999px;
  background: #fff;
  color: #093c9b;
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: none;
}

.newsroom-retour:hover,
.newsroom-retour:focus {
  border-color: #093c9b;
  color: #093c9b;
}

/* L'enveloppe couvre menus, mises en avant ET main : la borne vaut pour
   toute page, pas seulement l'accueil. */
.zone-contenu {
  max-inline-size: 1440px;
  margin-inline: auto;
  /* Respiration latérale quand la fenêtre est plus étroite que la borne. */
  padding-inline: 1.5rem;
}

/**
 * Accueil : grille de cartes de publications, dans l'esprit des cartes de
 * mpt.montpellier.fr/activites — carte blanche arrondie, image en tête,
 * catégorie en petites capitales colorées, titre gras, ombre au survol.
 * La publication à la une (classe views-row--une posée par la vue) occupe
 * 2 colonnes et s'affiche en grand.
 */

.grille-cartes .view-content {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  /* La première rangée (la une) prend la hauteur de son contenu — son
     titre s'affiche en entier ; les rangées suivantes restent toutes à la
     même hauteur pour garder la liste uniforme (titres bornés). */
  grid-template-rows: auto;
  grid-auto-rows: 1fr;
  gap: 1.75rem;
  padding-block: 2rem;
}

.grille-cartes .views-row,
/* views_infinite_scroll intercale son propre conteneur entre la grille et
   les rangées : rendu transparent, sinon la grille ne voit qu'un enfant
   et tout s'empile dans la première colonne. */
.grille-cartes .views-infinite-scroll-content-wrapper {
  display: contents;
}

.carte {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #d2dae8;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(14, 29, 56, 0.12);
  color: inherit;
  text-decoration: none;
  transition: box-shadow 0.15s ease, translate 0.15s ease;
}

.carte:hover,
.carte:focus {
  box-shadow: 0 10px 28px rgba(14, 29, 56, 0.22);
  translate: 0 -3px;
}

/* Hauteur d'image FIXE : avec ou sans visuel, quel que soit son format,
   la zone occupe la même place et la liste reste alignée. Sans visuel, le
   logo Métropole et Ville (décliné dans le bleu du pied) tient lieu
   d'image par défaut — une vraie image le recouvre entièrement. */
.carte__image {
  block-size: 180px;
  flex: none;
  background: #e9f0fe url(../images/logo-metropole-ville-bleu.svg) center / auto 45% no-repeat;
}

.carte__image img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  display: block;
}

.carte__corps {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1;
  padding: 1.1rem 1.25rem 1.25rem;
}

/* Ligne d'entête de carte : la date à gauche, le type ferré à droite.
   `space-between` sur deux enfants suffit ; s'il n'y a pas de type (le champ
   est facultatif), la date reste seule et alignée à gauche. Les cartes de la
   recherche, pleine largeur, dérogent à cette règle plus bas. */
.carte__meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
}

.carte__type {
  margin: 0;
  text-align: right;
  color: #093c9b;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.carte__titre {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.3;
}

.carte__date {
  margin: 0;
  color: #6b7280;
  font-size: 0.85rem;
  /* La date ne se coupe jamais : c'est au type, plus long (« Déclaration /
     Discours »), de passer à la ligne quand la place manque. */
  flex: none;
  white-space: nowrap;
}

/* « Lire » est un bouton plein, pas un simple libellé : en bleu inversé il ne
   se confond plus avec le type de document, qui est lui aussi en bleu et en
   capitales dans l'entête de la carte. La marge haute `auto` continue de le
   plaquer au bas de la carte, quelle que soit la longueur du titre. */
.carte__suite {
  margin-block-start: auto;
  align-self: flex-end;
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  background: #093c9b;
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: background 0.15s ease;
}

.carte:hover .carte__suite,
.carte:focus .carte__suite {
  background: #06297a;
}

/* La une : sa propre rangée pleine largeur en tête de liste, en format
   paysage — l'image à gauche remplit toute la hauteur de la carte. */
.grille-cartes .views-row--une .carte {
  grid-column: 1 / -1;
  flex-direction: row;
  /* Ombre pleine (sans flou) bleue, décalée vers le bas-droite ;
     la marge basse rend à la grille les 10px que l'ombre déborde. */
  box-shadow: 10px 10px 0 #093c9b;
  margin-block-end: 10px;
}

/* L'image de la une n'a pas de hauteur imposée : elle s'étire sur la hauteur
   de la carte, et c'est son propre format qui la fixe quand il dépasse. Un
   visuel en portrait poussait ainsi la carte à plus de 800px de haut pour un
   titre qui en demandait 300. Le plafond ramène ces cas-là dans la fourchette
   des visuels en paysage, qui donnent naturellement 420 à 470px : toutes les
   unes se ressemblent, quel que soit le format reçu. Au-delà du plafond,
   l'image est rognée par le `overflow: hidden` de la carte. */
.grille-cartes .views-row--une .carte__image {
  flex: 0 0 55%;
  block-size: auto;
  min-block-size: 320px;
  max-block-size: 28rem;
}

/* La une se distingue aussi par son titre COMPLET : pas de bornage ni
   de « … », contrairement aux autres cartes. */
.grille-cartes .views-row--une .carte__titre {
  display: block;
  -webkit-line-clamp: none;
  overflow: visible;
  font-size: 1.8rem;
}

.grille-cartes .views-row--une .carte__corps {
  justify-content: center;
  padding: 1.75rem 2rem;
}

/* Rangées de 4, puis 3, 2 et 1 selon la largeur du navigateur. */
@media (max-width: 80rem) {
  .grille-cartes .view-content {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 60rem) {
  .grille-cartes .view-content {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 700px) {
  .grille-cartes .view-content {
    grid-template-columns: 1fr;
  }

  /* Une seule colonne : la une reprend le format vertical des autres. */
  .grille-cartes .views-row--une .carte {
    flex-direction: column;
  }

  .grille-cartes .views-row--une .carte__image {
    flex: none;
    block-size: 180px;
    min-block-size: 0;
  }

  /* Sur une seule colonne, la une n'a plus de raison d'avoir un titre plus
     gros que ses voisines : on revient à la valeur de `.carte__titre`. */
  .grille-cartes .views-row--une .carte__titre {
    font-size: 1.15rem;
  }
}

/**
 * Recherche (/recherche) : mêmes cartes que l'accueil, une par ligne, en
 * format paysage. Le à la une y est un résultat comme les autres.
 */

.liste-cartes .view-content {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding-block: 1rem 2rem;
}

.liste-cartes .carte {
  flex-direction: row;
}

.liste-cartes .carte__image {
  flex: 0 0 280px;
  block-size: 170px;
}

.liste-cartes .carte__corps {
  justify-content: center;
}

.liste-cartes .carte__titre {
  -webkit-line-clamp: 2;
}

/* Ces cartes-ci occupent toute la largeur : ferrer le type à droite le
   reléguerait loin de la date, à l'autre bout de la ligne. Il la suit donc
   directement, les deux informations se lisant d'un seul tenant. */
.liste-cartes .carte__meta {
  justify-content: flex-start;
}

.liste-cartes .carte__type {
  text-align: start;
}

@media (max-width: 700px) {
  .liste-cartes .carte {
    flex-direction: column;
  }

  .liste-cartes .carte__image {
    flex: none;
    block-size: 180px;
  }
}

/* Barre de filtres de la recherche publique. Views emballe les filtres dans
   un conteneur .form--inline que le cœur met en flottants (d'où champs
   décalés et bouton rejeté à la ligne par le clearfix) : on le passe en
   flex et on neutralise les floats — recherche, dates et bouton s'alignent
   sur une même ligne. */
.liste-cartes .views-exposed-form {
  margin-block: 1.5rem 0.5rem;
}

.liste-cartes .views-exposed-form .form--inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}

.liste-cartes .views-exposed-form .form--inline .form-item,
.liste-cartes .views-exposed-form .form--inline .form-actions {
  float: none;
  margin: 0;
}

.liste-cartes .views-exposed-form input[type='text'],
.liste-cartes .views-exposed-form input[type='date'] {
  /* Même raison que pour le formulaire de contact : sans border-box, le
     rembourrage s'ajoute à `max-inline-size: 100%` et le champ déborde de
     31px sur un écran étroit. */
  box-sizing: border-box;
  padding: 0.6rem 0.9rem;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font: inherit;
}

.liste-cartes .views-exposed-form input[name='recherche'] {
  /* 24rem en border-box = les 383px que faisait le champ en content-box :
     l'aspect sur grand écran ne bouge pas. */
  inline-size: 24rem;
  max-inline-size: 100%;
}

.liste-cartes .views-exposed-form input[type='submit'] {
  padding: 0.6rem 1.6rem;
  border: 0;
  border-radius: 999px;
  background: #093c9b;
  color: #fff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.liste-cartes .views-exposed-form input[type='submit']:hover {
  background: #2b4c8a;
}

/* Le calendrier de période : la CSS du module newsroom_core cible les
   classes de Claro (.fieldset, .fieldset__wrapper), absentes du thème
   public — on refait ici le même camouflage avec le markup du cœur :
   le fieldset s'efface, les bornes natives Du/Au se cachent au profit du
   champ flatpickr, et le bouton d'effacement retrouve son ancrage. */
.liste-cartes fieldset.newsroom-date-range {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}

.liste-cartes .newsroom-date-range legend,
.liste-cartes .newsroom-date-range .fieldset-wrapper > .js-form-item,
.liste-cartes .newsroom-date-range .fieldset__wrapper {
  display: none;
}

.liste-cartes .newsroom-date-range .newsroom-date-range__input {
  inline-size: 16rem;
  padding-inline-end: 2.25rem;
}

.liste-cartes .newsroom-date-range__clear {
  position: absolute;
  inset-inline-end: 0.5rem;
  border: 0;
  background: none;
  font-size: 1rem;
  cursor: pointer;
  color: #6b7280;
}

/* Sur mobile, la barre de filtres passe en colonne. Le `max-inline-size: 100%`
   du champ de recherche ne suffisait pas : dans un conteneur flex, le
   `min-inline-size: auto` implicite empêche l'élément de descendre sous ses
   24rem, et le champ débordait de l'écran. On lève ce plancher et chaque
   filtre prend toute la largeur disponible. */
@media (max-width: 700px) {
  .liste-cartes .views-exposed-form .form--inline > * {
    min-inline-size: 0;
    inline-size: 100%;
  }

  .liste-cartes .views-exposed-form input[name='recherche'],
  .liste-cartes fieldset.newsroom-date-range,
  .liste-cartes .newsroom-date-range .newsroom-date-range__input {
    inline-size: 100%;
  }
}

/**
 * Publication ouverte. Les styles en ligne du gabarit des mails sont
 * retirés À LA SOURCE (importeur newsroom_presse + commande
 * `drush newsroom:nettoyer-styles`) : aucune surcharge nécessaire ici,
 * le contenu hérite naturellement du style du site.
 */

.node {
  line-height: 1.65;
}

/* Exception : une publication ouverte se lit dans une colonne plus étroite. */
.zone-contenu--publication {
  max-inline-size: 1200px;
}

/* Pages de compte (/user/*) : quelques champs et deux phrases. L'enveloppe
   commune, bornée à 1440px, les laissait flotter dans le vide sur un grand
   écran — on la resserre. Le centrage vient du `margin-inline: auto` déjà
   posé sur `.zone-contenu`. */
.zone-contenu--compte {
  max-inline-size: 1000px;
}

/* Titre d'une page de base. */
.page__titre {
  margin-block: 1.75rem 1rem;
  font-size: 1.8rem;
  font-weight: 800;
  line-height: 1.3;
}

/* Le titre du corps, promu en h1 à l'import. */
.node__content h1 {
  margin-block: 0 1.25rem;
  font-size: 1.8rem;
  font-weight: 800;
  line-height: 1.3;
}

/* Type et date remontés en tête, chartés comme sur les cartes. */
.publication__entete {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  margin-block: 1.75rem 1.25rem;
}

/**
 * Formulaires publics : le formulaire de contact ET les pages de compte
 * (/user/login, /user/password, page d'atterrissage du lien de
 * réinitialisation). Tous portent la classe `formulaire-public`, posée par
 * newsroom_public.theme — d'où une seule mise en forme pour les quatre.
 */

.formulaire-public {
  max-inline-size: 44rem;
  margin-block: 2rem 2.5rem;
}

.formulaire-public .form-item {
  margin-block: 0 1.1rem;
}

.formulaire-public label {
  display: block;
  margin-block-end: 0.3rem;
  font-size: 0.9rem;
  font-weight: 700;
  color: #093c9b;
}

.formulaire-public input[type='text'],
.formulaire-public input[type='email'],
.formulaire-public input[type='password'],
.formulaire-public textarea {
  /* Indispensable avec `inline-size: 100%` : sans lui, le rembourrage et la
     bordure s'AJOUTENT à la largeur du conteneur et le champ déborde de 31px.
     Le textarea y échappait déjà, il tient son border-box du starterkit. */
  box-sizing: border-box;
  inline-size: 100%;
  padding: 0.6rem 0.9rem;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font: inherit;
}

/* Le module CAPTCHA emballe son champ dans un `fieldset`, dont le navigateur
   dessine la bordure en relief, la légende et les rembourrages : un cadre qui
   décale la saisie par rapport aux autres champs et jure avec la sobriété du
   reste du formulaire. On efface le cadre pour que le captcha se présente
   comme un champ ordinaire ; l'espacement sous lui vient du `.form-item`
   intérieur, identique à celui des autres. `min-inline-size` est remis à zéro
   car les fieldsets refusent par défaut de descendre sous leur contenu, ce qui
   déborderait sur un écran étroit. */
.formulaire-public .captcha {
  margin: 0;
  padding: 0;
  border: 0;
  min-inline-size: 0;
}

/* Le bouton « nouveau captcha » (une icône de rechargement) est rangé par le
   module SOUS l'image, où il flotte sans attache : on passe son conteneur en
   ligne pour l'amener à droite de l'image, centré sur sa hauteur.
   `--image-width` mesure la colonne de gauche : le module la calibre sur la
   seule image (150px) et s'en sert AUSSI pour dimensionner le champ de
   saisie à droite. On la porte à 220px pour y loger l'icône — sans quoi la
   colonne déborde, le champ ne tient plus à côté et retombe sous l'image.
   L'image y gagne au passage ses 180px d'origine, sans réduction. */
.formulaire-public .captcha-type-challenge--image {
  --image-width: 220px;
}

.formulaire-public .captcha__image-wrapper {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.formulaire-public .captcha__image-wrapper img {
  margin-block-end: 0;
}

/* Captcha : trois textes sont masqués — la légende « CAPTCHA » du fieldset,
   la consigne « Saisir les caractères affichés dans l'image. » et le
   paragraphe expliquant à quoi sert la question. Le libellé au-dessus du
   champ suffit à l'écran.
   ⚠️ Masquage VISUEL seulement, jamais `display: none` : le champ pointe vers
   la consigne par `aria-describedby` et la légende nomme le groupe, elles
   doivent rester lisibles aux lecteurs d'écran. Vaut à toutes les largeurs
   (demande du 21/08). */
.formulaire-public .captcha__title,
.formulaire-public .captcha .description,
.formulaire-public .captcha__description {
  position: absolute;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  inline-size: 1px;
  block-size: 1px;
  white-space: nowrap;
}

.formulaire-public input[type='submit'] {
  padding: 0.65rem 1.8rem;
  border: 0;
  border-radius: 999px;
  background: #093c9b;
  color: #fff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.formulaire-public input[type='submit']:hover {
  background: #2b4c8a;
}

/* --- pages de compte (/user/*) ------------------------------------------
   Le formulaire de contact vit dans un nœud, qui lui donne son titre et sa
   respiration. Les pages de compte n'ont ni l'un ni l'autre : le formulaire
   s'ouvrait collé sous l'en-tête. On leur rend la même marge haute que le
   titre d'une page de base. */
.formulaire-public.user-login-form,
.formulaire-public.user-pass,
.formulaire-public.user-pass-reset {
  margin-block-start: 1.5rem;
}

/* Le cœur rend ses consignes tantôt en `.description` sous le champ, tantôt
   en paragraphes libres (page du lien de réinitialisation) : les deux se
   lisent comme du texte d'aide, pas comme du contenu. */
.formulaire-public .description,
.formulaire-public > p {
  margin-block: 0.35rem 0;
  color: #4b5563;
  font-size: 0.9rem;
  line-height: 1.5;
}

.formulaire-public > p {
  max-inline-size: 44rem;
  margin-block: 0 0.75rem;
}

.formulaire-public .form-actions {
  margin-block-start: 1.5rem;
}

/* Le widget « mot de passe + confirmation » du cœur.
   ⚠️ La feuille du starterkit (css/components/user.css, copiée du cœur) fixe
   `width: 55%` sur les champs et `max-width: 33em` sur leurs conteneurs :
   deux champs étroits et désalignés au milieu d'un formulaire dont tous les
   autres font 100 %. Nos sélecteurs sont plus spécifiques (classe + attribut
   contre classe seule), ils l'emportent sans `!important` — mais ne pas
   retirer les règles ci-dessous en croyant qu'elles ne servent à rien. */
/* Le libellé du groupe (« Nouveau mot de passe ») redit le titre de la page,
   juste au-dessus d'un champ qui s'appelle déjà « Mot de passe ». Masqué à
   l'écran — visuellement seulement, jamais `display: none` : il nomme le
   groupe pour les lecteurs d'écran, comme la légende du captcha. */
.formulaire-public .form-type-password-confirm > label {
  position: absolute;
  overflow: hidden;
  clip-path: inset(50%);
  inline-size: 1px;
  block-size: 1px;
  white-space: nowrap;
}

.formulaire-public .password-parent,
.formulaire-public .confirm-parent {
  max-inline-size: none;
  margin-block-end: 1.1rem;
}

.formulaire-public .password-field,
.formulaire-public .password-confirm,
.formulaire-public .password-strength,
.formulaire-public .password-confirm-message {
  inline-size: 100%;
}

/* Jauge de solidité : un filet fin sous le champ plutôt que la barre épaisse
   par défaut, dans les coins arrondis du reste du formulaire. */
.formulaire-public .password-strength {
  margin-block-start: 0.5rem;
  font-size: 0.85rem;
  color: #4b5563;
}

.formulaire-public .password-strength__meter {
  overflow: hidden;
  block-size: 4px;
  margin-block-end: 0.35rem;
  border-radius: 999px;
  background: #e5e7eb;
}

.formulaire-public .password-confirm-message {
  margin-block-start: 0.35rem;
  font-size: 0.85rem;
  color: #4b5563;
}

/* Les suggestions du cœur arrivent dans un cadre gris à angles vifs : on le
   ramène à l'encadré discret des autres aides. */
.formulaire-public .password-suggestions {
  max-inline-size: none;
  margin-block: 0 1.1rem;
  padding: 0.75rem 1rem;
  border: 1px solid #dbe3f0;
  border-radius: 8px;
  background: #f5f8ff;
  font-size: 0.9rem;
  color: #374151;
}

.formulaire-public .password-suggestions ul {
  margin: 0.35rem 0 0;
  padding-inline-start: 1.1rem;
}

/* Onglets « Se connecter / Réinitialiser votre mot de passe » : le cœur les
   rend en liste à puces brute au-dessus du formulaire. */
.zone-contenu .tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  margin-block: 1.25rem 0;
  padding: 0;
  list-style: none;
  border: 0;
}

.zone-contenu .tabs a {
  padding-block-end: 0.35rem;
  border-block-end: 2px solid transparent;
  color: #4b5563;
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: none;
}

/* ⚠️ Le cœur pose « is-active » sur le <li>, pas sur le lien. */
.zone-contenu .tabs li.is-active > a,
.zone-contenu .tabs a.is-active {
  border-block-end-color: #093c9b;
  color: #093c9b;
}

/* Le titre « Onglets principaux » que le cœur pose au-dessus de la liste :
   utile aux lecteurs d'écran, redondant à l'écran juste sous le titre de la
   page. Masquage visuel seulement, comme pour les textes du captcha. */
.zone-contenu .tabs-title,
.zone-contenu nav[aria-label] > h2 {
  position: absolute;
  overflow: hidden;
  clip-path: inset(50%);
  inline-size: 1px;
  block-size: 1px;
  white-space: nowrap;
}

/* --- modale de confirmation du formulaire de contact ---------------------
   Webform affiche la confirmation dans une boîte jQuery UI, qui arrive avec
   toute la quincaillerie du thème « base » : bandeau beige, angles vifs,
   bordure grise, croix en sprite et voile presque transparent. On la ramène
   dans la charte du site.

   ⚠️ Spécificité : `newsroom.css` est chargée AVANT les feuilles de jQuery UI
   (poids -20 contre -10). À égalité de spécificité, c'est le cœur qui gagne —
   d'où le double `.ui-dialog.webform-confirmation-modal` en tête de chaque
   règle, qui passe devant `.ui-dialog .ui-dialog-*`. Ne pas simplifier. */

/* Le voile du cœur est un gris à 30 % qui ne détache pas la modale du fond. */
.ui-widget-overlay.ui-front {
  background: #0e1d38;
  opacity: 0.45;
}

.ui-dialog.webform-confirmation-modal {
  /* jQuery UI fixe la largeur en style en ligne ; on se contente de la borner
     pour les petits écrans. */
  max-inline-size: calc(100vw - 2rem);
  padding: 0;
  border: 0;
  border-radius: 14px;
  /* `overflow` pour que le rayon rogne bien l'entête et le contenu. */
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(14, 29, 56, 0.28);
}

/* Entête : plus de bandeau beige, et le contenu passe en flex pour aligner
   la pastille, le titre et la croix sur une même ligne. */
.ui-dialog.webform-confirmation-modal .ui-dialog-titlebar {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 1.5rem 1.5rem 0;
  border: 0;
  border-radius: 0;
  background: none;
}

/* Pastille ronde à coche, dans le même esprit que les cartes de la page
   Contact (.contact-choix__picto). Tracé « check » de Feather, licence MIT,
   embarqué en data-URI : le site ne charge rien d'un tiers. */
.ui-dialog.webform-confirmation-modal .ui-dialog-titlebar::before {
  content: '';
  flex: none;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  border-radius: 50%;
  background: #093c9b url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") no-repeat center / 1.25rem;
}

/* jQuery UI fait flotter son titre à gauche et lui impose une largeur : deux
   réglages à défaire pour qu'il se place en flex. */
.ui-dialog.webform-confirmation-modal .ui-dialog-title {
  float: none;
  inline-size: auto;
  margin: 0;
  font-size: 1.3rem;
  font-weight: 800;
  line-height: 1.25;
  color: #111827;
}

.ui-dialog.webform-confirmation-modal .ui-dialog-content {
  padding: 1rem 1.5rem 1.75rem;
  color: #374151;
  line-height: 1.6;
}

.ui-dialog.webform-confirmation-modal .ui-dialog-content p {
  margin: 0 0 0.6rem;
}

.ui-dialog.webform-confirmation-modal .ui-dialog-content p:last-child {
  margin-block-end: 0;
}

/* La croix : le cœur la positionne en absolu et la dessine avec un sprite
   PNG. On la sort du flux absolu pour la laisser au bout de la ligne flex, et
   on remplace le sprite par une croix vectorielle. */
.ui-dialog.webform-confirmation-modal .ui-dialog-titlebar-close {
  position: static;
  flex: none;
  margin: 0 0 0 auto;
  inline-size: 2rem;
  block-size: 2rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #eef2fb no-repeat center / 0.85rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23093c9b' stroke-width='2.5' stroke-linecap='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E");
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.ui-dialog.webform-confirmation-modal .ui-dialog-titlebar-close:hover {
  background-color: #dbe3f7;
}

/* jQuery UI donne le focus à la croix dès l'ouverture : le halo est donc
   toujours visible, autant qu'il épouse le rond. `outline` suit le
   `border-radius` dans les navigateurs actuels, contrairement à une bordure. */
.ui-dialog.webform-confirmation-modal .ui-dialog-titlebar-close:focus-visible {
  outline: 2px solid #093c9b;
  outline-offset: 2px;
}

/* Le sprite du cœur, remplacé ci-dessus, n'a plus lieu d'être — mais le
   `span` porte le libellé accessible du bouton : on le masque visuellement,
   jamais en `display: none`. */
.ui-dialog.webform-confirmation-modal .ui-dialog-titlebar-close .ui-icon {
  position: absolute;
  overflow: hidden;
  clip-path: inset(50%);
  inline-size: 1px;
  block-size: 1px;
  background-image: none;
  text-indent: 0;
}

/* Page Contact : les deux canaux présentés en cartes à picto. */
.contact-choix {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  margin-block: 1.75rem 0.5rem;
}

.contact-choix__carte {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
  min-inline-size: 16rem;
  padding: 1.25rem 1.5rem;
  border: 1px solid #d2dae8;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(14, 29, 56, 0.12);
  color: inherit;
  text-decoration: none;
}

a.contact-choix__carte:hover {
  box-shadow: 0 10px 28px rgba(14, 29, 56, 0.22);
  translate: 0 -3px;
  transition: box-shadow 0.15s ease, translate 0.15s ease;
}

.contact-choix__picto {
  display: grid;
  place-items: center;
  inline-size: 48px;
  block-size: 48px;
  margin-block-end: 0.4rem;
  border-radius: 50%;
  background: #093c9b;
  color: #fff;
}

.contact-choix__detail {
  color: #6b7280;
  font-size: 0.9rem;
}