/* Surcouche ANSSN sur le template Gencio (accueil, phase maquette / données fictives).
   Ne modifie pas style.css : ajoute uniquement les ajustements nécessaires à la cohérence institutionnelle. */

/* ---------------------------------------------------------------------------
   1. Couleurs de marque, relevées sur la BANDE tricolore du logo :
     — vert   #236F53
     — or     #FFCD18
     — rouge  #CB273A

   Le relevé porte sur la bande et non sur l'atome : les orbites sont en
   dégradé, chaque point y donne une teinte différente, et la couleur qu'on
   en tire dépend de l'endroit où l'on pique. La bande, elle, est en aplat —
   c'est la seule référence stable du logo. Un premier jeu de valeurs avait
   été pris sur les orbites : il donnait un vert trop sombre et un or faux.
   Le vert porte l'identité (boutons, titres, survols) ; l'or et le rouge
   n'interviennent qu'en accent — filet tricolore, soulignés, ponctuations —
   pour que l'appartenance nationale se lise sans noyer la hiérarchie.

   La variable --tp-theme-vogue du template est réutilisée : tout ce qui la
   référence déjà bascule automatiquement sur le vert institutionnel. Les noms
   --anssn-brand-* sont conservés, eux aussi repointés, pour ne pas avoir à
   reprendre les centaines de règles écrites avant le changement de logo.
   --------------------------------------------------------------------------- */
:root {
  --anssn-vert: #236f53;
  --anssn-vert-fonce: #174836;
  --anssn-vert-clair: #e9f1ee;
  --anssn-or: #ffcd18;
  /* Texte et pictogrammes posés SUR le jaune : jamais du blanc (1,5:1). */
  --anssn-sur-or: #2a2203;
  --anssn-rouge: #cb273a;
  /* Orange de transition, relevé sur le dégradé des orbites : sert de teinte
     intermédiaire dans les dégradés tricolores. */
  --anssn-orange: #e2752a;

  --tp-theme-vogue: var(--anssn-vert);
  --anssn-brand-dark: var(--anssn-vert-fonce);
  --anssn-brand-light: var(--anssn-vert-clair);

  /* Filet tricolore réutilisé en plusieurs endroits (en-tête, pied de page,
     cartouches) : défini une fois, appliqué via background-image. */
  --anssn-filet-togo: linear-gradient(90deg,
    var(--anssn-vert) 0%, var(--anssn-vert) 33.33%,
    var(--anssn-or) 33.33%, var(--anssn-or) 66.66%,
    var(--anssn-rouge) 66.66%, var(--anssn-rouge) 100%);
}

/* Boutons et éléments en dégradé multicolore (violet/rose) du template,
   ramenés à un dégradé vert monochrome cohérent avec le logo. */
.tp-grd-btn {
  background-image: linear-gradient(100deg, var(--tp-theme-vogue) 9.94%, var(--anssn-brand-dark) 95.56%);
}

.da-service__counter {
  background-image: none;
  background-color: var(--tp-theme-vogue);
}

.da-service__list-box ul li span i,
.tp-section__title span,
.cd-words-wrapper b,
.da-hero-section__title .cd-words-wrapper b {
  background-image: none;
  -webkit-text-fill-color: var(--tp-theme-vogue);
  color: var(--tp-theme-vogue);
}

.da-feature-item-top span i {
  color: var(--tp-theme-vogue);
}

/* ---------------------------------------------------------------------------
   2. Logo
   --------------------------------------------------------------------------- */
/* Le logo occupe la hauteur d'un en-tête institutionnel : c'est l'emblème de
   l'État qui identifie le site, pas une marque d'appoint. La barre de
   navigation ayant sa propre ligne (voir section 3), cette hauteur ne
   contraint plus le nombre de rubriques affichables.

   Deux déclinaisons officielles, chacune là où sa proportion sert :

     HORIZONTALE (2,91:1) en-tête. Une barre a de la largeur et peu de
                          hauteur ; c'est la seule des deux où le sigle reste
                          grand sans faire grandir l'en-tête.
     VERTICALE   (0,97:1) pied de page, tiroir mobile, connexion interne —
                          trois surfaces étroites, où c'est la hauteur qui est
                          disponible.

   Hauteurs : dans l'horizontale, le mot ANSSN occupe le quart de la hauteur,
   contre un cinquième dans la verticale, et la baseline y est deux fois plus
   grande. 70 px en en-tête donnent donc un sigle de 18 px pour 204 px de
   large — mieux lisible que les 92 px qu'exigeait la verticale, et plus
   compact. */
.anssn-logo img {
  height: 70px;
  width: auto;
}

.anssn-offcanvas-logo img {
  height: 78px;
  width: auto;
}

/* Le pied de page reçoit la verticale : la colonne fait 300 px de large et
   n'a pas de contrainte de hauteur, c'est l'inverse de l'en-tête. */
.anssn-footer-logo img {
  height: 96px;
  width: auto;
}

/* ---------------------------------------------------------------------------
   2 bis. Fil d'actualité défilant
   ---------------------------------------------------------------------------
   Le bandeau porte plus d'une annonce : plutôt que de les empiler ou d'en
   sacrifier, elles défilent horizontalement en continu. La bande est dupliquée
   à l'identique (aria-hidden sur la copie) et l'animation la translate d'une
   largeur exactement : la boucle se referme sans saut visible.
   --------------------------------------------------------------------------- */
.anssn-ticker {
  font-size: 14px;
  overflow: hidden;
  padding: 9px 0;
}

.anssn-ticker a {
  color: #fff;
}

.anssn-ticker a:hover {
  color: #fff;
  opacity: .85;
}

.anssn-ticker__piste {
  display: flex;
  width: max-content;
  animation: anssn-defilement 45s linear infinite;
}

/* Le défilement s'interrompt au survol et à la prise de focus clavier :
   sans cela, un lien du fil serait impossible à viser ou à lire. */
.anssn-ticker:hover .anssn-ticker__piste,
.anssn-ticker:focus-within .anssn-ticker__piste {
  animation-play-state: paused;
}

/* Chaque bande occupe au moins la largeur de l'écran : avec une seule annonce
   publiée, la piste serait sinon plus courte que le bandeau et la boucle
   laisserait passer un vide. */
.anssn-ticker__bande {
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-shrink: 0;
  min-width: 100vw;
}

.anssn-ticker__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 26px;
  color: #fff;
  white-space: nowrap;
}

.anssn-ticker__item + .anssn-ticker__item {
  border-left: 1px solid rgba(255, 255, 255, .28);
}

.anssn-ticker__item i,
.anssn-ticker__item .flaticon-megaphone {
  opacity: .8;
}

.anssn-ticker__date {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .4px;
  text-transform: uppercase;
  opacity: .75;
}

.anssn-ticker__lien {
  text-decoration: none;
  font-weight: 600;
}

@keyframes anssn-defilement {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Réglage système « réduire les animations » : le fil s'arrête et redevient
   une liste qu'on fait défiler soi-même. */
@media (prefers-reduced-motion: reduce) {
  .anssn-ticker {
    overflow-x: auto;
  }
  .anssn-ticker__piste {
    animation: none;
  }
  .anssn-ticker__bande[aria-hidden="true"] {
    display: none;
  }
}

/* Les petits tirets qui encadrent les intitulés de section ("avant/après") sont
   roses par défaut dans le thème (--tp-theme-redical) : ramenés au vert de marque. */
.before-border,
.after-border {
  background-color: var(--tp-theme-vogue);
}

.tp-border-btn:hover.br-btn-bg-dark {
  background-color: var(--tp-theme-vogue);
}

/* Sous-menus déroulants : le survol en rose du thème ramené au vert de marque */
.da-menu ul li .submenu li:hover > a {
  color: var(--tp-theme-vogue);
  background-color: var(--anssn-brand-light);
}

.da-menu ul li .submenu li:hover > a::after {
  color: var(--tp-theme-vogue);
}

/* Petit trait qui apparaît devant l'item de sous-menu survolé : resté rose du
   thème d'origine (::before jamais repris ci-dessus, seul ::after l'était).
   Passé en vert à la demande explicite — seule exception décorative à la
   réserve du vert aux états (cf. section 27) : on réutilise le vert du
   drapeau plutôt que d'introduire une nouvelle teinte. */
.da-menu ul li .submenu li a::before {
  background-color: var(--anssn-tg-vert);
}

/* Bouton d'inscription à la newsletter : même dégradé multicolore que les
   autres boutons du thème, ramené au vert de marque. */
.da-footer .tp-footer-from form button {
  background-image: none;
  background-color: var(--tp-theme-vogue);
}

.da-footer .tp-footer-from form button:hover {
  background-color: var(--anssn-brand-dark);
}

/* ---------------------------------------------------------------------------
   3. Menu (flèche de sous-menu et survols ramenés au vert institutionnel)
   --------------------------------------------------------------------------- */
.da-menu ul li.has-dropdown > a::after {
  content: none;
}

.da-menu ul li:hover > a {
  color: var(--tp-theme-vogue);
}

.da-menu ul li a {
  font-weight: 600;
  padding: 10px 0;
  color: var(--tp-common-black);
}

.da-menu ul li {
  margin: 0 8px;
}

/* En-tête sur deux niveaux, sans la carte flottante à marges larges du
   template d'origine :

     — haut  : le logo, le choix de langue et les deux accès au compte ;
     — bas   : la barre de navigation, qui dispose de toute la largeur.

   Le menu ne partageant plus sa ligne avec le logo et les boutons, les huit
   rubriques y tiennent d'un seul tenant dès 1200px, Contact compris — c'est
   ce que le découpage en deux niveaux vient régler. */
.anssn-header {
  background-color: #fff;
  border-bottom: 1px solid #eef0f2;
}

.anssn-header__top {
  padding-top: 14px;
  padding-bottom: 14px;
}

.anssn-header__nav {
  border-top: 1px solid #eef0f2;
}

.anssn-header__nav .da-menu > nav > ul {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.anssn-header__nav .da-menu > nav > ul > li > a {
  padding: 15px 0;
  white-space: nowrap;
}

/* Sur la barre, l'item survolé se souligne d'un trait de marque : sans le
   contraste du bloc blanc d'origine, la seule bascule de couleur du texte
   se lisait mal. */
.anssn-header__nav .da-menu > nav > ul > li > a {
  position: relative;
}

.anssn-header__nav .da-menu > nav > ul > li > a::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 8px;
  height: 2px;
  background-color: var(--tp-theme-vogue);
  transform: scaleX(0);
  transition: transform .2s ease;
}

.anssn-header__nav .da-menu > nav > ul > li:hover > a::before,
.anssn-header__nav .da-menu > nav > ul > li.is-active > a::before {
  transform: scaleX(1);
}

/* Les sous-menus restent ancrés sous leur rubrique, la barre n'ayant plus la
   hauteur de l'en-tête entier. */
.anssn-header__nav .da-menu ul li .submenu {
  top: 100%;
}

/* Une fois l'en-tête épinglé au défilement, le premier niveau se resserre :
   l'identité reste visible, la navigation garde sa place, et l'ensemble ne
   mange pas le tiers de l'écran. */
.anssn-header.header-sticky .anssn-header__top {
  padding-top: 6px;
  padding-bottom: 6px;
}

.anssn-header.header-sticky .anssn-logo img {
  height: 52px;
}

.anssn-header.header-sticky .anssn-header__nav .da-menu > nav > ul > li > a {
  padding: 11px 0;
}

.anssn-header-actions {
  gap: 14px;
}

.anssn-lang {
  position: relative;
  cursor: pointer;
}

.anssn-lang > span {
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .5px;
  color: var(--tp-theme-vogue);
}

.anssn-lang > span i {
  margin-left: 4px;
  font-size: 11px;
}

.anssn-lang ul {
  position: absolute;
  top: 130%;
  right: 0;
  min-width: 130px;
  background-color: var(--tp-theme-vogue);
  border-radius: 6px;
  padding: 8px 0;
  opacity: 0;
  visibility: hidden;
  transition: all .25s ease;
  z-index: 30;
}

.anssn-lang:hover ul {
  top: 115%;
  opacity: 1;
  visibility: visible;
}

.anssn-lang ul li a {
  display: block;
  padding: 6px 18px;
  font-size: 13px;
  color: #fff;
}

.anssn-lang ul li a:hover {
  color: #fff;
  opacity: .8;
}

.anssn-login-btn {
  padding: 10px 20px;
  font-size: 13px;
}

.anssn-login-btn:hover {
  background-color: var(--anssn-brand-dark);
}

.anssn-header .tp-header-nav {
  background-color: var(--tp-theme-vogue);
}

/* ---------------------------------------------------------------------------
   4. Typographie recalibrée : le thème d'origine est calibré pour une page
   d'atterrissage marketing (titres de hero à 80-100px, titres de section à
   60px), trop lourd pour un site institutionnel.
   --------------------------------------------------------------------------- */
.da-hero-section__title {
  font-size: 46px;
  letter-spacing: -1px;
}
@media only screen and (min-width: 992px) and (max-width: 1399px) {
  .da-hero-section__title {
    font-size: 38px;
  }
}
@media (max-width: 767px) {
  .da-hero-section__title {
    font-size: 30px;
    letter-spacing: 0;
  }
}

.da-hero-section p {
  font-size: 17px;
}

.tp-section__title {
  font-size: 34px;
  letter-spacing: -.5px;
}
@media (max-width: 767px) {
  .tp-section__title {
    font-size: 26px;
  }
}

.ab-fact-item span {
  font-size: 44px;
}

/* ---------------------------------------------------------------------------
   5. Visuel du hero : pas de photographie (les images du pack sont des
   gabarits gris non remplacés), on construit un visuel de marque à partir
   du logo réel et d'un halo circulaire.
   --------------------------------------------------------------------------- */
.anssn-hero-visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 440px;
}

.anssn-hero-blob {
  position: absolute;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #eef5f0 0%, #d5e6da 55%, #bcd8c5 100%);
}

.anssn-hero-mark {
  position: relative;
  z-index: 1;
  width: 300px;
  max-width: 60%;
  filter: drop-shadow(0 10px 20px rgba(38, 103, 73, .12));
}

.anssn-hero-badge {
  position: absolute;
  z-index: 2;
  right: 4%;
  bottom: 6%;
  background: #fff;
  border-radius: 12px;
  padding: 14px 20px;
  box-shadow: 0 6px 16px rgba(15, 23, 42, .06);
  text-align: left;
  max-width: 230px;
}

.anssn-hero-badge b {
  display: block;
  color: var(--tp-theme-vogue);
  font-size: 14px;
  margin-bottom: 2px;
}

.anssn-hero-badge span {
  display: block;
  font-size: 12px;
  color: #697568;
  line-height: 1.4;
}

@media (max-width: 991px) {
  .anssn-hero-visual {
    min-height: 340px;
    margin-top: 30px;
  }
  .anssn-hero-blob {
    width: 300px;
    height: 300px;
  }
  .anssn-hero-mark {
    width: 220px;
  }
}

/* ---------------------------------------------------------------------------
   6. Bande de confiance sous le hero
   --------------------------------------------------------------------------- */
.anssn-trust-strip {
  border-bottom: 1px solid #eef0f2;
}

/* ---------------------------------------------------------------------------
   7. Section institutionnelle : composition de deux photos + cartouche
   --------------------------------------------------------------------------- */
.anssn-about-media {
  position: relative;
  padding-bottom: 60px;
  padding-right: 30px;
}

.anssn-about-media__main {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 24px rgba(15, 23, 42, .08);
}

.anssn-about-media__main img {
  width: 100%;
  height: 340px;
  object-fit: cover;
  display: block;
}

.anssn-about-media__sub {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 52%;
  border: 6px solid #fff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 8px 18px rgba(15, 23, 42, .09);
}

.anssn-about-media__sub img {
  width: 100%;
  height: 170px;
  object-fit: cover;
  display: block;
}

.anssn-about-badge {
  position: absolute;
  left: 0;
  bottom: 22px;
  background: var(--tp-theme-vogue);
  color: #fff;
  border-radius: 12px;
  padding: 16px 22px;
  box-shadow: 0 6px 16px rgba(38, 103, 73, .16);
  z-index: 2;
}

.anssn-about-badge b {
  display: block;
  font-size: 22px;
  line-height: 1.1;
}

.anssn-about-badge span {
  display: block;
  font-size: 12px;
  opacity: .85;
}

@media (max-width: 991px) {
  .anssn-about-media {
    margin-bottom: 40px;
  }
}

@media (max-width: 575px) {
  .anssn-about-media__sub {
    position: static;
    width: 100%;
    margin-top: 14px;
    border-width: 0;
  }
  .anssn-about-media {
    padding-bottom: 0;
    padding-right: 0;
  }
  .anssn-about-badge {
    position: static;
    display: inline-block;
    margin-top: 14px;
  }
}

/* Piliers de mission (grille 2x2) */
.anssn-pillar {
  display: flex;
  gap: 14px;
  margin-bottom: 26px;
}

.anssn-pillar__icon {
  flex: 0 0 46px;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: var(--anssn-brand-light);
  color: var(--tp-theme-vogue);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.anssn-pillar__title {
  font-size: 17px;
  font-weight: 700;
  color: var(--tp-theme-vogue);
  margin-bottom: 4px;
}

.anssn-pillar p {
  font-size: 14px;
  color: #59655c;
  margin-bottom: 0;
  line-height: 1.55;
}

/* ---------------------------------------------------------------------------
   7b. Cartes de services
   --------------------------------------------------------------------------- */
.anssn-service-card {
  position: relative;
  background: #fff;
  border: 1px solid #eef0f2;
  border-radius: 14px;
  padding: 30px 28px;
  height: 100%;
  transition: all .25s ease;
}

.anssn-service-card:hover {
  border-color: var(--anssn-vert-moyen);
  box-shadow: 0 8px 20px rgba(15, 23, 42, .07);
  transform: translateY(-2px);
}

.anssn-service-card__icon {
  width: 54px;
  height: 54px;
  border-radius: 14px;
  background: var(--anssn-brand-light);
  color: var(--tp-theme-vogue);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  margin-bottom: 22px;
}

.anssn-service-card__badge {
  position: absolute;
  top: 24px;
  right: 24px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .3px;
  padding: 4px 11px;
  border-radius: 20px;
  background: var(--anssn-brand-light);
  color: var(--tp-theme-vogue);
}

.anssn-service-card__badge--open {
  background: #e8f6ef;
  color: #12805a;
}

.anssn-service-card__badge--soon {
  background: #f1f4f1;
  color: #79857b;
}

.anssn-service-card__title {
  font-size: 19px;
  font-weight: 700;
  color: var(--tp-theme-vogue);
  margin-bottom: 10px;
}

.anssn-service-card p {
  font-size: 14px;
  color: #59655c;
  margin-bottom: 18px;
  line-height: 1.6;
}

.anssn-service-card__link {
  font-size: 14px;
  font-weight: 700;
  color: var(--tp-theme-vogue);
}

.anssn-service-card__link i {
  margin-left: 6px;
  font-size: 12px;
}

.anssn-service-card--soon {
  background: #fafbfc;
}

.anssn-service-card--soon .anssn-service-card__icon {
  background: #f1f4f1;
  color: #98a397;
}

.anssn-service-card--soon .anssn-service-card__title {
  color: #79857b;
}

.anssn-service-card--soon .anssn-service-card__link {
  color: #98a397;
  pointer-events: none;
}

/* ---------------------------------------------------------------------------
   8. Chiffres clés : fond en dégradé de marque au lieu de l'image gabarit
   --------------------------------------------------------------------------- */
.anssn-fact-area {
  background: linear-gradient(120deg, var(--tp-theme-vogue), var(--anssn-brand-dark));
}

/* ---------------------------------------------------------------------------
   9. Bandeau d'appel à l'action (signalement)
   --------------------------------------------------------------------------- */
.anssn-cta-banner {
  position: relative;
  border-radius: 16px;
  padding: 46px 50px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
}

/* Voile de marque au-dessus de la photo, pour garder le texte lisible */
.anssn-cta-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(23, 70, 47, .95) 30%, rgba(38, 103, 73, .82) 100%);
}

.anssn-cta-banner > * {
  position: relative;
  z-index: 1;
}

.anssn-cta-banner h3 {
  color: #fff;
  font-size: 24px;
  font-weight: 700;
  margin: 0;
  line-height: 1.4;
}

.anssn-cta-btn.tp-solid-btn {
  background-color: #fff;
  color: var(--tp-theme-vogue);
}

.anssn-cta-btn.tp-solid-btn:hover {
  background-color: var(--anssn-brand-light);
  color: var(--tp-theme-vogue);
}

@media (max-width: 991px) {
  .anssn-cta-banner {
    padding: 34px 26px;
    text-align: center;
  }
  .anssn-cta-banner .anssn-cta-btn-wrap {
    margin-top: 20px;
  }
}

/* ---------------------------------------------------------------------------
   10. Actualités : cartes texte (pas de vignette photo, les gabarits du pack
   sont des placeholders gris non remplacés)
   --------------------------------------------------------------------------- */
.anssn-news-card {
  background: #fff;
  border: 1px solid #eef0f2;
  border-radius: 14px;
  overflow: hidden;
  height: 100%;
  transition: all .25s ease;
}

.anssn-news-card:hover {
  box-shadow: 0 8px 20px rgba(15, 23, 42, .06);
  transform: translateY(-2px);
}

.anssn-news-card__media {
  height: 190px;
  overflow: hidden;
}

.anssn-news-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.anssn-news-card__body {
  padding: 26px 28px 28px;
}

.anssn-news-card__meta {
  margin-bottom: 12px;
}

.anssn-news-tag {
  display: inline-block;
  background: var(--anssn-brand-light);
  color: var(--tp-theme-vogue);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 20px;
  margin-right: 10px;
}

.anssn-news-date {
  font-size: 13px;
  color: #879287;
}

.anssn-news-card__title {
  font-size: 19px;
  color: var(--tp-theme-vogue);
  margin-bottom: 12px;
}

.anssn-news-card p {
  font-size: 14px;
  color: #59655c;
  margin-bottom: 18px;
}

.anssn-news-card__link {
  font-size: 14px;
  font-weight: 700;
  color: var(--tp-theme-vogue);
}

.anssn-news-card__link i {
  margin-left: 6px;
  font-size: 12px;
}

/* ---------------------------------------------------------------------------
   11. Contact icons (offcanvas / footer) : icônes FontAwesome unifiées en
   vert de marque plutôt que les pictos dégradés violet/rose du template.
   --------------------------------------------------------------------------- */
.anssn-contact-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--anssn-brand-light);
  color: var(--tp-theme-vogue);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}

/* ---------------------------------------------------------------------------
   12. Footer
   --------------------------------------------------------------------------- */
.anssn-footer-tagline {
  font-size: 14px;
  color: #697568;
}

.anssn-newsletter-note {
  font-size: 12px;
  color: #98a397;
}

/* Fond : le gris-blanc d'origine (thème) cède la place au vert de marque.
   Le motif à pois (data-background, posé en JS) reste au-dessus : il est
   presque entièrement transparent, seule sa trame en pointillés est visible. */
.da-footer-bg {
  background-image: none;
  background-color: var(--anssn-brand-light);
}

/* Bandeau de copyright : ancrage sombre en pied de page, dans les deux verts
   de marque déjà posés ailleurs (bandeau d'actualité, boutons). */
.da-ft-copyright-bg {
  background-color: var(--anssn-brand-dark);
}

.da-ft-copyright-bg .tp-copyrigh-text,
.da-ft-copyright-bg .tp-footer-menu {
  color: rgba(255, 255, 255, .8);
}

.da-ft-copyright-bg .tp-copyrigh-text a,
.da-ft-copyright-bg .tp-footer-menu ul li a {
  color: #fff;
}

.da-ft-copyright-bg .tp-copyrigh-text a:hover,
.da-ft-copyright-bg .tp-footer-menu ul li:hover a {
  background-image: none;
  -webkit-text-fill-color: #fff;
  color: #fff;
  opacity: .75;
}

/* ---------------------------------------------------------------------------
   13. Pages intérieures : fil d'ariane
   --------------------------------------------------------------------------- */
.anssn-breadcrumb {
  background-color: var(--anssn-brand-light);
  border-bottom: 1px solid #dbe7df;
}

.anssn-breadcrumb .breadcrumb__title {
  font-size: 38px;
  color: var(--tp-theme-vogue);
  letter-spacing: -.5px;
}

@media (max-width: 767px) {
  .anssn-breadcrumb .breadcrumb__title {
    font-size: 26px;
  }
}

.anssn-breadcrumb .breadcrumb__list span.dvdr-line {
  background-color: var(--tp-theme-vogue);
  width: 16px;
}

.anssn-breadcrumb .breadcrumb__list span.tp-bc-acive-menu {
  color: var(--tp-theme-vogue);
}

.anssn-breadcrumb__lead {
  max-width: 720px;
  font-size: 16px;
  color: #59655c;
}

/* ---------------------------------------------------------------------------
   14. Contenu éditorial des pages intérieures
   --------------------------------------------------------------------------- */
.anssn-prose h2 {
  font-size: 26px;
  color: var(--tp-theme-vogue);
  margin-bottom: 16px;
}

.anssn-prose h3 {
  font-size: 19px;
  color: var(--tp-theme-vogue);
  margin-bottom: 10px;
}

.anssn-prose p {
  font-size: 15px;
  line-height: 1.75;
  color: #4a574e;
  margin-bottom: 18px;
}

.anssn-prose ul {
  margin-bottom: 22px;
  padding-left: 0;
}

.anssn-prose ul li {
  list-style: none;
  position: relative;
  padding-left: 28px;
  font-size: 15px;
  line-height: 1.7;
  color: #4a574e;
  margin-bottom: 10px;
}

.anssn-prose ul li::before {
  content: "\f00c";
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  position: absolute;
  left: 0;
  top: 1px;
  color: var(--tp-theme-vogue);
  font-size: 13px;
}

.anssn-prose .anssn-section + .anssn-section {
  margin-top: 40px;
}

/* Encadré d'information / de mise en garde */
.anssn-note {
  background: var(--anssn-brand-light);
  border-left: 4px solid var(--tp-theme-vogue);
  border-radius: 0 10px 10px 0;
  padding: 20px 24px;
  margin-bottom: 26px;
}

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

.anssn-note__title {
  font-weight: 700;
  color: var(--tp-theme-vogue);
  margin-bottom: 6px;
  display: block;
  font-size: 15px;
}

/* AMBRE SEMANTIQUE — a ne pas confondre avec le dore retire de l'interface.
   Les trois blocs qui suivent (note en attente, message flash, appel de
   reglement) signalent un avertissement. L'ambre y est une convention qu'on
   ne remplace ni par le vert, qui dit « c'est bon », ni par le rouge, qui dit
   « c'est refuse ». Ces teintes restent. */
.anssn-note--pending {
  background: #fff8ec;
  border-left-color: #d98a1f;
}

.anssn-note--pending .anssn-note__title {
  color: #a5661a;
}

/* Menu latéral de rubrique */
.anssn-sidenav {
  background: #fff;
  border: 1px solid #eef0f2;
  border-radius: 14px;
  padding: 12px;
  position: sticky;
  top: 100px;
}

.anssn-sidenav__title {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: #879287;
  padding: 12px 16px 8px;
  margin: 0;
}

.anssn-sidenav a {
  display: block;
  padding: 11px 16px;
  border-radius: 8px;
  font-size: 14.5px;
  font-weight: 600;
  color: #4a574e;
  transition: all .2s ease;
}

/* survol défini au point 28.4, en registre documentaire (pétrole) */

.anssn-sidenav a.is-active {
  background: var(--tp-theme-vogue);
  color: #fff;
}

/* Étapes numérotées (procédure) */
.anssn-step {
  position: relative;
  display: flex;
  gap: 22px;
  padding-bottom: 32px;
}

.anssn-step:last-child {
  padding-bottom: 0;
}

.anssn-step__num {
  flex: 0 0 46px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--tp-theme-vogue);
  color: #fff;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

/* trait vertical reliant les étapes */
.anssn-step:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 23px;
  top: 46px;
  bottom: 0;
  width: 2px;
  background: #dbe7df;
}

.anssn-step__title {
  font-size: 18px;
  font-weight: 700;
  color: var(--tp-theme-vogue);
  margin-bottom: 6px;
}

.anssn-step p {
  font-size: 15px;
  line-height: 1.7;
  color: #4a574e;
  margin-bottom: 0;
}

/* ===========================================================================
   Espace exploitant (connecté) — conforme à la note d'architecture ARTIFICE,
   section « Espaces connectés » : navigation propre, distincte du site
   vitrine, sur le même principe que l'espace d'administration mais dans la
   palette claire du site public.
   =========================================================================== */
:root {
  --exp-sidebar: 260px;
  --exp-topbar: 66px;
}

body.exp {
  margin: 0;
  background: #f5f7fb;
  font-family: var(--tp-ff-body);
  color: #1e2a23;
}

.exp a {
  color: inherit;
  text-decoration: none;
}

.exp-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--exp-sidebar);
  background: #fff;
  border-right: 1px solid #eef0f2;
  display: flex;
  flex-direction: column;
  z-index: 50;
  overflow-y: auto;
  transition: transform .22s ease;
}

.exp-sidebar__brand {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 20px 22px;
  border-bottom: 1px solid #eef0f2;
}

.exp-sidebar__brand img {
  height: 34px;
  width: auto;
}

.exp-sidebar__brand span {
  font-size: 13px;
  font-weight: 700;
  color: #1e2a23;
  line-height: 1.3;
}

.exp-sidebar__identite {
  padding: 16px 22px;
  border-bottom: 1px solid #eef0f2;
}

.exp-sidebar__identite-nom {
  display: block;
  font-size: 13.5px;
  font-weight: 700;
  color: #1e2a23;
}

.exp-sidebar__identite-mail {
  display: block;
  font-size: 12px;
  color: #889389;
  margin-top: 2px;
}

.exp-nav {
  flex: 1 1 auto;
  padding: 14px 12px;
}

.exp-nav a {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 12px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  color: #4a574e;
  margin-bottom: 2px;
  transition: background-color .16s ease, color .16s ease;
}

.exp-nav a i {
  width: 18px;
  text-align: center;
  font-size: 15px;
}

.exp-nav a:hover,
.exp-nav a.is-active {
  background: var(--anssn-brand-light);
  color: var(--tp-theme-vogue);
}

.exp-nav__badge {
  margin-left: auto;
  background: #fdf3e3;
  color: #a5661a;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  padding: 2px 7px;
  border-radius: 20px;
}

.exp-sidebar__pied {
  padding: 14px 22px;
  border-top: 1px solid #eef0f2;
}

.exp-sidebar__pied a {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  font-weight: 600;
  color: #697568;
  padding: 6px 0;
  transition: color .16s ease;
}

.exp-sidebar__pied a:hover {
  color: #c0392b;
}

.exp-voile {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, .4);
  z-index: 45;
}

.exp-voile.est-visible {
  display: block;
}

.exp-main {
  margin-left: var(--exp-sidebar);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.exp-topbar {
  min-height: var(--exp-topbar);
  background: #fff;
  border-bottom: 1px solid #eef0f2;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 26px;
  position: sticky;
  top: 0;
  z-index: 40;
}

.exp-topbar__burger {
  display: none;
  background: none;
  border: 0;
  font-size: 18px;
  color: #4a574e;
  cursor: pointer;
}

.exp-topbar__titre {
  font-size: 17px;
  font-weight: 700;
  color: #1e2a23;
  flex: 1 1 auto;
}

.exp-topbar__actions {
  display: flex;
  align-items: center;
  gap: 14px;
}

.exp-topbar__icone {
  color: #889389;
  font-size: 16px;
}

.exp-topbar__icone:hover {
  color: var(--tp-theme-vogue);
}

.exp-contenu {
  padding: 30px 34px 60px;
  flex: 1 1 auto;
}

.exp-carte {
  background: #fff;
  border: 1px solid #eef0f2;
  border-radius: 14px;
  padding: 26px 28px;
  margin-bottom: 26px;
}

.exp-carte__titre {
  font-size: 17px;
  font-weight: 700;
  color: #1e2a23;
  margin-bottom: 18px;
}

.exp-note {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 20px;
  border-radius: 10px;
  margin-bottom: 26px;
}

.exp-note--succes {
  background: #e8f6ef;
  color: #12805a;
}

.exp-note--erreur {
  background: #fdecea;
  color: #8a2e23;
}

.exp-note__liste {
  margin: 6px 0 0;
  padding-left: 18px;
}

.exp-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 18px;
  margin-bottom: 26px;
}

.exp-stat {
  background: #fff;
  border: 1px solid #eef0f2;
  border-radius: 14px;
  padding: 20px 22px;
}

.exp-stat__valeur {
  font-size: 26px;
  font-weight: 800;
  color: var(--tp-theme-vogue);
  line-height: 1;
}

.exp-stat__label {
  display: block;
  font-size: 13px;
  color: #697568;
  margin-top: 8px;
}

.exp-bientot {
  text-align: center;
  padding: 50px 30px;
  color: #697568;
}

.exp-bientot i {
  font-size: 30px;
  color: #a5661a;
  margin-bottom: 14px;
  display: block;
}

.exp-bientot h2 {
  font-size: 18px;
  color: #1e2a23;
  margin-bottom: 10px;
}

@media (max-width: 991px) {
  .exp-sidebar {
    transform: translateX(-100%);
  }

  .exp-sidebar.est-ouverte {
    transform: translateX(0);
  }

  .exp-main {
    margin-left: 0;
  }

  .exp-topbar__burger {
    display: block;
  }
}

/* Assistant en plusieurs etapes (formulaire de demande detaille) */
.exp-assistant-etapes {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 18px 0 6px;
  padding-bottom: 16px;
  border-bottom: 1px solid #eef0f2;
  overflow-x: auto;
}

.exp-assistant-etapes__item {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 10px 5px 5px;
  border-radius: 20px;
  font-size: 12.5px;
  font-weight: 600;
  color: #98a398;
  white-space: nowrap;
}

.exp-assistant-etapes__numero {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #eef0f2;
  color: #98a398;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11.5px;
  font-weight: 700;
  flex: 0 0 auto;
}

.exp-assistant-etapes__item.est-active {
  color: var(--tp-theme-vogue);
  background: var(--anssn-brand-light);
}

.exp-assistant-etapes__item.est-active .exp-assistant-etapes__numero {
  background: var(--tp-theme-vogue);
  color: #fff;
}

.exp-assistant-etapes__item.est-passee .exp-assistant-etapes__numero {
  background: #12805a;
  color: #fff;
}

.exp-assistant-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid #eef0f2;
}

.exp-ligne-repetable {
  padding: 14px 0;
}

.exp-ligne-repetable + .exp-ligne-repetable {
  border-top: 1px dashed #eef0f2;
}

.exp-tableau-scroll {
  overflow-x: auto;
  margin-bottom: 10px;
}

.exp-tableau {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.exp-tableau th {
  text-align: left;
  padding: 10px 12px;
  background: #f5f7fb;
  color: #4a574e;
  font-weight: 700;
  border-bottom: 1px solid #eef0f2;
  white-space: nowrap;
}

.exp-tableau td {
  padding: 6px 12px;
  border-bottom: 1px solid #eef0f2;
  vertical-align: middle;
}

.exp-tableau td input {
  width: 100%;
  border: 1px solid #dbe7df;
  border-radius: 6px;
  padding: 7px 9px;
  font-size: 13px;
}

/* Boutons + fenêtres « Composition du dossier » / « Engagement » */
.exp-liens-dossier {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 18px 0;
}

.exp-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.exp-modal[hidden] {
  display: none;
}

.exp-modal__voile {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, .55);
}

.exp-modal__carte {
  position: relative;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 20px 50px rgba(15, 23, 42, .25);
  width: 100%;
  max-width: 640px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
}

.exp-modal__entete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 26px;
  border-bottom: 1px solid #eef0f2;
  flex: 0 0 auto;
}

.exp-modal__titre {
  font-size: 16px;
  font-weight: 700;
  color: #1e2a23;
  margin: 0;
}

.exp-modal__fermer {
  background: none;
  border: 0;
  font-size: 18px;
  color: #98a398;
  cursor: pointer;
  padding: 4px;
  line-height: 1;
}

.exp-modal__fermer:hover {
  color: #1e2a23;
}

.exp-modal__corps {
  padding: 22px 26px;
  overflow-y: auto;
}

/* Listes simples de la fenetre « Engagement ». La composition du dossier a sa
   propre presentation (.anssn-pieces) et doit y echapper : sans l'exclusion,
   ces deux regles, plus specifiques, lui réimposeraient retrait et marges. */
.exp-modal__corps ol:not(.anssn-pieces__liste) {
  padding-left: 20px;
  margin: 0 0 4px;
}

.exp-modal__corps ol:not(.anssn-pieces__liste) li {
  margin-bottom: 10px;
  font-size: 13.5px;
  color: #36423a;
  line-height: 1.6;
}

.exp-modal__sous-titre {
  font-weight: 700;
  font-size: 13.5px;
  color: #1e2a23;
  margin: 18px 0 8px;
}

.exp-modal__sous-titre:first-child {
  margin-top: 0;
}

/* Composition du dossier : les styles .anssn-pieces__* vivent desormais dans
   assets/css/dossier.css, feuille partagee avec l'espace d'administration.
   La regle ci-dessus les exclut volontairement du retrait des listes. */

.anssn-btn-secondaire {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border: 1px solid #dbe7df;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 600;
  color: #36423a;
  background: #fff;
  transition: all .18s ease;
}

.anssn-btn-secondaire:hover {
  border-color: var(--tp-theme-vogue);
  color: var(--tp-theme-vogue);
  background: var(--anssn-brand-light);
}

.anssn-btn-secondaire--danger {
  border-color: #f3c2bd;
  color: #c0392b;
}

.anssn-btn-secondaire--danger:hover {
  border-color: #c0392b;
  color: #c0392b;
  background: #fdecea;
}

/* Carte de document / formulaire téléchargeable */
.anssn-doc {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  background: #fff;
  border: 1px solid #eef0f2;
  border-radius: 12px;
  padding: 22px 24px;
  height: 100%;
  transition: all .22s ease;
}

.anssn-doc:hover {
  border-color: var(--anssn-petrole-moyen);
  box-shadow: 0 6px 16px rgba(15, 23, 42, .06);
}

.anssn-doc__icon {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: var(--anssn-brand-light);
  color: var(--tp-theme-vogue);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.anssn-doc__title {
  font-size: 16px;
  font-weight: 700;
  color: var(--tp-theme-vogue);
  margin-bottom: 4px;
  line-height: 1.4;
}

.anssn-doc__meta {
  font-size: 13px;
  color: #879287;
  margin-bottom: 0;
}

.anssn-doc__tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .3px;
  padding: 3px 10px;
  border-radius: 20px;
  background: var(--anssn-brand-light);
  color: var(--tp-theme-vogue);
  margin-bottom: 8px;
}

/* Fiche texte réglementaire */
.anssn-law {
  border: 1px solid #eef0f2;
  border-radius: 12px;
  padding: 26px 28px;
  background: #fff;
  height: 100%;
}

.anssn-law__ref {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: var(--tp-theme-vogue);
  display: block;
  margin-bottom: 8px;
}

.anssn-law__title {
  font-size: 17px;
  font-weight: 700;
  color: #1e2a23;
  line-height: 1.5;
  margin-bottom: 10px;
}

.anssn-law p {
  font-size: 14px;
  color: #59655c;
  margin-bottom: 0;
}

/* ---------------------------------------------------------------------------
   15. Accueil — visuel du hero (photographie plutôt que reprise du logo)
   --------------------------------------------------------------------------- */
.anssn-hero-photo {
  position: relative;
  padding: 0 0 34px 34px;
}

.anssn-hero-photo__frame {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 12px 28px rgba(15, 23, 42, .1);
}

.anssn-hero-photo__frame img {
  width: 100%;
  height: 420px;
  object-fit: cover;
  display: block;
}

/* L'aplat de marque décalé qui ancrait la photo a été retiré : un rectangle de
   couleur dépassant sous l'image est un effet de composition commerciale, sans
   fonction sur un site d'autorité. La photo tient seule, cadrée net. */
.anssn-hero-photo {
  padding: 0;
}

@media (max-width: 991px) {
  .anssn-hero-photo {
    margin-top: 40px;
    padding: 0;
  }
  .anssn-hero-photo__frame img {
    height: 320px;
  }
}

/* Références légales, en pied de colonne du hero */
.anssn-hero-legal {
  font-size: 13px;
  color: #79857b;
  border-top: 1px solid #eef0f2;
  padding-top: 16px;
  margin-top: 6px;
}

.anssn-hero-legal strong {
  color: var(--tp-theme-vogue);
  font-weight: 700;
}

/* ---------------------------------------------------------------------------
   16. Accès directs aux services (bande sous le hero)
   --------------------------------------------------------------------------- */
.anssn-quick {
  display: flex;
  align-items: center;
  gap: 18px;
  background: #fff;
  border: 1px solid #eef0f2;
  border-radius: 14px;
  padding: 24px 26px;
  height: 100%;
  transition: all .25s ease;
}

.anssn-quick:hover {
  border-color: transparent;
  background: var(--tp-theme-vogue);
  box-shadow: 0 8px 20px rgba(38, 103, 73, .14);
  transform: translateY(-2px);
}

.anssn-quick__icon {
  flex: 0 0 54px;
  width: 54px;
  height: 54px;
  border-radius: 14px;
  background: var(--anssn-brand-light);
  color: var(--tp-theme-vogue);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  transition: all .25s ease;
}

.anssn-quick:hover .anssn-quick__icon {
  background: rgba(255, 255, 255, .16);
  color: #fff;
}

.anssn-quick__body {
  flex: 1 1 auto;
  min-width: 0;
}

.anssn-quick__title {
  font-size: 17px;
  font-weight: 700;
  color: var(--tp-theme-vogue);
  margin-bottom: 3px;
  transition: color .25s ease;
}

.anssn-quick__hint {
  font-size: 13px;
  color: #79857b;
  margin: 0;
  transition: color .25s ease;
}

.anssn-quick:hover .anssn-quick__title,
.anssn-quick:hover .anssn-quick__hint {
  color: #fff;
}

.anssn-quick:hover .anssn-quick__hint {
  opacity: .85;
}

.anssn-quick__arrow {
  flex: 0 0 auto;
  color: #c1cac1;
  font-size: 16px;
  transition: all .25s ease;
}

.anssn-quick:hover .anssn-quick__arrow {
  color: #fff;
  transform: translateX(4px);
}

/* ---------------------------------------------------------------------------
   17. Bandeau signalement (remplace l'ancien bandeau à simple slogan)
   --------------------------------------------------------------------------- */
.anssn-report {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
}

.anssn-report::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(23, 70, 47, .96) 35%, rgba(38, 103, 73, .86) 100%);
}

.anssn-report__inner {
  position: relative;
  z-index: 1;
  padding: 48px 52px;
}

.anssn-report__icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .14);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  margin-bottom: 22px;
}

.anssn-report__title {
  color: #fff;
  font-size: 27px;
  font-weight: 700;
  line-height: 1.35;
  margin-bottom: 12px;
}

.anssn-report__text {
  color: rgba(255, 255, 255, .82);
  font-size: 15px;
  line-height: 1.7;
  margin-bottom: 24px;
  max-width: 560px;
}

.anssn-report__points {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 0;
  padding: 0;
}

.anssn-report__points li {
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, .12);
  border-radius: 30px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
}

.anssn-report__points li i {
  font-size: 12px;
  opacity: .9;
}

.anssn-report__action {
  text-align: right;
}

.anssn-report__btn {
  display: inline-block;
  background: #fff;
  color: var(--tp-theme-vogue);
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .3px;
  padding: 15px 30px;
  border-radius: 8px;
  transition: all .25s ease;
}

.anssn-report__btn:hover {
  background: var(--anssn-brand-light);
  color: var(--anssn-brand-dark);
  transform: translateY(-2px);
}

@media (max-width: 991px) {
  .anssn-report__inner {
    padding: 34px 26px;
  }
  .anssn-report__title {
    font-size: 22px;
  }
  .anssn-report__action {
    text-align: left;
    margin-top: 26px;
  }
}

/* ---------------------------------------------------------------------------
   18. Indicateurs clés (remise en forme)
   --------------------------------------------------------------------------- */
.anssn-kpi {
  text-align: center;
  padding: 26px 16px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .14);
  height: 100%;
  transition: all .25s ease;
}

.anssn-kpi:hover {
  background: rgba(255, 255, 255, .14);
}

.anssn-kpi__icon {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .16);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  margin: 0 auto 16px;
}

.anssn-kpi__value {
  font-size: 40px;
  font-weight: 700;
  color: #fff;
  line-height: 1;
  display: block;
  margin-bottom: 8px;
}

.anssn-kpi__label {
  font-size: 14px;
  color: rgba(255, 255, 255, .82);
  margin: 0;
}

.anssn-kpi-note {
  font-size: 12.5px;
  color: rgba(255, 255, 255, .6);
  margin: 26px 0 0;
}

/* ---------------------------------------------------------------------------
   19. Indicateurs clés — version sobre (remplace le bandeau plein en dégradé,
   trop lourd visuellement pour une page institutionnelle)
   --------------------------------------------------------------------------- */
.anssn-figures {
  border-top: 1px solid #eef0f2;
  border-bottom: 1px solid #eef0f2;
}

.anssn-figures__item {
  text-align: center;
  padding: 10px 14px;
  position: relative;
}

/* filet de séparation entre les colonnes, sauf avant la première */
@media (min-width: 768px) {
  .anssn-figures__col + .anssn-figures__col .anssn-figures__item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 12%;
    height: 76%;
    width: 1px;
    background: #eef0f2;
  }
}

.anssn-figures__value {
  display: block;
  font-size: 42px;
  font-weight: 700;
  line-height: 1;
  color: var(--tp-theme-vogue);
  margin-bottom: 8px;
}

.anssn-figures__label {
  font-size: 14px;
  color: #59655c;
  margin: 0;
}

.anssn-figures__note {
  font-size: 12.5px;
  color: #98a397;
  margin: 26px 0 0;
}

@media (max-width: 767px) {
  .anssn-figures__value {
    font-size: 32px;
  }
  .anssn-figures__item {
    padding: 14px 8px;
  }
}

/* ---------------------------------------------------------------------------
   20. Page d'article
   --------------------------------------------------------------------------- */
.anssn-article-meta .anssn-news-date {
  margin-left: 4px;
}

.anssn-article-media {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 24px rgba(15, 23, 42, .07);
}

.anssn-article-media img {
  width: 100%;
  height: 380px;
  object-fit: cover;
  display: block;
}

@media (max-width: 767px) {
  .anssn-article-media img {
    height: 220px;
  }
}

.anssn-article-chapo {
  font-size: 17px !important;
  font-weight: 600;
  color: #1e2a23 !important;
  line-height: 1.7 !important;
  padding-bottom: 6px;
}

/* Corps d'article mis en forme dans l'éditeur de l'administration : les
   intertitres, listes numérotées et liens complètent .anssn-prose. */
.anssn-article-corps h3 {
  margin-top: 34px;
}

.anssn-article-corps h4 {
  font-size: 16px;
  color: #1e2a23;
  margin: 26px 0 10px;
}

.anssn-article-corps ol {
  margin: 0 0 22px;
  padding-left: 22px;
}

.anssn-article-corps ol li {
  list-style: decimal;
  padding-left: 6px;
  font-size: 15px;
  line-height: 1.7;
  color: #4a574e;
  margin-bottom: 10px;
}

.anssn-article-corps ol li::marker {
  color: var(--tp-theme-vogue);
  font-weight: 700;
}

.anssn-article-corps a {
  color: var(--tp-theme-vogue);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.anssn-article-corps a:hover {
  color: var(--anssn-brand-dark);
}

/* Photos intercalées dans le texte : une seule en pleine largeur, deux côte
   à côte, trois et plus en mosaïque de trois colonnes. */
.anssn-article-photos {
  display: grid;
  gap: 14px;
  margin: 30px 0 32px;
}

.anssn-article-photos--2 {
  grid-template-columns: repeat(2, 1fr);
}

.anssn-article-photos--3 {
  grid-template-columns: repeat(3, 1fr);
}

.anssn-article-photo {
  margin: 0;
}

.anssn-article-photo__lien {
  display: block;
  overflow: hidden;
  border-radius: 12px;
  background: #eef0f2;
  text-decoration: none !important;
}

.anssn-article-photo__lien img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform .3s ease;
}

.anssn-article-photos--2 .anssn-article-photo__lien img,
.anssn-article-photos--3 .anssn-article-photo__lien img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.anssn-article-photo__lien:hover img {
  transform: scale(1.03);
}

.anssn-article-photo figcaption {
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.45;
  color: #697568;
}

@media (max-width: 575px) {
  .anssn-article-photos--3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Documents joints à l'article (PDF) */
.anssn-documents {
  margin: 10px 0 34px;
  padding: 22px 24px;
  border-radius: 14px;
  background: var(--anssn-brand-light);
}

.anssn-documents__titre {
  font-size: 18px;
  font-weight: 700;
  color: var(--tp-common-black);
  margin-bottom: 14px;
}

.anssn-documents__titre i {
  color: var(--tp-theme-vogue);
  margin-right: 6px;
}

.anssn-document {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid rgba(35, 111, 83, .12);
  transition: border-color .2s ease, box-shadow .2s ease;
}

.anssn-document + .anssn-document {
  margin-top: 10px;
}

.anssn-document:hover {
  border-color: var(--tp-theme-vogue);
  box-shadow: 0 6px 18px rgba(15, 23, 42, .06);
}

.anssn-document__icone {
  flex: 0 0 auto;
  font-size: 26px;
  color: var(--anssn-rouge);
}

.anssn-document__texte {
  flex: 1;
  min-width: 0;
}

.anssn-document__nom {
  display: block;
  font-weight: 600;
  color: #1e2a23;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.anssn-document__meta {
  display: block;
  font-size: 12.5px;
  color: #697568;
}

.anssn-document__action {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--anssn-brand-light);
  color: var(--tp-theme-vogue);
}

.anssn-article-back a i {
  margin-right: 6px;
  margin-left: 0;
}

.anssn-related-title {
  font-size: 22px;
  color: var(--tp-theme-vogue);
  padding-top: 34px;
  border-top: 1px solid #eef0f2;
}

/* la vignette de la carte devient cliquable */
a.anssn-news-card__media {
  display: block;
}

/* ---------------------------------------------------------------------------
   21. Page contact
   --------------------------------------------------------------------------- */
.anssn-contact-card {
  background: #fff;
  border: 1px solid #eef0f2;
  border-radius: 14px;
  padding: 26px 24px;
  height: 100%;
  transition: all .25s ease;
}

.anssn-contact-card:hover {
  border-color: transparent;
  box-shadow: 0 8px 18px rgba(15, 23, 42, .06);
}

.anssn-contact-card__icon {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: var(--anssn-brand-light);
  color: var(--tp-theme-vogue);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  margin-bottom: 18px;
}

.anssn-contact-card__label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: #879287;
  margin-bottom: 5px;
}

.anssn-contact-card__value {
  display: block;
  font-size: 15.5px;
  font-weight: 700;
  color: var(--tp-theme-vogue);
}

a.anssn-contact-card__value:hover {
  color: var(--anssn-brand-dark);
}

.anssn-form-card {
  background: #fff;
  border: 1px solid #eef0f2;
  border-radius: 16px;
  padding: 38px 40px;
}

.anssn-form-card__title {
  font-size: 24px;
  color: var(--tp-theme-vogue);
  margin-bottom: 8px;
}

.anssn-form-card__intro {
  font-size: 14.5px;
  color: #59655c;
  margin-bottom: 28px;
}

.anssn-field {
  margin-bottom: 20px;
}

.anssn-field label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: #4a574e;
  margin-bottom: 7px;
}

.anssn-field input,
.anssn-field textarea,
.anssn-field select {
  width: 100%;
  border: 1px solid #dbe7df;
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 14.5px;
  color: #1e2a23;
  background: #fff;
  transition: border-color .2s ease, box-shadow .2s ease;
}

.anssn-field textarea {
  resize: vertical;
  min-height: 130px;
}

.anssn-field input:focus,
.anssn-field textarea:focus,
.anssn-field select:focus {
  outline: none;
  border-color: var(--tp-theme-vogue);
  box-shadow: 0 0 0 3px rgba(38, 103, 73, .1);
}

.anssn-field input::placeholder,
.anssn-field textarea::placeholder {
  color: #a6b0a6;
}

/* Afficher / masquer un mot de passe saisi */
.mdp-champ {
  position: relative;
}

.mdp-champ input {
  padding-right: 46px;
}

.mdp-bascule {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  border-radius: 6px;
  color: #889389;
  cursor: pointer;
  font-size: 15px;
  transition: color .16s ease, background-color .16s ease;
}

.mdp-bascule:hover {
  color: var(--tp-theme-vogue);
  background: var(--anssn-brand-light);
}

.mdp-bascule.est-actif {
  color: var(--tp-theme-vogue);
}

@media (max-width: 575px) {
  .anssn-form-card {
    padding: 28px 22px;
  }
}

/* ---------------------------------------------------------------------------
   22. Rythme des animations et niveau d'élévation
   Le thème anime chaque bloc sur 1 seconde : trop lent pour un site
   institutionnel, où l'on vient chercher une information précise. On resserre
   la durée et l'amplitude, et on abaisse les ombres portées du thème.
   --------------------------------------------------------------------------- */
.animated {
  -webkit-animation-duration: .45s;
  animation-duration: .45s;
}

/* amplitude du fondu réduite : le contenu « monte » moins haut, donc arrive plus vite à sa place */
@-webkit-keyframes tpfadeUp {
  0%   { opacity: 0; -webkit-transform: translateY(12px); transform: translateY(12px); }
  100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); }
}

@keyframes tpfadeUp {
  0%   { opacity: 0; -webkit-transform: translateY(12px); -ms-transform: translateY(12px); transform: translateY(12px); }
  100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
}

/* transitions d'interface légèrement plus vives */
.anssn-service-card,
.anssn-news-card,
.anssn-quick,
.anssn-doc,
.anssn-contact-card {
  transition: all .18s ease;
}

/* Ombres propres au thème, ramenées au même niveau d'élévation */
.header-sticky,
.tp-section__subtitle,
.da-feature-item-top span {
  box-shadow: 0 4px 12px rgba(15, 23, 42, .05) !important;
}

.breadcrumb__list {
  box-shadow: 0 4px 12px rgba(15, 23, 42, .05);
}

/* barre de progression du titre animé : accordée au nouveau rythme du script */
.cd-headline.loading-bar .cd-words-wrapper.is-loading::after {
  -webkit-transition: width 1.6s;
  -moz-transition: width 1.6s;
  transition: width 1.6s;
}

/* Respect du réglage système « réduire les animations » */
@media (prefers-reduced-motion: reduce) {
  .animated,
  .wow {
    -webkit-animation: none !important;
    animation: none !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}

/* ---------------------------------------------------------------------------
   23. Rubrique Actualités : recherche, filtres et états
   --------------------------------------------------------------------------- */
.anssn-search {
  position: relative;
  margin-bottom: 18px;
}

.anssn-search input {
  width: 100%;
  border: 1px solid #dbe7df;
  border-radius: 10px;
  padding: 15px 130px 15px 48px;
  font-size: 15px;
  color: #1e2a23;
  background: #fff;
  transition: border-color .18s ease, box-shadow .18s ease;
}

.anssn-search input::placeholder {
  color: #a6b0a6;
}

.anssn-search input:focus {
  outline: none;
  border-color: var(--tp-theme-vogue);
  box-shadow: 0 0 0 3px rgba(38, 103, 73, .1);
}

.anssn-search__icon {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  color: #98a397;
  font-size: 16px;
  pointer-events: none;
}

.anssn-search__submit {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  background: var(--tp-theme-vogue);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .3px;
  padding: 11px 22px;
  border-radius: 8px;
  transition: background-color .18s ease;
}

.anssn-search__submit:hover {
  background: var(--anssn-brand-dark);
}

/* Filtres par rubrique */
.anssn-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.anssn-filter {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid #dbe7df;
  background: #fff;
  border-radius: 30px;
  padding: 8px 16px;
  font-size: 13.5px;
  font-weight: 600;
  color: #4a574e;
  transition: all .18s ease;
}

.anssn-filter:hover {
  border-color: var(--tp-theme-vogue);
  color: var(--tp-theme-vogue);
}

.anssn-filter.is-active {
  background: var(--tp-theme-vogue);
  border-color: var(--tp-theme-vogue);
  color: #fff;
}

.anssn-filter__count {
  font-size: 11.5px;
  font-weight: 700;
  background: var(--anssn-brand-light);
  color: var(--tp-theme-vogue);
  border-radius: 20px;
  padding: 1px 8px;
}

.anssn-filter.is-active .anssn-filter__count {
  background: rgba(255, 255, 255, .2);
  color: #fff;
}

/* Ligne de résultats */
.anssn-results {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 0 24px;
  border-bottom: 1px solid #eef0f2;
  margin-bottom: 34px;
}

.anssn-results__count {
  font-size: 14.5px;
  color: #59655c;
  margin: 0;
}

.anssn-results__count strong {
  color: var(--tp-theme-vogue);
}

.anssn-results__reset {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--tp-theme-vogue);
}

.anssn-results__reset i {
  margin-right: 5px;
  font-size: 12px;
}

/* Aucun résultat */
.anssn-empty {
  text-align: center;
  padding: 60px 30px;
  border: 1px dashed #dbe7df;
  border-radius: 14px;
  background: #fbfcfe;
}

.anssn-empty__icon {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: var(--anssn-brand-light);
  color: var(--tp-theme-vogue);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  margin: 0 auto 20px;
}

.anssn-empty__title {
  font-size: 20px;
  color: var(--tp-theme-vogue);
  margin-bottom: 8px;
}

.anssn-empty p {
  font-size: 14.5px;
  color: #59655c;
  margin-bottom: 20px;
}

/* ---------------------------------------------------------------------------
   24. Page d'article : barre latérale et navigation
   --------------------------------------------------------------------------- */
.anssn-widget {
  background: #fff;
  border: 1px solid #eef0f2;
  border-radius: 14px;
  padding: 24px 22px;
  margin-bottom: 24px;
}

.anssn-widget__title {
  font-size: 15px;
  font-weight: 700;
  color: var(--tp-theme-vogue);
  padding-bottom: 14px;
  margin-bottom: 16px;
  border-bottom: 1px solid #eef0f2;
}

.anssn-widget .anssn-search {
  margin-bottom: 0;
}

.anssn-widget .anssn-search input {
  padding: 12px 14px 12px 42px;
  font-size: 14px;
}

.anssn-widget .anssn-search__icon {
  left: 15px;
  font-size: 14px;
}

.anssn-widget__list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 0;
  font-size: 14.5px;
  font-weight: 600;
  color: #4a574e;
  border-bottom: 1px solid #f4f6fa;
  transition: color .18s ease;
}

.anssn-widget__list a:last-child {
  border-bottom: 0;
}

.anssn-widget__list a:hover {
  color: var(--anssn-secondaire-fonce);
}

.anssn-widget__list .anssn-filter__count {
  background: var(--anssn-brand-light);
}

/* Articles récents en liste compacte */
.anssn-mini {
  display: flex;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid #f4f6fa;
}

.anssn-mini:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.anssn-mini:first-child {
  padding-top: 0;
}

.anssn-mini__thumb {
  flex: 0 0 74px;
  width: 74px;
  height: 58px;
  border-radius: 8px;
  overflow: hidden;
}

.anssn-mini__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.anssn-mini__date {
  display: block;
  font-size: 12px;
  color: #98a397;
  margin-bottom: 3px;
}

.anssn-mini__title {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.45;
  color: #1e2a23;
  margin: 0;
  transition: color .18s ease;
}

.anssn-mini:hover .anssn-mini__title {
  color: var(--tp-theme-vogue);
}

/* Navigation article précédent / suivant */
.anssn-pager {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 44px;
  padding-top: 30px;
  border-top: 1px solid #eef0f2;
}

.anssn-pager__link {
  flex: 1 1 260px;
  border: 1px solid #eef0f2;
  border-radius: 12px;
  padding: 18px 22px;
  transition: all .18s ease;
}

.anssn-pager__link:hover {
  border-color: var(--tp-theme-vogue);
  background: #fbfcfe;
}

.anssn-pager__link--next {
  text-align: right;
}

.anssn-pager__sens {
  display: block;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: #98a397;
  margin-bottom: 6px;
}

.anssn-pager__titre {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: var(--tp-theme-vogue);
  line-height: 1.45;
}

/* Partage */
.anssn-share {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 34px;
  padding-top: 26px;
  border-top: 1px solid #eef0f2;
}

.anssn-share__label {
  font-size: 13.5px;
  font-weight: 700;
  color: #4a574e;
}

.anssn-share a {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--anssn-brand-light);
  color: var(--tp-theme-vogue);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  transition: all .18s ease;
}

.anssn-share a:hover {
  background: var(--tp-theme-vogue);
  color: #fff;
}

/* ---------------------------------------------------------------------------
   25. Espace exploitant : connexion et création de compte
   --------------------------------------------------------------------------- */
.anssn-auth {
  background: var(--anssn-brand-light);
}

.anssn-auth__card {
  background: #fff;
  border: 1px solid #dbe7df;
  border-radius: 16px;
  padding: 40px 42px;
  box-shadow: 0 8px 20px rgba(15, 23, 42, .06);
}

.anssn-auth__title {
  font-size: 26px;
  color: var(--tp-theme-vogue);
  margin-bottom: 8px;
}

.anssn-auth__intro {
  font-size: 14.5px;
  color: #59655c;
  margin-bottom: 28px;
}

.anssn-auth__options {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 24px;
}

.anssn-auth__check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  color: #4a574e;
  cursor: pointer;
}

.anssn-auth__check input {
  width: 16px;
  height: 16px;
  accent-color: var(--tp-theme-vogue);
}

.anssn-auth__forgot {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--tp-theme-vogue);
}

.anssn-auth__submit {
  width: 100%;
  border: 0;
  text-align: center;
}

.anssn-auth__switch {
  text-align: center;
  font-size: 14px;
  color: #59655c;
  margin: 26px 0 0;
  padding-top: 22px;
  border-top: 1px solid #eef0f2;
}

.anssn-auth__switch a {
  font-weight: 700;
  color: var(--tp-theme-vogue);
}

/* Colonne de présentation à côté du formulaire */
.anssn-auth__aside {
  padding: 10px 0 0 20px;
}

.anssn-auth__aside-title {
  font-size: 22px;
  color: var(--tp-theme-vogue);
  margin-bottom: 22px;
}

.anssn-auth__benefit {
  display: flex;
  gap: 14px;
  margin-bottom: 22px;
}

.anssn-auth__benefit-icon {
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  border-radius: 11px;
  background: #fff;
  color: var(--tp-theme-vogue);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
}

.anssn-auth__benefit h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--tp-theme-vogue);
  margin-bottom: 3px;
}

.anssn-auth__benefit p {
  font-size: 14px;
  color: #59655c;
  line-height: 1.6;
  margin: 0;
}

@media (max-width: 991px) {
  .anssn-auth__aside {
    padding: 40px 0 0;
  }
}

@media (max-width: 575px) {
  .anssn-auth__card {
    padding: 28px 24px;
  }
}

/* Champ mot de passe avec indication */
.anssn-field__hint {
  display: block;
  font-size: 12.5px;
  color: #879287;
  margin-top: 6px;
}

.anssn-field--required label::after {
  content: " *";
  color: #c0392b;
}

/* Message d'information après soumission */
.anssn-flash {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: #fff8ec;
  border: 1px solid #f0d9b3;
  border-radius: 10px;
  padding: 16px 20px;
  margin-bottom: 26px;
}

.anssn-flash__icon {
  color: #d98a1f;
  font-size: 17px;
  line-height: 1.5;
}

.anssn-flash p {
  font-size: 14px;
  color: #7a5a1c;
  margin: 0;
  line-height: 1.6;
}

.anssn-flash__liste {
  margin: 6px 0 0;
  padding-left: 18px;
}

.anssn-flash__liste li {
  font-size: 14px;
  color: #7a5a1c;
  line-height: 1.6;
}

/* Variante erreur : mêmes formes que .anssn-flash, ton rouge */
.anssn-flash--erreur {
  background: #fdecea;
  border-color: #f3c2bd;
}

.anssn-flash--erreur .anssn-flash__icon {
  color: #c0392b;
}

.anssn-flash--erreur p,
.anssn-flash--erreur .anssn-flash__liste li {
  color: #8a2e23;
}

/* ---------------------------------------------------------------------------
   26. Appel à l'action « créer un compte » sur l'accueil
   --------------------------------------------------------------------------- */
.anssn-account {
  background: var(--anssn-brand-light);
  border: 1px solid #dbe7df;
  border-radius: 16px;
  padding: 40px 46px;
}

.anssn-account__title {
  font-size: 24px;
  font-weight: 700;
  color: var(--tp-theme-vogue);
  margin-bottom: 10px;
  line-height: 1.4;
}

.anssn-account__text {
  font-size: 15px;
  color: #59655c;
  line-height: 1.7;
  margin-bottom: 0;
  max-width: 620px;
}

.anssn-account__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: flex-end;
}

.anssn-account__secondary {
  display: inline-flex;
  align-items: center;
  background: #fff;
  border: 1px solid #d3e2d9;
  color: var(--tp-theme-vogue);
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .3px;
  padding: 15px 26px;
  border-radius: 8px;
  transition: all .18s ease;
}

.anssn-account__secondary:hover {
  border-color: var(--tp-theme-vogue);
  color: var(--anssn-brand-dark);
}

@media (max-width: 991px) {
  .anssn-account {
    padding: 32px 26px;
  }
  .anssn-account__actions {
    justify-content: flex-start;
    margin-top: 24px;
  }
}

/* Lien « créer un compte » dans l'en-tête.
   Sans bordure : le bouton plein « Espace exploitant » l'accompagne, deux
   boutons encadrés côte à côte se disputeraient l'attention et faisaient
   déborder le menu sous 1350px. */
.anssn-signup-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 0;
  padding: 8px 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--tp-theme-vogue);
  white-space: nowrap;
  transition: all .18s ease;
}

.anssn-signup-btn:hover {
  color: var(--anssn-brand-dark);
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .anssn-signup-btn {
    padding: 9px 12px;
    font-size: 12px;
  }
}

.anssn-header-actions {
  gap: 18px;
}

/* Les huit rubriques disposent de toute la largeur du conteneur depuis le
   passage à l'en-tête sur deux niveaux : il ne reste à resserrer que les
   deux paliers où la barre approche ses limites. */
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .anssn-header__nav .da-menu > nav > ul > li {
    margin: 0 5px;
  }
  .anssn-header__nav .da-menu > nav > ul > li > a {
    font-size: 13.5px;
  }
  .anssn-header-actions {
    gap: 12px;
  }
  .anssn-signup-btn {
    font-size: 12px;
  }
  .anssn-login-btn {
    padding: 9px 14px;
    font-size: 12px;
  }
  .anssn-logo img {
    height: 52px;
  }
}

/* Sous 1200px, le menu bascule dans le tiroir latéral : seuls le logo et les
   actions restent dans l'en-tête, le logo peut donc y garder sa hauteur. */
@media (max-width: 991px) {
  .anssn-logo img {
    height: 64px;
  }
}

@media (max-width: 575px) {
  .anssn-logo img {
    height: 54px;
  }
}

/* ===========================================================================
   27. Couleur secondaire et signature nationale
   ===========================================================================
   Règle de répartition, à respecter pour toute nouvelle page :

     VERT (--tp-theme-vogue)      ce que l'usager FAIT : boutons, liens
                                  d'action, éléments d'identité. C'est le vert
                                  du logo, donc la couleur de l'institution.
     PÉTROLE (--anssn-secondaire) ce que l'usager CONSULTE : métadonnées
                                  documentaires, références de textes,
                                  étiquettes de rubrique et de formulaire.
     VERT / OR / ROUGE            identification des rubriques et des accès
                                  directs, en aplat franc. Les trois couleurs
                                  du logo travaillent dans la page : une
                                  pastille, une bordure, un cartouche. C'est
                                  ce qui réchauffe un site d'administration,
                                  et l'usage est établi dans les autorités
                                  togolaises.
     ÉMERAUDE / AMBRE / BRIQUE    ÉTATS d'un dossier (validé, en attente,
                                  rejeté). Teintes distinctes des trois
                                  précédentes — émeraude #12805a plus vif que
                                  le vert de marque, brique #b3261e plus
                                  sourde que le rouge national — et employées
                                  seules sur des fonds pâles.

   La frontière entre les deux dernières lignes est la règle qui compte :

     — sur le SITE PUBLIC, la couleur identifie. Un accès direct rouge ne dit
       pas « danger », il dit « ce service-ci » ;
     — dans l'ESPACE EXPLOITANT et l'ADMINISTRATION, la couleur signale. Un
       aplat rouge y veut dire rejeté, et rien d'autre.

   Les deux registres ne se croisent jamais parce qu'ils n'habitent pas les
   mêmes pages. La seule exception est l'encadré de signalement de l'accueil :
   rouge parce qu'il s'agit vraiment d'une alerte à déclarer.

   La couleur du registre « consulter » est un OCRE, tiré de l'or du logo et
   assombri jusqu'à porter du texte. Elle a d'abord été cherchée du côté du
   pétrole, puis du bleu : deux erreurs, pour la même raison. Le logo ne
   contient que du vert, de l'or et du rouge ; une quatrième teinte étrangère
   à la palette se voit immédiatement comme une pièce rapportée, et elle
   refroidit la page au lieu de la réchauffer. L'ocre, lui, est l'or du logo —
   simplement descendu à un niveau où il peut servir de texte.
   =========================================================================== */
:root {
  --anssn-secondaire: #174836;
  --anssn-secondaire-fonce: #0f3325;
  --anssn-secondaire-clair: #eef4f1;

  /* Les trois couleurs, relevées sur le logo lui-même plutôt que sur le
     drapeau officiel : le filet et l'emblème doivent s'accorder exactement. */
  --anssn-tg-vert: var(--anssn-vert);
  --anssn-tg-jaune: var(--anssn-or);
  --anssn-tg-rouge: var(--anssn-rouge);
}

/* --- Registre documentaire : étiquettes de rubrique et de formulaire ------ */
.anssn-news-tag,
.anssn-doc__tag {
  background: var(--anssn-secondaire-clair);
  color: var(--anssn-secondaire-fonce);
}

/* --- États d'une demande (espace exploitant) ------------------------------ */
.anssn-etiquette {
  display: inline-flex;
  align-items: center;
  padding: 5px 14px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 700;
}

.anssn-etiquette--succes {
  background: #e8f6ef;
  color: #12805a;
}

.anssn-etiquette--attente {
  background: #fdf3e3;
  color: #a5661a;
}

.anssn-etiquette--danger {
  background: #fdecea;
  color: #b3261e;
}

/* Information : vert de marque sur fond vert pale. Le bleu d'information,
   pourtant universel, est etranger a la palette du logo et se voit comme une
   piece rapportee. Le vert de marque est assez sombre pour ne pas se
   confondre avec l'emeraude des succes. */
.anssn-etiquette--info {
  background: var(--anssn-vert-clair);
  color: var(--anssn-vert-fonce);
}

/* --- Références de textes réglementaires --------------------------------- */
.anssn-law__ref {
  color: var(--anssn-secondaire);
}

/* --- Icônes des fiches documentaires (formulaires, textes, coopération) --- */
.anssn-doc__icon {
  background: var(--anssn-secondaire-clair);
  color: var(--anssn-secondaire);
}

/* --- Filet national, en bas du pied de page ------------------------------ */
.anssn-drapeau {
  display: flex;
  height: 4px;
  width: 100%;
}

.anssn-drapeau span {
  flex: 1 1 33.333%;
}

.anssn-drapeau span:nth-child(1) { background: var(--anssn-tg-vert); }
.anssn-drapeau span:nth-child(2) { background: var(--anssn-tg-jaune); }
.anssn-drapeau span:nth-child(3) { background: var(--anssn-tg-rouge); }

/* ===========================================================================
   28. Système tonal étendu et états de survol
   ===========================================================================
   La règle du point 27 reste la même (vert = agir, pétrole = consulter) ;
   on lui donne ici de l'amplitude : nuances intermédiaires, fonds de section
   alternés pour rythmer la page, et un état de survol sur chaque surface
   cliquable ou informative.
   =========================================================================== */
:root {
  /* nuances intermédiaires, pour éviter les aplats trop tranchés */
  --anssn-vert-doux: #f5faf7;
  --anssn-vert-moyen: #c5d9cc;
  --anssn-petrole-doux: #f6fbfa;
  --anssn-petrole-moyen: #b9dbd8;
}

/* ---------------------------------------------------------------------------
   28.1 Rythme des sections : alternance de fonds très clairs
   --------------------------------------------------------------------------- */
.tp-da-about {
  background: var(--anssn-secondaire-clair);
}

/* le thème pose ici un dégradé gris-vert d'origine : on le remplace */
.tp-da-service-area {
  background-image: none;
  background-color: var(--anssn-vert-doux);
}

/* ---------------------------------------------------------------------------
   28.2 Registre documentaire élargi au pétrole
   --------------------------------------------------------------------------- */
.anssn-pillar__icon,
.anssn-contact-card__icon,
.anssn-empty__icon,
.anssn-widget .anssn-search__icon {
  background: var(--anssn-secondaire-clair);
  color: var(--anssn-secondaire);
}

.anssn-step__num {
  background: var(--anssn-secondaire);
}

.anssn-step:not(:last-child)::before {
  background: var(--anssn-petrole-moyen);
}

.anssn-widget__title {
  color: var(--anssn-secondaire-fonce);
}

.anssn-mini__date {
  color: var(--anssn-secondaire);
}

/* filet du fil d'ariane : marqueur de position, registre documentaire */
.anssn-breadcrumb .breadcrumb__list span.dvdr-line {
  background-color: var(--anssn-secondaire);
}

/* ---------------------------------------------------------------------------
   28.3 Survols manquants — surfaces documentaires
   --------------------------------------------------------------------------- */
.anssn-law {
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.anssn-law:hover {
  border-color: var(--anssn-petrole-moyen);
  box-shadow: 0 8px 18px rgba(15, 23, 42, .06);
  transform: translateY(-2px);
}

.anssn-pillar__icon {
  transition: background-color .18s ease, color .18s ease;
}

.anssn-pillar:hover .anssn-pillar__icon {
  background: var(--anssn-secondaire);
  color: #fff;
}

.anssn-step__num {
  transition: background-color .18s ease, transform .18s ease;
}

.anssn-step:hover .anssn-step__num {
  background: var(--anssn-secondaire-fonce);
  transform: scale(1.06);
}

.anssn-step__title {
  transition: color .18s ease;
}

.anssn-step:hover .anssn-step__title {
  color: var(--anssn-secondaire-fonce);
}

.anssn-doc__icon,
.anssn-contact-card__icon {
  transition: background-color .18s ease, color .18s ease;
}

.anssn-doc:hover .anssn-doc__icon,
.anssn-contact-card:hover .anssn-contact-card__icon {
  background: var(--anssn-secondaire);
  color: #fff;
}

.anssn-doc__title {
  transition: color .18s ease;
}

.anssn-doc:hover .anssn-doc__title {
  color: var(--anssn-secondaire-fonce);
}

/* Vignette d'article : l'image se rapproche légèrement au survol */
.anssn-news-card__media img,
.anssn-mini__thumb img {
  transition: transform .35s ease;
}

.anssn-news-card:hover .anssn-news-card__media img,
.anssn-mini:hover .anssn-mini__thumb img {
  transform: scale(1.05);
}

.anssn-news-card__title a {
  transition: color .18s ease;
}

.anssn-news-card:hover .anssn-news-card__title a {
  color: var(--anssn-secondaire-fonce);
}

/* Indicateurs chiffrés */
.anssn-figures__item {
  transition: transform .18s ease;
}

.anssn-figures__value {
  transition: color .18s ease;
}

.anssn-figures__item:hover {
  transform: translateY(-2px);
}

.anssn-figures__item:hover .anssn-figures__value {
  color: var(--anssn-secondaire);
}

/* ---------------------------------------------------------------------------
   28.4 Survols manquants — surfaces d'action (restent vertes)
   --------------------------------------------------------------------------- */
.anssn-news-card__link,
.anssn-service-card__link {
  transition: color .18s ease;
}

.anssn-news-card__link i,
.anssn-service-card__link i {
  transition: transform .18s ease;
}

.anssn-news-card__link:hover,
.anssn-service-card__link:not(.is-inerte):hover {
  color: var(--anssn-brand-dark);
}

.anssn-news-card__link:hover i,
.anssn-service-card__link:hover i {
  transform: translateX(4px);
}

.anssn-service-card__icon {
  transition: background-color .18s ease, color .18s ease;
}

.anssn-service-card:not(.anssn-service-card--soon):hover .anssn-service-card__icon {
  background: var(--tp-theme-vogue);
  color: #fff;
}

/* Menu latéral de rubrique : navigation documentaire */
.anssn-sidenav a:hover {
  background: var(--anssn-secondaire-clair);
  color: var(--anssn-secondaire-fonce);
}

/* Fil d'ariane */
.anssn-breadcrumb .breadcrumb__list span a {
  transition: color .18s ease;
}

.anssn-breadcrumb .breadcrumb__list span a:hover {
  color: var(--tp-theme-vogue);
}

/* ---------------------------------------------------------------------------
   28.5 Pied de page : liens et icônes sociales
   --------------------------------------------------------------------------- */
.da-footer .tp-footer__widget ul li a,
.da-footer .tp-footer-menu ul li a {
  transition: color .18s ease, padding-left .18s ease;
}

.da-footer .tp-footer__widget ul li a:hover,
.da-footer .tp-footer-menu ul li a:hover {
  color: var(--tp-theme-vogue);
  padding-left: 4px;
}

.da-footer__top-social span a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--anssn-brand-light);
  color: var(--tp-theme-vogue);
  transition: all .18s ease;
}

.da-footer__top-social span a:hover {
  background: var(--tp-theme-vogue);
  color: #fff;
  transform: translateY(-2px);
}

/* ===========================================================================
   29. Éradication des couleurs résiduelles du thème d'origine
   ===========================================================================
   Le pack Gencio pose du rose (#ff3c58), du violet (#6c60fe), de l'orange
   (#ff3221) et un vert pomme (#80be2d) sur des éléments qui n'avaient pas
   encore été repris. Le vert est le plus gênant : il entre en conflit avec le
   vert d'état « validé / conforme ». Tout est ramené à la palette ANSSN.
   =========================================================================== */

/* Bouton de retour en haut de page — était rose */
.tp-back-to-top {
  background: var(--tp-theme-vogue);
}

.tp-back-to-top:hover {
  background: var(--anssn-brand-dark);
  color: #fff;
}

/* Bouton plein : fond en bleu clair du thème (#0686d8), survol en vert pomme */
.tp-solid-btn {
  background-color: var(--tp-theme-vogue);
}

.tp-solid-btn:hover {
  background-color: var(--anssn-brand-dark);
}

/* Newsletter du pied de page — base rose, survol violet */
.tp-footer-from form button {
  background-color: var(--tp-theme-vogue);
}

.tp-footer-from form button:hover {
  background-color: var(--anssn-brand-dark);
}

.tp-footer-from form span i {
  color: var(--tp-theme-vogue);
}

/* Astérisque de la mention « vos données » — était violet */
.tp-form-note span {
  color: var(--tp-theme-vogue);
}

/* Menu bas du pied de page — survol rose */
.tp-footer-menu ul li:hover a,
.tp-footer-menu ul li a:hover {
  color: var(--tp-theme-vogue);
}

/* Icônes sociales du pied de page — survols violet et orange */
.bs-footer__top-social a:hover,
.da-footer__top-social a:hover {
  color: #fff;
  background: var(--tp-theme-vogue);
}

/* Réseaux sociaux du panneau mobile — survol rose */
.tp-offcanvas__social a:hover {
  color: var(--tp-theme-vogue);
}

/* Bouton hamburger mobile — était violet */
.tp-header-nav {
  background-color: var(--tp-theme-vogue);
}

/* Titre animé du hero : barre de progression et mot visible, tous deux roses */
.cd-headline.loading-bar .cd-words-wrapper::after,
.da-hero-section__title.cd-headline.loading-bar .cd-words-wrapper::after {
  background-color: var(--anssn-vert-moyen);
}

.cd-headline.loading-bar b.is-visible {
  color: var(--tp-theme-vogue);
}

/* ---------------------------------------------------------------------------
   29.1 Boutons secondaires ramenés dans la palette
   --------------------------------------------------------------------------- */

/* « Découvrir l'autorité » : gris neutre du thème, texte noir */
.tp-grey-btn {
  background-color: var(--anssn-brand-light);
  color: var(--tp-theme-vogue);
  border: 1px solid transparent;
  transition: all .18s ease;
}

.tp-grey-btn:hover {
  background-color: #fff;
  border-color: var(--anssn-vert-moyen);
  color: var(--anssn-brand-dark);
}

/* « Toutes les actualités » : texte noir au repos */
.tp-border-btn.br-btn-bg-dark {
  color: var(--tp-theme-vogue);
  border: 1px solid var(--anssn-vert-moyen);
  transition: all .18s ease;
}

.tp-border-btn:hover.br-btn-bg-dark {
  background-color: var(--tp-theme-vogue);
  border-color: var(--tp-theme-vogue);
  color: #fff;
}

/* « J'ai déjà un compte » */
.anssn-account__secondary:hover {
  background: var(--tp-theme-vogue);
  border-color: var(--tp-theme-vogue);
  color: #fff;
}

/* ---------------------------------------------------------------------------
   29.2 Menu principal : indicateur de sous-menu et taille de texte
   --------------------------------------------------------------------------- */
.da-menu ul li.has-dropdown > a::after {
  content: "\f107";                       /* chevron bas */
  font-family: var(--tp-ff-fontawesome);
  font-weight: 400;
  font-size: 12px;
  color: currentColor;
  margin-left: 6px;
  display: inline-block;
  transition: transform .18s ease;
}

.da-menu ul li.has-dropdown:hover > a::after {
  transform: rotate(180deg);
}

.da-menu ul li a {
  font-size: 13.5px;
}

/* ===========================================================================
   30. Différenciation des survols
   ===========================================================================
   Jusqu'ici tout survolait vers le même vert : l'interface manquait de relief.
   Nouvelle répartition :

     ACTION PRINCIPALE   vert au repos, vert foncé au survol
                         (déposer, se connecter, envoyer)
     ACTION SECONDAIRE   au repos neutre ou vert clair, PÉTROLE au survol
                         (découvrir, consulter, revenir, s'abonner)

   Le changement de teinte au survol distingue le geste principal du geste
   d'appoint, au lieu de les confondre dans un même vert.
   =========================================================================== */

/* « Découvrir l'autorité » */
.tp-grey-btn:hover {
  background-color: var(--anssn-secondaire);
  border-color: var(--anssn-secondaire);
  color: #fff;
}

/* « Toutes les actualités » */
.tp-border-btn:hover.br-btn-bg-dark {
  background-color: var(--anssn-secondaire);
  border-color: var(--anssn-secondaire);
  color: #fff;
}

/* « J'ai déjà un compte » */
.anssn-account__secondary:hover {
  background: var(--anssn-secondaire);
  border-color: var(--anssn-secondaire);
  color: #fff;
}

/* Retour en haut de page */
.tp-back-to-top:hover {
  background: var(--anssn-secondaire);
  color: #fff;
}

/* Abonnement aux publications : geste d'appoint, pas une démarche */
.tp-footer-from form button:hover {
  background-color: var(--anssn-secondaire);
}

/* Liens du pied de page : registre de consultation */
.da-footer .tp-footer__widget ul li a:hover,
.da-footer .tp-footer-menu ul li a:hover,
.tp-footer-menu ul li:hover a {
  color: var(--anssn-secondaire);
}

.da-footer__top-social span a:hover,
.bs-footer__top-social a:hover,
.da-footer__top-social a:hover {
  background: var(--anssn-secondaire);
  color: #fff;
}


/* ===========================================================================
   31. Section « Vos démarches réglementaires »
   ===========================================================================
   Parti pris : les six cartes sont IDENTIQUES au repos. Rien ne les distingue
   tant que l'usager ne les survole pas — c'est le survol seul qui révèle la
   carte visée. Une grille où chaque carte a déjà sa couleur oblige à décoder
   un code couleur avant de lire ; une grille uniforme se parcourt.
   =========================================================================== */

/* --- Fond : fondu dans la page, pas de bloc tranché ---------------------- */
.tp-da-service-area {
  position: relative;
  background-color: transparent;
  background-image:
    linear-gradient(180deg,
      #ffffff 0%,
      var(--anssn-vert-doux) 18%,
      #f4f8fb 50%,
      var(--anssn-petrole-doux) 82%,
      #ffffff 100%);
}

/* halo très diffus, pour éviter l'aplat uni */
.tp-da-service-area::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 15% 25%, rgba(38, 103, 73, .05), transparent 55%),
    radial-gradient(ellipse at 85% 75%, rgba(20, 116, 111, .05), transparent 55%);
}

.tp-da-service-area > .container {
  position: relative;
  z-index: 1;
}

/* fond vert plein (voir section 32) : le titre passe en blanc pour rester
   lisible — y compris le mot mis en valeur, dont le rectangle de thème
   d'origine peint le texte en vert par -webkit-text-fill-color */
.tp-da-service-area .tp-section__title,
.tp-da-service-area .tp-section__title span {
  color: #fff;
  -webkit-text-fill-color: #fff;
}

.tp-da-service-area .tp-section__subtitle {
  color: rgba(255, 255, 255, .85) !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* --- Cartes : strictement identiques au repos ---------------------------- */
.tp-da-service-area .anssn-service-card,
.anssn-service-card {
  background: #fff;
  border: 1px solid #e0eae3;
}

.anssn-service-card__icon {
  background: var(--anssn-secondaire-clair);
  color: var(--anssn-secondaire);
}

.anssn-service-card__title {
  color: var(--tp-theme-vogue);
}

.anssn-service-card__link {
  color: var(--anssn-secondaire);
}

/* liseré supérieur : masqué au repos, déployé au survol */
.anssn-service-card::before {
  background: linear-gradient(90deg, var(--tp-theme-vogue), var(--anssn-secondaire));
}

/* --- Survol : c'est ici que tout change ---------------------------------- */
.anssn-service-card:hover {
  border-color: var(--anssn-petrole-moyen);
  box-shadow: 0 10px 24px rgba(15, 23, 42, .08);
}

.anssn-service-card:hover .anssn-service-card__icon {
  background: var(--anssn-secondaire);
  color: #fff;
}

.anssn-service-card:hover .anssn-service-card__title {
  color: var(--anssn-secondaire-fonce);
}

.anssn-service-card:hover .anssn-service-card__link {
  color: var(--anssn-secondaire-fonce);
}

/* Le service de phase 2 reste en retrait, sans réagir au survol */
.anssn-service-card--soon {
  background: #fbfcfd;
}

.anssn-service-card--soon:hover {
  border-color: #e0eae3;
  box-shadow: none;
  transform: none;
}

.anssn-service-card--soon::before,
.anssn-service-card--soon:hover::before {
  transform: scaleX(0);
}

.anssn-service-card--soon .anssn-service-card__icon,
.anssn-service-card--soon:hover .anssn-service-card__icon {
  background: #f1f4f1;
  color: #98a397;
}

.anssn-service-card--soon .anssn-service-card__title,
.anssn-service-card--soon:hover .anssn-service-card__title {
  color: #79857b;
}

.anssn-service-card--soon .anssn-service-card__link,
.anssn-service-card--soon:hover .anssn-service-card__link {
  color: #98a397;
}

/* ---------------------------------------------------------------------------
   31.1 Bande de surlignage des titres de section
   Le thème glisse un rectangle de 10px (#e2e4ff) derrière le mot mis en
   valeur. Prévu pour un fond blanc, il barre le texte partout ailleurs.
   --------------------------------------------------------------------------- */
.tp-section__title span::before {
  display: none;
}

/* ===========================================================================
   32. Section services : autre traitement de fond
   ===========================================================================
   Le dégradé fondu manquait de caractère. On passe à une teinte de fond avec
   deux halos très diffus en coin qui font varier la teinte comme le ferait
   une image de fond, plus une trame de points fine. Le tout reste clair et
   sobre : rien n'impose le vert, il affleure.

   Image générée (demande du 2026-08-06, « style nucléaire ») : dégradé
   --tp-theme-vogue → --anssn-brand-dark (les deux verts de la marque, mêmes
   arrêts que .tp-grd-btn) avec un motif atomique discret plutôt qu'un trèfle
   de radioactivité — l'agence encadre la sûreté, elle ne signale pas un
   danger. SVG fait main (fond-nucleaire.svg).

   Filtre sombre ajouté par-dessus (demande du 2026-08-06, à l'essai).
   =========================================================================== */
.tp-da-service-area {
  background-color: var(--tp-theme-vogue);
  background-image: url('../img/services/fond-nucleaire.svg');
  background-size: cover;
  background-position: center;
  border-top: none;
  border-bottom: none;
}

.tp-da-service-area::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: rgba(3, 10, 28, .4);
}

/* les cartes reprennent un blanc franc, pour se détacher de la trame */
.tp-da-service-area .anssn-service-card {
  background: #fff;
}

.tp-da-service-area .anssn-service-card--soon {
  background: #fbfcfd;
}

/* ---------------------------------------------------------------------------
   32.1 Bouton d'envoi de la newsletter
   S'abonner aux publications est un geste d'appoint, pas une démarche
   réglementaire : le bouton adopte le pétrole au repos comme au survol.
   --------------------------------------------------------------------------- */
.tp-footer-from form button,
.da-footer .tp-footer-from form button {
  background-color: var(--anssn-secondaire);
  background-image: none;
}

.tp-footer-from form button:hover,
.da-footer .tp-footer-from form button:hover {
  background-color: var(--anssn-secondaire-fonce);
}

.tp-footer-from form span i {
  color: var(--anssn-secondaire);
}

/* ---------------------------------------------------------------------------
   32.2 Organigramme déposé en image
   Affiché dans la page plutôt que réduit à un lien : l'usager doit pouvoir
   lire l'organisation sans télécharger de fichier. Le lien de téléchargement
   reste proposé sous l'image, pour la pleine résolution.
   --------------------------------------------------------------------------- */
.anssn-organigramme {
  margin: 0 0 20px;
  padding: 16px;
  background: #fff;
  border: 1px solid var(--anssn-vert-moyen);
  border-radius: 12px;
}

.anssn-organigramme img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
}

/* ===========================================================================
   33. FAQ — accordéon
   ===========================================================================
   Composant propre plutôt que la classe .tp-accordion du thème, qui pose un
   rond rose (#ff3c58) autour du signe +/-. Registre documentaire (pétrole) :
   consulter une réponse n'est pas une démarche.
   =========================================================================== */
.anssn-faq-groupe {
  margin-bottom: 44px;
}

.anssn-faq-groupe:last-of-type {
  margin-bottom: 30px;
}

.anssn-faq-groupe__titre {
  font-size: 20px;
  color: var(--tp-theme-vogue);
  margin-bottom: 18px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eef0f2;
}

.anssn-accordion .accordion-item {
  border: 1px solid #e0eae3;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 12px;
}

.anssn-accordion .accordion-item:last-child {
  margin-bottom: 0;
}

.anssn-accordion .accordion-button {
  font-size: 15.5px;
  font-weight: 700;
  color: var(--tp-theme-vogue);
  background-color: #fff;
  padding: 18px 22px;
  box-shadow: none;
  transition: background-color .18s ease, color .18s ease;
}

.anssn-accordion .accordion-button:hover {
  background-color: var(--anssn-petrole-doux);
}

.anssn-accordion .accordion-button:not(.collapsed) {
  background-color: var(--anssn-secondaire-clair);
  color: var(--anssn-secondaire-fonce);
  box-shadow: none;
}

.anssn-accordion .accordion-button:focus {
  box-shadow: 0 0 0 3px rgba(38, 103, 73, .1);
  border-color: transparent;
  z-index: 1;
}

/* icône de police plutôt que le chevron SVG par défaut de Bootstrap :
   plus simple et plus fiable à recolorer que le data-URI intégré. */
.anssn-accordion .accordion-button::after {
  background-image: none;
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  content: "\f078";
  font-size: 13px;
  width: auto;
  height: auto;
  color: var(--anssn-secondaire);
  transition: transform .2s ease, color .18s ease;
}

.anssn-accordion .accordion-button:not(.collapsed)::after {
  transform: rotate(180deg);
  color: var(--anssn-secondaire-fonce);
}

.anssn-accordion .accordion-body {
  padding: 2px 22px 20px;
  font-size: 14.5px;
  line-height: 1.7;
  color: #4a574e;
}

/* ===========================================================================
   34. Bandeau de consentement aux cookies
   ===========================================================================
   Les deux boutons ont la même taille et la même prééminence : ni le refus ni
   l'acceptation n'est mis en avant aux dépens de l'autre.
   =========================================================================== */
.anssn-cookies {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  background: #fff;
  border-top: 1px solid #e4eae5;
  box-shadow: 0 -8px 24px rgba(15, 23, 42, .08);
  transform: translateY(100%);
  transition: transform .32s ease;
}

.anssn-cookies.est-visible {
  transform: translateY(0);
}

.anssn-cookies__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 18px 24px;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.anssn-cookies__icon {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: 11px;
  background: var(--anssn-secondaire-clair);
  color: var(--anssn-secondaire);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.anssn-cookies__texte {
  flex: 1 1 380px;
  min-width: 0;
}

.anssn-cookies__texte p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: #4a574e;
}

.anssn-cookies__texte a {
  font-weight: 700;
  color: var(--tp-theme-vogue);
  text-decoration: underline;
}

.anssn-cookies__actions {
  flex: 0 0 auto;
  display: flex;
  gap: 12px;
  margin-left: auto;
}

.anssn-cookies__btn {
  min-width: 128px;
  text-align: center;
  padding: 12px 22px;
  font-size: 13.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .3px;
  border-radius: 8px;
  cursor: pointer;
  transition: all .18s ease;
}

.anssn-cookies__btn--discret {
  background: #fff;
  border: 1px solid #d3e2d9;
  color: #4a574e;
}

.anssn-cookies__btn--discret:hover {
  border-color: var(--tp-theme-vogue);
  color: var(--tp-theme-vogue);
}

.anssn-cookies__btn--plein {
  background: var(--anssn-secondaire);
  border: 1px solid var(--anssn-secondaire);
  color: #fff;
}

.anssn-cookies__btn--plein:hover {
  background: var(--anssn-secondaire-fonce);
  border-color: var(--anssn-secondaire-fonce);
}

@media (max-width: 767px) {
  .anssn-cookies__inner {
    padding: 16px 18px;
  }
  .anssn-cookies__actions {
    width: 100%;
    margin-left: 0;
  }
  .anssn-cookies__btn {
    flex: 1 1 0;
    min-width: 0;
  }
}

/* ---------------------------------------------------------------------------
   Cloche de notifications de l'espace exploitant.

   Même rôle que celle de l'espace d'administration : le courriel atteint qui
   relève sa boîte, la cloche répond à « qu'est-ce qui a bougé sur mes
   dossiers ? ». Les deux feuilles étant autonomes, les règles sont reprises
   ici plutôt que partagées.
   --------------------------------------------------------------------------- */
.exp-cloche {
  position: relative;
}

.exp-cloche__compteur {
  position: absolute;
  top: 2px;
  right: 1px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 9px;
  background: #d64545;
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 17px;
  text-align: center;
  border: 2px solid #fff;
}

.exp-cloche__volet {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 340px;
  max-width: calc(100vw - 32px);
  background: #fff;
  border: 1px solid #eef0f2;
  border-radius: 11px;
  box-shadow: 0 14px 38px rgba(12, 40, 27, .16);
  z-index: 60;
  overflow: hidden;
  text-align: left;
}

.exp-cloche__entete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 14px;
  border-bottom: 1px solid #eef0f2;
  font-size: 12.5px;
  font-weight: 700;
  color: #1e2a23;
}

.exp-cloche__lien {
  border: 0;
  background: transparent;
  padding: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--anssn-vert);
  cursor: pointer;
}

.exp-cloche__ligne {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 11px 14px;
  border-bottom: 1px solid #eef0f2;
  font-size: 13px;
  line-height: 1.45;
  color: #36423a;
}

.exp-cloche__ligne:last-child {
  border-bottom: 0;
}

.exp-cloche__ligne:hover {
  background: #f7faf8;
}

.exp-cloche__ligne i {
  margin-top: 2px;
  color: #879287;
}

/* Le liseré est le seul signe distinctif : une notification lue reste
   lisible, elle ne doit pas pour autant attirer l'oeil comme une nouvelle. */
.exp-cloche__ligne.est-non-lue {
  background: var(--anssn-vert-clair);
  box-shadow: inset 3px 0 0 var(--anssn-vert);
}

.exp-cloche__ligne.est-non-lue i {
  color: var(--anssn-vert);
}

.exp-cloche__detail,
.exp-cloche__date {
  display: block;
  font-size: 12px;
  color: #697568;
}

.exp-cloche__date {
  color: #98a397;
  margin-top: 2px;
}

.exp-cloche__vide {
  padding: 20px 14px;
  text-align: center;
  font-size: 12.5px;
  color: #98a397;
}

/* ===========================================================================
   35. Rubrique « Évènements » — agenda
   ===========================================================================
   Un évènement se lit d'abord par sa date : le bloc de gauche la porte en
   pastille, détachée du texte, pour que la liste se parcoure à la verticale
   sans lire les titres. Les évènements passés reprennent la carte des
   actualités — ils relèvent alors de l'archive, plus de l'agenda.
   =========================================================================== */
.anssn-agenda-titre {
  font-size: 24px;
  font-weight: 700;
  color: var(--tp-common-black);
  margin-bottom: 26px;
  padding-bottom: 12px;
  border-bottom: 1px solid #e7eaee;
}

.anssn-agenda-item {
  display: flex;
  gap: 24px;
  padding: 24px;
  margin-bottom: 18px;
  background: #fff;
  border: 1px solid #e7eaee;
  border-radius: 10px;
  transition: all .18s ease;
}

.anssn-agenda-item:hover {
  border-color: var(--tp-theme-vogue);
  box-shadow: 0 8px 22px rgba(15, 23, 42, .07);
}

.anssn-agenda-item__date {
  flex: 0 0 82px;
  align-self: flex-start;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 14px 8px;
  border-radius: 10px;
  background: var(--anssn-brand-light);
  color: var(--tp-theme-vogue);
  text-align: center;
  line-height: 1.1;
}

.anssn-agenda-item__jour {
  font-size: 28px;
  font-weight: 800;
}

.anssn-agenda-item__mois {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-top: 3px;
}

.anssn-agenda-item__annee {
  font-size: 12px;
  opacity: .7;
  margin-top: 2px;
}

.anssn-agenda-item__corps {
  flex: 1 1 auto;
  min-width: 0;
}

.anssn-agenda-item__titre {
  font-size: 19px;
  font-weight: 700;
  line-height: 1.35;
  margin: 10px 0 8px;
}

.anssn-agenda-item__titre a {
  color: var(--tp-common-black);
}

.anssn-agenda-item__titre a:hover {
  color: var(--tp-theme-vogue);
}

.anssn-agenda-item__resume {
  font-size: 14.5px;
  margin-bottom: 12px;
}

.anssn-agenda-item__infos {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
  font-size: 13.5px;
  color: var(--anssn-secondaire-fonce);
}

.anssn-agenda-item__infos i {
  margin-right: 6px;
  color: var(--anssn-secondaire);
}

@media (max-width: 575px) {
  .anssn-agenda-item {
    flex-direction: column;
    gap: 14px;
  }
  .anssn-agenda-item__date {
    flex-direction: row;
    gap: 8px;
    align-self: flex-start;
    padding: 8px 14px;
  }
  .anssn-agenda-item__jour {
    font-size: 20px;
  }
}

/* Informations pratiques, en marge de la page d'un évènement. */
.anssn-infos__ligne {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid #eef0f2;
  font-size: 14px;
}

.anssn-infos__ligne:last-child {
  border-bottom: 0;
}

.anssn-infos__icone {
  color: var(--tp-theme-vogue);
  margin-top: 2px;
}

.anssn-infos__label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: #879287;
}

/* Mention d'un évènement déjà tenu : information d'état, donc neutre —
   ni validée, ni en attente (cf. section 27). */
.anssn-etat {
  display: inline-block;
  padding: 3px 11px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}

.anssn-etat--neutre {
  background: #eef0f2;
  color: #59655c;
}

/* ===========================================================================
   36. Rubrique « Liens utiles »
   ===========================================================================
   Chaque organisme se présente par son sigle, qui est son identité d'usage —
   « AIEA » plus que son intitulé complet. Le nom d'hôte affiché sous la
   description dit où mène le lien avant qu'on ne quitte le site.
   =========================================================================== */
.anssn-lien {
  display: flex;
  gap: 16px;
  height: 100%;
  padding: 20px;
  background: #fff;
  border: 1px solid #e7eaee;
  border-radius: 10px;
  transition: all .18s ease;
}

.anssn-lien:hover {
  border-color: var(--tp-theme-vogue);
  box-shadow: 0 8px 22px rgba(15, 23, 42, .07);
}

/* La pastille s'élargit avec le sigle : « AIEA » tient dans le carré,
   « AFCONE » le déborderait à largeur fixe. */
.anssn-lien__sigle {
  flex: 0 0 auto;
  min-width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  border-radius: 10px;
  background: var(--anssn-brand-light);
  color: var(--tp-theme-vogue);
  font-size: 13.5px;
  font-weight: 800;
  letter-spacing: .3px;
  text-align: center;
}

.anssn-lien__corps {
  min-width: 0;
}

.anssn-lien__nom {
  font-size: 16px;
  font-weight: 700;
  color: var(--tp-common-black);
  line-height: 1.35;
}

.anssn-lien:hover .anssn-lien__nom {
  color: var(--tp-theme-vogue);
}

.anssn-lien__texte {
  font-size: 13.5px;
  color: #59655c;
  margin-top: 6px;
  line-height: 1.55;
}

.anssn-lien__domaine {
  margin-top: 10px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--anssn-secondaire);
}

.anssn-lien__domaine i {
  margin-left: 4px;
  font-size: 11px;
}

/* Bande « Liens utiles » du pied de page : une sortie vers l'extérieur, en
   retrait des rubriques du site, entre les colonnes et la ligne de mentions.
   Le corps du pied de page est clair (seule la ligne de mentions est verte) :
   la bande en reprend donc les gris, pas le blanc de la ligne du bas. */
.anssn-footer-liens {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px 22px;
  padding: 18px 0;
  border-top: 1px solid #dbe7df;
}

.anssn-footer-liens__titre {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: #697568;               /* 5:1 sur le fond du pied de page */
}

.anssn-footer-liens ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.anssn-footer-liens ul li a {
  font-size: 13.5px;
  color: #495449;
}

.anssn-footer-liens ul li a:hover {
  color: var(--tp-theme-vogue);
}

.anssn-footer-liens ul li a i {
  margin-left: 4px;
  font-size: 11px;
}

/* Pictogramme de substitution quand l'organisme n'a pas de sigle. */
.anssn-lien__sigle i {
  font-size: 20px;
}

/* ===========================================================================
   37. Carrousel horizontal de cartes
   ===========================================================================
   Sert au bloc « Actualités récentes » de l'accueil. Le balisage tient debout
   sans JavaScript : la piste est alors une liste qui défile à la main, avec
   accrochage sur chaque carte. Swiper, quand il se charge, prend la main et
   neutralise ce défilement natif (classe .est-actif).
   =========================================================================== */
.anssn-carrousel {
  overflow: hidden;
}

.anssn-carrousel .swiper-wrapper {
  display: flex;
  gap: 30px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 6px;
}

.anssn-carrousel .swiper-slide {
  flex: 0 0 calc((100% - 60px) / 3);
  scroll-snap-align: start;
  height: auto;                 /* cartes de hauteur égale dans la rangée */
}

/* Une fois Swiper en place, c'est lui qui positionne les diapositives :
   l'espacement et le défilement natifs lui laissent la main. */
.anssn-carrousel.est-actif .swiper-wrapper {
  gap: 0;
  overflow: visible;
}

.anssn-carrousel.est-actif .swiper-slide {
  flex: 0 0 auto;
}

.anssn-carrousel .anssn-news-card {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.anssn-carrousel .anssn-news-card__body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

.anssn-carrousel .anssn-news-card__link {
  margin-top: auto;
}

@media (max-width: 1199px) {
  .anssn-carrousel .swiper-slide {
    flex-basis: calc((100% - 30px) / 2);
  }
}

@media (max-width: 767px) {
  .anssn-carrousel .swiper-slide {
    flex-basis: 85%;
  }
}

/* Barre de commande sous la piste : points de position à gauche, flèches à
   droite — l'ordre de lecture va de l'état à l'action. */
.anssn-carrousel__barre {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 28px;
}

.anssn-carrousel__points {
  display: flex;
  align-items: center;
  gap: 8px;
}

.anssn-carrousel__points .swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #c5d6cb;
  opacity: 1;
  transition: all .18s ease;
  cursor: pointer;
}

.anssn-carrousel__points .swiper-pagination-bullet-active {
  width: 24px;
  background: var(--tp-theme-vogue);
}

.anssn-carrousel__nav {
  display: flex;
  gap: 10px;
}

.anssn-carrousel__btn {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #dee5df;
  border-radius: 50%;
  background: #fff;
  color: var(--tp-common-black);
  transition: all .18s ease;
}

.anssn-carrousel__btn:hover {
  border-color: var(--tp-theme-vogue);
  background: var(--tp-theme-vogue);
  color: #fff;
}

/* Le fil tourne en boucle : la commande ne s'éteint que lorsqu'il y a trop peu
   de publications pour faire défiler quoi que ce soit. Elle reste alors là,
   visiblement hors d'usage. */
.anssn-carrousel__btn.swiper-button-disabled,
.anssn-carrousel__btn.swiper-button-lock {
  opacity: .4;
  cursor: default;
}

.anssn-carrousel__btn.swiper-button-disabled:hover,
.anssn-carrousel__btn.swiper-button-lock:hover {
  border-color: #dee5df;
  background: #fff;
  color: var(--tp-common-black);
}

/* ===========================================================================
   38. Galerie de visuels d'un évènement
   ===========================================================================
   Vignettes de format constant (recadrage centré) pour que la grille reste
   régulière quelles que soient les photos déposées ; la loupe n'apparaît qu'au
   survol, l'image en grand s'ouvrant par-dessus la page.
   =========================================================================== */
.anssn-galerie__titre {
  font-size: 20px;
  font-weight: 700;
  color: var(--tp-common-black);
  margin-bottom: 18px;
}

.anssn-galerie__vignette {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 10px;
  background: #eef0f2;
  aspect-ratio: 4 / 3;
}

.anssn-galerie__vignette img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .3s ease;
}

.anssn-galerie__vignette:hover img {
  transform: scale(1.05);
}

.anssn-galerie__loupe {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(38, 103, 73, .45);
  color: #fff;
  font-size: 22px;
  opacity: 0;
  transition: opacity .2s ease;
}

.anssn-galerie__vignette:hover .anssn-galerie__loupe,
.anssn-galerie__vignette:focus-visible .anssn-galerie__loupe {
  opacity: 1;
}

.anssn-galerie__legende {
  margin: 8px 0 0;
  font-size: 13px;
  line-height: 1.45;
  color: #697568;
}

/* ===========================================================================
   39. Page d'un type de demande
   ===========================================================================
   Vitrine publique d'un formulaire : qui est concerné, ce qu'il faut savoir,
   la composition du dossier et la redevance, avant tout compte.
   =========================================================================== */

/* Activités déclarables, rendues en jetons : ce sont des valeurs à choisir
   dans le formulaire, pas une énumération de prose. */
.anssn-jetons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

.anssn-jeton {
  display: inline-block;
  padding: 5px 13px;
  border-radius: 999px;
  background: var(--anssn-brand-light);
  color: var(--anssn-brand-dark);
  font-size: 13px;
  font-weight: 600;
}

/* Engagement signé par le demandeur : cité, donc détaché du fil du texte. */
.anssn-engagement {
  padding: 18px 22px;
  border-left: 3px solid var(--tp-theme-vogue);
  background: #f7f9fd;
  border-radius: 0 8px 8px 0;
}

.anssn-engagement p {
  margin-bottom: 8px;
  font-size: 14px;
}

.anssn-engagement p:last-child {
  margin-bottom: 0;
}

/* Encadré d'action de la colonne latérale. */
.anssn-widget--action {
  background: var(--anssn-brand-light);
  border: 1px solid #dbe7df;
}

.anssn-bloc-btn {
  display: block;
  width: 100%;
  text-align: center;
}

.anssn-widget__note {
  margin: 12px 0 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: #697568;
}

/* Deux actions sous une fiche de formulaire : voir le détail, télécharger. */
.anssn-doc__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  margin-top: 10px;
}

.anssn-doc__title a {
  color: inherit;
}

.anssn-doc__title a:hover {
  color: var(--tp-theme-vogue);
}

.anssn-service-card__link--doux {
  color: var(--anssn-secondaire);
}

/* Téléchargement du formulaire : le format et ce qu'il permet comptent autant
   que l'action, d'où la ligne d'explication sous l'intitulé. */
.anssn-telecharger {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid #dbe7df;
  border-radius: 8px;
  transition: all .18s ease;
}

.anssn-telecharger:hover {
  border-color: var(--tp-theme-vogue);
  box-shadow: 0 6px 16px rgba(15, 23, 42, .07);
}

.anssn-telecharger__icone {
  flex: 0 0 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: var(--anssn-brand-light);
  color: var(--tp-theme-vogue);
  font-size: 17px;
}

.anssn-telecharger__titre {
  font-size: 14px;
  font-weight: 700;
  color: var(--tp-common-black);
  line-height: 1.3;
}

.anssn-telecharger:hover .anssn-telecharger__titre {
  color: var(--tp-theme-vogue);
}

.anssn-telecharger__format {
  font-size: 12.5px;
  color: #697568;
  margin-top: 2px;
}

/* ===========================================================================
   40. Dossier d'autorisation vu par l'exploitant
   ===========================================================================
   L'écran du dossier empilait tout dans une carte unique, sections et
   formulaire confondus, avec les titres de section du site institutionnel —
   calibrés pour des pages de contenu, pas pour un guichet. Il se lit
   désormais en trois temps :

     1. l'en-tête     ce qu'est le dossier, où il en est, ses chiffres clés ;
     2. l'appel       ce que l'autorité attend, s'il y a lieu, avant tout ;
     3. les cartes    pièces, suivi, informations déclarées.

   Le fil des étapes reprend celui de l'écran de l'agent instructeur : les
   deux côtés du guichet décrivent le même parcours de la même façon.
   =========================================================================== */
.exp-dossier {
  background: #fff;
  border: 1px solid #eef0f2;
  border-radius: 14px;
  padding: 24px 28px;
  margin-bottom: 20px;
}

.exp-dossier__entete {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.exp-dossier__reference {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--tp-theme-vogue);
}

.exp-dossier__objet {
  margin: 6px 0 4px;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.35;
  color: #1e2a23;
}

.exp-dossier__meta {
  margin: 0;
  font-size: 13px;
  color: #697568;
}

.exp-badge {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  padding: 6px 16px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 700;
}

.exp-badge--succes { background: #e8f6ef; color: #12805a; }
.exp-badge--attente { background: #fdf3e3; color: #a5661a; }
.exp-badge--danger { background: #fdecea; color: #b3261e; }
.exp-badge--info { background: var(--anssn-vert-clair); color: var(--anssn-vert-fonce); }

/* ---- Fil des étapes ---- */
.exp-etapes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: etape;
}

.exp-etape {
  flex: 1 1 120px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border: 1px solid #eef0f2;
  border-radius: 10px;
  background: #fbfcfd;
  font-size: 13px;
  font-weight: 600;
  color: #98a397;
  counter-increment: etape;
}

.exp-etape::before {
  content: counter(etape);
  flex: 0 0 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #eef0f2;
  color: #98a397;
  font-size: 11.5px;
  font-weight: 700;
}

/* Étape franchie : la coche remplace le numéro, le dossier l'a laissée
   derrière lui. */
.exp-etape.est-passee {
  border-color: #d7ebe3;
  background: #f4fbf7;
  color: #12805a;
}

.exp-etape.est-passee::before {
  content: "\f00c";                      /* coche */
  font-family: var(--tp-ff-fontawesome);
  font-weight: 400;
  background: #d7ebe3;
  color: #12805a;
}

.exp-etape.est-courante {
  border-color: var(--tp-theme-vogue);
  background: var(--anssn-brand-light);
  color: var(--anssn-brand-dark);
  box-shadow: 0 2px 8px rgba(38, 103, 73, .12);
}

.exp-etape.est-courante::before {
  background: var(--tp-theme-vogue);
  color: #fff;
}

.exp-etape.est-refusee {
  border-color: #f3c9c4;
  background: #fdecea;
  color: #b3261e;
  box-shadow: none;
}

.exp-etape.est-refusee::before {
  background: #b3261e;
  color: #fff;
}

/* ---- Chiffres clés ---- */
.exp-cles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid #eef0f2;
}

.exp-cle {
  padding-right: 18px;
}

.exp-cle + .exp-cle {
  padding-left: 18px;
  border-left: 1px solid #eef0f2;
}

.exp-cle__label {
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: #98a397;
}

.exp-cle__valeur {
  display: block;
  margin-top: 5px;
  font-size: 16px;
  font-weight: 700;
  color: #1e2a23;
}

/* ---- Appel à agir ----
   Ce que l'autorité attend de l'exploitant, ou ce qu'elle lui annonce. Le
   liseré de gauche porte la couleur de l'état : c'est le seul endroit de
   l'écran où la couleur veut dire quelque chose. */
.exp-appel {
  display: flex;
  gap: 16px;
  padding: 20px 24px;
  margin-bottom: 20px;
  border: 1px solid #f0e0c4;
  border-left: 4px solid #a5661a;
  border-radius: 12px;
  background: #fdf8ef;
}

.exp-appel__icone {
  flex: 0 0 auto;
  font-size: 20px;
  color: #a5661a;
  margin-top: 2px;
}

.exp-appel__corps {
  flex: 1 1 auto;
  min-width: 0;
}

.exp-appel__titre {
  margin: 0 0 6px;
  font-size: 15.5px;
  font-weight: 700;
  color: #1e2a23;
}

.exp-appel__corps p {
  margin: 0 0 8px;
  font-size: 14px;
  line-height: 1.6;
  color: #4a574e;
}

.exp-appel__message {
  padding: 10px 14px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .7);
  white-space: pre-line;
}

.exp-appel__precision {
  font-size: 13px !important;
  color: #697568 !important;
}

.exp-appel__lien {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 700;
  color: #a5661a;
}

.exp-appel__lien:hover {
  color: #8a5415;
}

.exp-appel__bouton {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  padding: 10px 18px;
  border-radius: 8px;
  background: #12805a;
  color: #fff;
  font-size: 13.5px;
  font-weight: 700;
}

.exp-appel__bouton:hover {
  background: #0e6b4b;
  color: #fff;
}

.exp-appel--succes {
  border-color: #cfe9dd;
  border-left-color: #12805a;
  background: #f4fbf7;
}

.exp-appel--succes .exp-appel__icone { color: #12805a; }

.exp-appel--refus {
  border-color: #f3c9c4;
  border-left-color: #b3261e;
  background: #fdecea;
}

.exp-appel--refus .exp-appel__icone { color: #b3261e; }

.exp-appel--visite {
  border-color: #cde0d4;
  border-left-color: var(--tp-theme-vogue);
  background: #f5faf7;
}

.exp-appel--visite .exp-appel__icone { color: var(--tp-theme-vogue); }

/* ---- Informations déclarées ----
   Intitulé au-dessus, valeur en dessous : une suite de « Label : valeur » en
   paragraphes se lisait comme un bloc de prose, où l'œil ne retrouvait aucun
   champ. */
.exp-champs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px 26px;
  margin-bottom: 26px;
}

.exp-champs__groupe {
  margin: 0 0 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid #eef0f2;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--anssn-secondaire);
}

.exp-champs__note {
  margin: 0;
  font-size: 12.5px;
  color: #98a397;
}

.exp-champ__label {
  display: block;
  font-size: 12px;
  color: #98a397;
  margin-bottom: 3px;
}

.exp-champ__valeur {
  display: block;
  font-size: 14px;
  line-height: 1.55;
  color: #1e2a23;
}

.exp-texte {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  color: #4a574e;
  white-space: pre-line;
}

/* Fichiers déjà fournis, rappelés sous le champ de dépôt. */
.anssn-depot__fichiers {
  margin-bottom: 8px;
}

@media (max-width: 767px) {
  .exp-dossier {
    padding: 20px;
  }

  .exp-etape {
    flex-basis: 100%;
  }

  .exp-cle + .exp-cle {
    padding-left: 0;
    border-left: 0;
    border-top: 1px solid #eef0f2;
    padding-top: 14px;
    margin-top: 14px;
  }
}

/* ===========================================================================
   33. Signature nationale (logo adopté le 2026-09-23)
   ===========================================================================
   Le logo porte les trois couleurs du Togo. Les reprendre uniquement dans
   l'emblème aurait laissé le reste de la page en vert uni : l'appartenance
   nationale ne se serait lue que sur l'image. Le filet vert-or-rouge est donc
   posé aux seuils de lecture — bas d'en-tête, haut du pied de page, tête des
   cartouches d'identité — là où l'oeil marque une pause.

   Trois règles, pour que la signature reste une signature :
     — toujours un filet de 3 ou 4 px, jamais un aplat : les aplats de couleur
       restent la propriété des états (validé / en attente / rejeté) ;
     — jamais deux filets dans le même champ de vision ;
     — décoratif au sens strict : aucun filet ne porte d'information, tous
       sont aria-hidden ou posés en ::after.
   =========================================================================== */

/* --- Haut de page : filet national ---------------------------------------- */
/* Le filet coiffe la page plutôt que de la clore : posé sous la barre de
   navigation, son tiers vert venait buter sur le fil d'actualité, lui aussi
   vert, et la signature se réduisait à deux couleurs.

   Il est hors du bloc collant : il se lit une fois, à l'arrivée, et n'a pas à
   rester sous les yeux pendant toute la navigation. Le rattachement à l'État
   est porté par les armoiries en pied de page — l'en-tête appartient à
   l'autorité et ne porte qu'elle. */
.anssn-filet {
  height: 4px;
  background-image: var(--anssn-filet-togo);
}

/* --- Filet réutilisable --------------------------------------------------- */
/* Pose le filet sur n'importe quel bloc, sans markup supplémentaire. La règle
   suppose un contexte de positionnement sur l'élément porteur. */
.anssn-filet-national {
  position: relative;
}

.anssn-filet-national::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background-image: var(--anssn-filet-togo);
}

/* --- Fil d'ariane --------------------------------------------------------- */
/* Le séparateur a été essayé en tricolore : sur 16 px de large, les trois
   bandes tombent à cinq pixels chacune et se lisent comme une salissure, pas
   comme une signature. Il reste donc uni, au vert de marque (règle posée
   section 13) — le filet a besoin d'une longueur pour exister.  */

/* --- Pied de page --------------------------------------------------------- */
/* Le filet existant (.anssn-drapeau, en bas de la ligne de mentions) est
   conservé ; on lui donne l'épaisseur des autres et les teintes du logo, déjà
   repointées en section 27. */
.anssn-drapeau {
  height: 3px;
}

/* --- Titres de section ---------------------------------------------------- */
/* Le thème soulignait le mot mis en valeur d'un rectangle passe-partout,
   neutralisé en 31.1. À la place, un trait d'or court sous le titre : il
   rappelle la seconde couleur du logo sans la charge d'un filet complet, et
   il tient aussi bien sur fond blanc que sur le vert plein de la section
   services — l'or reste la teinte la plus lumineuse de la palette. */
.tp-section .tp-section__title::after,
.anssn-section > h2::after {
  content: "";
  display: block;
  width: 56px;
  height: 3px;
  margin-top: 14px;
  border-radius: 2px;
  background-color: var(--anssn-or);
}

/* Centré quand le bloc de titre l'est. */
.text-center .tp-section .tp-section__title::after,
.tp-section.text-center .tp-section__title::after {
  margin-left: auto;
  margin-right: auto;
}

/* --- Fil d'actualité ------------------------------------------------------ */
/* Le bandeau est en vert de marque : un liseré d'or le sépare du blanc de
   l'en-tête et signale qu'il s'agit d'une bande d'annonces, pas d'une barre
   de navigation. */
.anssn-ticker {
  border-bottom: 2px solid var(--anssn-vert-fonce);
}

/* --- Menu mobile : bouton de déploiement ---------------------------------- */
/* meanmenu.css pose un carré noir en dur pour ouvrir les sous-rubriques. Il
   était déjà hors charte du temps du bleu ; avec un emblème à trois couleurs,
   ce noir plein est le seul aplat de la page qui n'appartienne à rien. Il
   passe au vert de marque, et à son ton foncé une fois la rubrique ouverte. */
.mean-container .mean-nav ul li a.mean-expand {
  background: var(--anssn-vert);
  border-radius: 6px;
}

.mean-container .mean-nav ul li a.mean-expand:hover {
  background: var(--anssn-vert-fonce);
}


/* --- Armoiries de la République, en pied de page -------------------------- */
/* Le rattachement à l'État est affirmé ici et non dans l'en-tête : côte à côte,
   les armoiries et l'emblème de l'autorité se disputaient la lecture. En pied
   de page, chacun a sa place — l'autorité signe, l'État atteste. */
.anssn-armoiries {
  display: flex;
  align-items: center;
  gap: 14px;
}

.anssn-armoiries img {
  height: 76px;
  width: auto;
  flex-shrink: 0;
}

.anssn-armoiries__texte {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.anssn-armoiries__texte strong {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .09em;
  line-height: 1.3;
  color: #1e2a23;
}

.anssn-armoiries__texte em {
  font-size: 11.5px;
  font-style: italic;
  color: #4a574e;
}

/* ===========================================================================
   34. Registre institutionnel : accueil
   ===========================================================================
   Le gabarit d'origine est celui d'une page d'atterrissage commerciale :
   promesse en bandeau, grilles de cartes, apparitions au defilement. Les
   regles qui suivent ramenent l'accueil au registre d'un service public :
   l'information et les demarches d'abord, la mise en scene ensuite.

   Trois partis pris, valables pour toute page ajoutee ensuite :
     — une liste plutot qu'une grille de cartes des que les entrees sont de
       meme nature : la lecture y est plus rapide et la hierarchie explicite ;
     — un rayon unique et faible, des filets au lieu d'ombres portees : rien
       ne flotte sur un site d'autorite ;
     — aucune animation d'apparition : le contenu est la au chargement.
   =========================================================================== */

/* --- Ouverture ------------------------------------------------------------ */
.anssn-hero {
  border-bottom: 1px solid #dbe7df;
}

.anssn-hero__titre {
  font-size: 40px;
  line-height: 1.18;
  letter-spacing: -.02em;
  font-weight: 700;
  color: #1e2a23;
}

.anssn-hero__titre span {
  color: var(--anssn-vert);
}

.anssn-hero__intro {
  font-size: 16px;
  line-height: 1.7;
  color: #4a574e;
  max-width: 620px;
}

.anssn-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

@media (max-width: 991px) {
  .anssn-hero__titre {
    font-size: 30px;
  }
}

/* --- Boutons du registre institutionnel ----------------------------------- */
/* Rayon de 3 px et pas d'ombre : la pilule et l'ombre portee appartiennent au
   vocabulaire commercial du gabarit d'origine. La casse reste normale — les
   capitales espacees ralentissent la lecture pour un gain d'emphase nul. */
.anssn-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px 22px;
  border-radius: 3px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  transition: background-color .16s ease, color .16s ease, border-color .16s ease;
}

.anssn-btn--plein {
  background: var(--anssn-vert);
  color: #fff;
}

.anssn-btn--plein:hover {
  background: var(--anssn-vert-fonce);
  color: #fff;
}

.anssn-btn--ligne {
  border: 1px solid #c8dbd0;
  color: var(--anssn-vert-fonce);
  padding: 12px 21px;
}

/* Au survol, le bouton secondaire se remplit ; le principal, lui, s'assombrit.
   Deux gestes differents pour deux roles differents : l'usager apprend la
   hierarchie en la manipulant. */
.anssn-btn--ligne:hover {
  background: var(--anssn-vert-clair);
  border-color: var(--anssn-vert);
  color: var(--anssn-vert-fonce);
}



/* --- Liste des demarches -------------------------------------------------- */
.anssn-demarches {
  background: #f7faf8;
  border-bottom: 1px solid #dbe7df;
}

.anssn-demarches__titre {
  font-size: 21px;
  font-weight: 700;
  color: #1e2a23;
  margin: 0 0 18px;
}

.anssn-demarche {
  display: flex;
  align-items: baseline;
  gap: 18px;
  padding: 15px 0;
  border-top: 1px solid #dbe7df;
}

/* Derniere entree de chaque colonne : le filet du bas ferme la liste. */
.anssn-demarche:last-child {
  border-bottom: 1px solid #dbe7df;
}

.anssn-demarche__corps {
  flex: 1 1 auto;
}

.anssn-demarche__nom {
  display: block;
  font-size: 16px;
  font-weight: 700;
  color: var(--anssn-vert-fonce);
}

a.anssn-demarche:hover .anssn-demarche__nom {
  text-decoration: underline;
}

.anssn-demarche__note {
  display: block;
  margin-top: 3px;
  font-size: 13.5px;
  line-height: 1.55;
  color: #4a574e;
}

.anssn-demarche__acces {
  flex: 0 0 auto;
  font-size: 12px;
  color: #4a574e;
  white-space: nowrap;
}

@media (max-width: 575px) {
  .anssn-demarche {
    flex-direction: column;
    gap: 6px;
  }
}

/* --- Le vocabulaire de formes du gabarit, ramene au registre institutionnel -- */
/* Le pack Gencio habille ses actions en pilules capitales posees sur une ombre
   portee. C'est le vocabulaire d'une page commerciale ; sur un site d'Etat, il
   fait promotion la ou il faut de la lisibilite. Les trois regles ci-dessous
   valent pour tout le site public, pages interieures comprises. */
.tp-solid-btn,
.anssn-login-btn {
  border-radius: 3px;
  font-size: 15px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  padding: 13px 21px;
  box-shadow: none;
}

.tp-grd-btn,
.tp-grey-btn {
  border-radius: 3px;
  font-size: 15px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  box-shadow: none;
}

/* Barre de navigation : capitales espacees remplacees par de la casse normale
   en graisse moyenne. A taille egale, un mot en capitales se lit environ un
   tiers moins vite — c'est cher paye pour une rubrique lue chaque visite. */
.anssn-header__nav .da-menu > nav > ul > li > a {
  text-transform: none;
  letter-spacing: 0;
  font-size: 15.5px;
  font-weight: 500;
}

/* Surfaces : le filet remplace l'ombre. Rien ne flotte sur un site d'autorite,
   et une bordure de 1 px tient le meme role de separation pour un cout de
   rendu nul. */
.anssn-quick,
.anssn-service-card,
.anssn-news-card,
.anssn-doc,
.anssn-contact-card {
  box-shadow: none;
  border-radius: 3px;
}

.anssn-quick:hover,
.anssn-service-card:hover,
.anssn-news-card:hover,
.anssn-doc:hover,
.anssn-contact-card:hover {
  box-shadow: none;
  border-color: var(--anssn-vert);
}

/* Rayons du gabarit ramenes a une valeur unique. La pilule reste reservee aux
   etiquettes d'etat (section 27) : c'est ce qui les distingue d'un bouton. */
.anssn-service-card__icon,
.anssn-quick__icon,
.anssn-pillar__icon,
.anssn-kpi__icon,
.anssn-contact-card__icon {
  border-radius: 3px;
}

.anssn-hero-photo__frame,
.anssn-about-media__main,
.anssn-about-media__sub,
.anssn-about-badge {
  border-radius: 3px;
  box-shadow: none;
}

/* Service pas encore ouvert : meme apparence que les autres, mais ce n'est
   pas un lien — aucun clic, aucun effet de survol. */
.anssn-demarche--indisponible {
  cursor: default;
}

/* Meme traitement dans le sous-menu « Services en ligne » : l'entree a
   l'allure des liens voisins, sans en etre un. */
.submenu .anssn-menu-indisponible {
  display: block;
  width: 100%;
  padding: 5px 20px;
  font-size: 14px;
  font-weight: 500;
  text-align: left;
  color: var(--tp-text-body);
  cursor: default;
}

/* L'en-tete collant du gabarit reapparait en fondu descendant a chaque fois
   que l'on remonte la page. Pendant les 300 ms de l'animation, le contenu se
   lit au travers. Une barre de navigation n'a pas a s'annoncer : elle est la
   ou elle ne l'est pas. */
.anssn-header.header-sticky {
  animation: none;
  opacity: 1;
}

/* --- Fil d'actualites ----------------------------------------------------- */
/* Date et rubrique forment une colonne fixe a gauche du titre : l'oeil balaye
   les dates sans relire les intitules, ce qu'une grille de vignettes interdit. */
.anssn-fil__entete {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 6px;
}

.anssn-fil__titre,
.anssn-aside__titre {
  font-size: 21px;
  font-weight: 700;
  color: #1e2a23;
  margin: 0;
}

.anssn-fil__tout {
  font-size: 14px;
  font-weight: 600;
  color: var(--anssn-vert-fonce);
  white-space: nowrap;
}

.anssn-fil__tout:hover {
  text-decoration: underline;
}

.anssn-fil__item {
  display: block;
  padding: 17px 0;
  border-top: 1px solid #dbe7df;
}

.anssn-fil__item:last-of-type {
  border-bottom: 1px solid #dbe7df;
}

.anssn-fil__meta {
  display: flex;
  align-items: baseline;
  gap: 14px;
}

.anssn-fil__date {
  flex: 0 0 96px;
  font-size: 12.5px;
  color: #4a574e;
}

.anssn-fil__rubrique {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--anssn-secondaire-fonce);
}

/* Le retrait aligne titre et chapeau sur la colonne des rubriques. */
.anssn-fil__corps {
  display: block;
  padding-left: 110px;
}

.anssn-fil__nom {
  display: block;
  margin-top: 5px;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.35;
  color: #1e2a23;
}

.anssn-fil__item:hover .anssn-fil__nom {
  color: var(--anssn-vert);
  text-decoration: underline;
}

.anssn-fil__chapo {
  display: block;
  margin-top: 4px;
  font-size: 13.5px;
  line-height: 1.6;
  color: #4a574e;
}

@media (max-width: 575px) {
  .anssn-fil__corps {
    padding-left: 0;
  }
}

/* --- Colonne laterale ----------------------------------------------------- */
.anssn-aside {
  padding-left: 30px;
  border-left: 1px solid #dbe7df;
}

@media (max-width: 991px) {
  .anssn-aside {
    margin-top: 40px;
    padding-left: 0;
    border-left: 0;
    border-top: 1px solid #dbe7df;
    padding-top: 30px;
  }
}

.anssn-chiffres {
  margin: 6px 0 0;
}

.anssn-chiffres__ligne {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
  border-top: 1px solid #dbe7df;
}

.anssn-chiffres__ligne:last-child {
  border-bottom: 1px solid #dbe7df;
}

.anssn-chiffres dt {
  font-size: 13.5px;
  font-weight: 400;
  color: #4a574e;
}

.anssn-chiffres dd {
  margin: 0;
  font-size: 19px;
  font-weight: 700;
  color: var(--anssn-vert-fonce);
}

/* Un chiffre d'autorite sans date d'arrete ne vaut rien : la mention reste
   visible tant que les modules ne sont pas en service. */
.anssn-aside__note {
  margin: 10px 0 0;
  font-size: 12px;
  color: #4a574e;
}

.anssn-aside__lien {
  display: block;
  padding: 13px 0;
  border-top: 1px solid #dbe7df;
}

.anssn-aside__ref {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--anssn-secondaire-fonce);
}

.anssn-aside__intitule {
  display: block;
  margin-top: 3px;
  font-size: 13.5px;
  line-height: 1.5;
  color: #1e2a23;
}

.anssn-aside__lien:hover .anssn-aside__intitule {
  text-decoration: underline;
}

.anssn-aside__tout {
  display: inline-block;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid #dbe7df;
  width: 100%;
  font-size: 14px;
  font-weight: 600;
  color: var(--anssn-vert-fonce);
}

.anssn-aside__tout:hover {
  text-decoration: underline;
}

/* Deuxieme rubrique de la colonne laterale : l'espacement vient de la feuille
   plutot que d'une classe utilitaire, pour que le bloc reste correct si on le
   deplace. */
.anssn-aside__titre:not(:first-child) {
  margin-top: 34px;
}

/* ===========================================================================
   35. Couleur active : barre de service, accès directs, ponctuations
   ===========================================================================
   Les trois teintes du logo ne restaient jusqu'ici qu'en filet. Elles entrent
   ici dans la page : bandeau vert plein, pastilles d'identification, accent
   d'or sur l'information la plus cherchée.

   La règle de partage est celle de la section 27 : sur le site public la
   couleur IDENTIFIE une rubrique, dans l'espace exploitant elle SIGNALE un
   état. Rien de ce qui suit ne s'applique aux pages de dossier.
   =========================================================================== */

/* --- Garde-fou de largeur ------------------------------------------------- */
/* Un seul bloc trop large suffit, sur téléphone, à rendre toute la page
   déplaçable de côté et à laisser une bande blanche à droite. La page ne
   défile donc jamais horizontalement. « clip » plutôt que « hidden » : il ne
   crée pas de conteneur de défilement et laisse fonctionner position: sticky.
   Les tableaux et listes qui défilent de côté gardent leur propre défilement. */
html,
body {
  max-width: 100%;
  overflow-x: clip;
}

/* --- Barre de service ----------------------------------------------------- */
.anssn-barre-service {
  background: var(--anssn-vert-fonce);
  color: #fff;
  font-size: 13px;
}

/* Le contenu part du milieu de la barre plutôt que de ses deux bords. */
.anssn-barre-service__ligne {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  column-gap: 28px;
  min-height: 40px;
}

.anssn-barre-service__liens {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.anssn-barre-service__liens a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 14px;
  color: rgba(255, 255, 255, .9);
  font-weight: 500;
  transition: background-color .16s ease, color .16s ease;
}

.anssn-barre-service__liens a:hover {
  background: rgba(255, 255, 255, .1);
  color: #fff;
}

.anssn-barre-service__liens i {
  font-size: 13px;
  opacity: .85;
}

.anssn-barre-service__contact {
  display: flex;
  align-items: baseline;
  gap: 9px;
  white-space: nowrap;
}

.anssn-barre-service__contact {
  align-items: center;
}

.anssn-barre-service__icone {
  color: var(--anssn-or);
  font-size: 13px;
}

/* L'or est la seule des trois couleurs qui tienne sur ce vert : le rouge y
   vibre et le vert s'y confond. Il est donc réservé — dans cette barre — à
   l'information qu'un usager pressé cherche en premier. */
.anssn-barre-service__numero {
  color: var(--anssn-or);
  font-weight: 700;
  letter-spacing: .02em;
  font-size: 14px;
}

.anssn-barre-service__numero:hover {
  color: var(--anssn-or);
  text-decoration: underline;
}

@media (max-width: 991px) {
  .anssn-barre-service__liens li:nth-child(n+3) {
    display: none;
  }
}

/* Sur téléphone, le lien et le numéro ne tiennent pas toujours côte à côte :
   la ligne se replie plutôt que de pousser la page hors de l'écran. */
@media (max-width: 575px) {
  .anssn-barre-service__ligne {
    column-gap: 12px;
  }
  .anssn-barre-service__liens li:nth-child(n+2) {
    display: none;
  }
  .anssn-barre-service__liens a {
    padding: 8px 10px;
  }
}

/* --- Rubrique active du menu ---------------------------------------------- */
/* La rubrique où l'on se trouve se souligne d'un trait plein, pas seulement
   d'une nuance de gris : c'est le repère le plus consulté d'une barre de
   navigation, et il doit se voir sans être cherché. */
.anssn-header__nav .da-menu > nav > ul > li.est-active > a {
  color: var(--anssn-vert-fonce);
  font-weight: 700;
  box-shadow: inset 0 -3px 0 var(--anssn-vert);
}

/* --- Accès directs colorés ------------------------------------------------ */
/* Quatre entrées, quatre couleurs. La teinte ne hiérarchise pas : elle
   distingue, pour qu'un usager qui revient retrouve « la carte verte » sans
   relire les intitulés. C'est la reconnaissance par la forme, celle qui
   fonctionne le plus vite. */
.anssn-acces {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.anssn-acces__item {
  display: flex;
  gap: 15px;
  padding: 20px;
  border: 1px solid var(--anssn-vert);
  border-top-width: 3px;
  border-radius: 3px;
  background: #f5faf7;
  transition: background-color .16s ease;
}

.anssn-acces__item:hover {
  background: var(--anssn-vert-clair);
}

.anssn-acces__item:hover .anssn-acces__pastille {
  background: var(--anssn-vert-fonce);
}

.anssn-acces__pastille {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--anssn-vert);
  color: #fff;
  font-size: 18px;
}

.anssn-acces__corps {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

/* Quatre colonnes ne tiennent qu'à partir d'un grand écran : deux sur
   tablette, une seule sur téléphone. */
@media (max-width: 1199px) {
  .anssn-acces {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 575px) {
  .anssn-acces {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }
  .anssn-acces__item {
    padding: 14px 16px;
  }
}

.anssn-acces__nom {
  font-size: 15.5px;
  font-weight: 700;
  color: #1e2a23;
  line-height: 1.3;
}

.anssn-acces__item:hover .anssn-acces__nom {
  text-decoration: underline;
}

.anssn-acces__note {
  font-size: 13px;
  line-height: 1.5;
  color: #4a574e;
}

/* Trois variantes, une par couleur du logo. Chaque carte porte sa teinte sur
   la bordure, la pastille et son fond très pâle — la couleur est la matière
   du bloc, pas un liseré posé dessus.

   Le pictogramme de la carte jaune est foncé, pas blanc : c'est la seule
   manière d'employer un jaune franc sans le dénaturer. */
.anssn-acces__item--jaune {
  border-color: var(--anssn-or);
  background: #fffbec;
}

.anssn-acces__item--jaune .anssn-acces__pastille {
  background: var(--anssn-or);
  color: var(--anssn-sur-or);
}

.anssn-acces__item--jaune:hover {
  background: #fff6d8;
}

.anssn-acces__item--jaune:hover .anssn-acces__pastille {
  background: #f0bd00;
}

.anssn-acces__item--rouge {
  border-color: var(--anssn-rouge);
  background: #fdf7f7;
}

.anssn-acces__item--rouge .anssn-acces__pastille {
  background: var(--anssn-rouge);
}

.anssn-acces__item--rouge:hover {
  background: #fbeded;
}

.anssn-acces__item--rouge:hover .anssn-acces__pastille {
  background: #a11f2e;
}

.anssn-acces__item--sombre {
  border-color: var(--anssn-vert-fonce);
}

.anssn-acces__item--sombre .anssn-acces__pastille {
  background: var(--anssn-vert-fonce);
}


/* --- Cartouche de rubrique ------------------------------------------------ */
/* Étiquette pleine posée en tête de bloc, qui nomme la nature de ce qu'on lit.
   Elle remplace l'intertitre gris là où la page enchaîne plusieurs registres. */
.anssn-cartouche {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border-radius: 3px;
  background: var(--anssn-vert);
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.anssn-cartouche--sombre {
  background: var(--anssn-vert-fonce);
}

.anssn-cartouche--jaune {
  background: var(--anssn-or);
  color: var(--anssn-sur-or);
}

.anssn-cartouche--rouge {
  background: var(--anssn-rouge);
}

/* --- Bouton de remontée --------------------------------------------------- */
/* Le gabarit le nomme .tp-back-to-top ; deux règles plus haut le peignaient
   encore en pétrole. Celle-ci ferme la question. */
.tp-back-to-top,
.tp-back-to-top:hover {
  background: var(--anssn-or);
  color: var(--anssn-sur-or);
}

.tp-back-to-top:hover {
  background: #f0bd00;
}
/* --- Surtitres : la couleur plutôt que le gris ---------------------------- */
/* Le petit texte qui annonce une section (« Services en ligne », « L'Autorité »)
   était en gris clair : il se lisait comme une note de bas de page alors qu'il
   ouvre le bloc. En vert, il redevient une entrée en matière. */
.tp-section__subtitle,
.da-hero-section__subtitle {
  color: var(--anssn-vert) !important;
  font-weight: 600;
  letter-spacing: .04em;
}

/* Sur le fond vert plein de la section services, l'or reprend la main. */
.tp-da-service-area .tp-section__subtitle {
  color: rgba(255, 255, 255, .78) !important;
}

/* Les titres de bloc du site public : un trait d'or court les précède, posé
   dans la marge. Il marque le début du bloc sans ajouter de balise. */
.anssn-demarches__titre,
.anssn-fil__titre,
.anssn-aside__titre {
  position: relative;
  padding-left: 15px;
}

.anssn-demarches__titre::before,
.anssn-fil__titre::before,
.anssn-aside__titre::before {
  content: "";
  position: absolute;
  left: 0;
  top: .18em;
  bottom: .18em;
  width: 4px;
  border-radius: 2px;
  background: var(--anssn-or);
}

/* --- Liens d'action ------------------------------------------------------- */
/* Le lien qui clôt un bloc — « Toutes les actualités », « Voir la fiche » —
   passe en vert franc et porte sa flèche. C'est le lien le plus cliqué d'une
   page de service public ; en gris, il disparaissait. */
.anssn-fil__tout,
.anssn-aside__tout,
.anssn-service-card__link,
.anssn-news-card__link {
  color: var(--anssn-rouge);
  font-weight: 700;
}

.anssn-fil__tout:hover,
.anssn-aside__tout:hover,
.anssn-service-card__link:hover,
.anssn-news-card__link:hover {
  color: #a11f2e;
  text-decoration: underline;
}

/* --- Étiquettes de rubrique ----------------------------------------------- */
/* Les rubriques d'actualité (coopération, contrôle, institutionnel) prennent
   l'ocre plein plutôt qu'un fond pâle : à cette taille, une étiquette pleine
   se repère d'un coup d'oeil dans une liste, un fond pâle se confond avec le
   texte qui l'entoure. */
.anssn-news-tag,
.anssn-doc__tag {
  background: var(--anssn-secondaire);
  color: #fff;
  font-weight: 700;
  letter-spacing: .04em;
}

.anssn-fil__rubrique {
  color: var(--anssn-secondaire-fonce);
}

/* --- Filets de séparation ------------------------------------------------- */
/* Les filets horizontaux des listes prennent une teinte verte plutôt qu'un
   gris neutre. L'écart est faible sur un filet isolé ; répété vingt fois dans
   une page, il change la température de l'ensemble. */
.anssn-demarche,
.anssn-fil__item,
.anssn-chiffres__ligne,
.anssn-aside__lien {
  border-top-color: #d6e5db;
}

.anssn-demarche:last-child,
.anssn-fil__item:last-of-type,
.anssn-chiffres__ligne:last-child,
.anssn-aside__lien:last-of-type {
  border-bottom-color: #d6e5db;
}

/* ===========================================================================
   37. États de survol : trois familles, trois couleurs
   ===========================================================================
   Un survol uniformément vert apprend à l'usager que « tout est cliquable »,
   et rien de plus. Il devrait lui apprendre de QUOI il s'agit. La couleur du
   survol suit donc deux choses : le fond sur lequel l'élément est posé, et la
   nature de ce qu'il déclenche.

     FOND SOMBRE          → JAUNE. Sur du vert foncé, le vert ne se détache
     (barre de service,     pas et le rouge vibre ; le jaune est la seule des
     fil, pied, section     trois couleurs qui y porte du texte — 6,9:1 sur
     services)             #174836.

     CONSULTER            → ROUGE. « Lire la suite », « Télécharger »,
     (fond clair)           coordonnées, liens sortants. L'usager quitte la
                            page pour aller voir quelque chose.

     NAVIGUER / AGIR      → VERT. Menu, boutons de démarche, champs de
     (fond clair)           formulaire. C'est le registre de l'institution,
                            et il garde sa couleur.

   Le rouge de consultation n'entre pas en conflit avec le rouge d'alerte :
   l'alerte est un bloc entier — bordure, pastille, fond — quand la
   consultation n'est qu'un mot souligné.
   =========================================================================== */

/* --- Fonds sombres : survol en jaune -------------------------------------- */
.anssn-barre-service__liens a:hover {
  background: transparent;
  color: var(--anssn-or);
}

.anssn-ticker a:hover {
  color: var(--anssn-or);
  opacity: 1;
}

.da-ft-copyright-bg .tp-copyrigh-text a:hover,
.da-ft-copyright-bg .tp-footer-menu ul li:hover a {
  -webkit-text-fill-color: var(--anssn-or);
  color: var(--anssn-or);
  opacity: 1;
}

.tp-da-service-area .anssn-service-card__link:hover {
  color: var(--anssn-or);
}

/* --- Consulter : survol en rouge ------------------------------------------ */
/* Liens qui mènent à un document, à une page de détail ou hors du site. */
.anssn-footer-liens ul li a:hover,
.tp-footer__widget ul li a:hover,
.anssn-doc__link:hover,
.anssn-law__ref:hover,
a.anssn-contact-card__value:hover,
.anssn-fil__item:hover .anssn-fil__nom,
.anssn-aside__lien:hover .anssn-aside__intitule,
.anssn-news-card__title a:hover {
  color: var(--anssn-rouge);
}

/* Icônes sociales : elles sortent du site, elles suivent le même registre. */
.bs-footer__top-social a:hover,
.da-footer__top-social span a:hover {
  background-color: var(--anssn-rouge);
  border-color: var(--anssn-rouge);
  color: #fff;
}

/* --- Naviguer et agir : le vert reste ------------------------------------- */
/* Menu principal, sous-menus, boutons de démarche : inchangés. Le vert y est
   à sa place — c'est le registre de l'institution, pas celui de la lecture. */

/* --- Blocs à couleur propre ----------------------------------------------- */
/* Une carte de service intensifie SA teinte au survol plutôt que de virer au
   vert : la couleur qu'on a apprise au repos doit être celle qu'on retrouve
   sous le curseur. Les règles sont posées en section 35 avec chaque variante.
   Reste la carte de service générique du gabarit, qui verdissait. */
.anssn-service-card:hover {
  border-color: var(--anssn-rouge);
}

.anssn-service-card:hover .anssn-service-card__title {
  color: var(--anssn-rouge);
}

/* Le fil d'actualité ouvre la page en bande jaune dégradée, texte noir. Il se
   distingue ainsi de la barre de service verte placée sous l'en-tête.
   Le lien « Lire » est en rouge foncé (#a11f2e) plutôt qu'en rouge du logo :
   sur ce jaune, le rouge franc ne donne que 3,8:1, le rouge foncé 5,2:1. */
.anssn-ticker {
  background: linear-gradient(90deg, #ffc400 0%, var(--anssn-or) 45%, #ffe27a 100%);
  border-bottom: 1px solid rgba(42, 34, 3, .15);
}

.anssn-ticker__item,
.anssn-ticker a {
  color: #111;
}

.anssn-ticker__item + .anssn-ticker__item {
  border-left-color: rgba(17, 17, 17, .25);
}

.anssn-ticker__date {
  opacity: .8;
}

.anssn-ticker a.anssn-ticker__lien {
  color: #a11f2e;
  font-weight: 700;
}

.anssn-ticker a.anssn-ticker__lien:hover {
  color: #7a1622;
  opacity: 1;
}

/* ===========================================================================
   38. Le jaune au travail
   ===========================================================================
   Le jaune était resté cantonné à trois endroits — un numéro, un trait, un
   bouton de remontée. Il prend ici les postes où une page a besoin d'être
   expressive : les rubriques éditoriales, les états d'attente, et le survol
   des actions principales.

   Règle, toujours la même : le jaune franc ne porte JAMAIS de blanc. Du texte
   #2a2203 dessus donne 10,5:1 — plus du double du seuil. C'est ce qui permet
   de l'employer en aplat sans le dénaturer en ocre.
   =========================================================================== */

/* --- Rubriques éditoriales : actualités, évènements, documents ------------- */
/* « Coopération », « Contrôle », « Institutionnel » : ces mots classent la
   publication, ils ne la hiérarchisent pas. En jaune plein, ils se repèrent
   d'un balayage dans une liste — ce qu'un fond pâle ne permettait pas. */
.anssn-news-tag,
.anssn-doc__tag {
  background: var(--anssn-or);
  color: var(--anssn-sur-or);
  font-weight: 700;
  letter-spacing: .04em;
}

.anssn-fil__rubrique {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 2px;
  background: var(--anssn-or);
  color: var(--anssn-sur-or);
  font-size: 10.5px;
}

/* --- Conditions d'accès d'une démarche ------------------------------------ */
/* Trois états, trois signes. Le vert dit « allez-y », le neutre « il faut un
   compte », le jaune « pas encore ». Le doré qui portait ce dernier n'était
   ni l'un ni l'autre : une teinte terne pour une information utile. */
.anssn-demarche__acces {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 2px;
  background: #f1f4f1;
  color: #495449;
  font-size: 11.5px;
  font-weight: 600;
}

.anssn-demarche__acces--libre {
  background: var(--anssn-vert-clair);
  color: var(--anssn-vert-fonce);
}

.anssn-demarche__acces--attente {
  background: var(--anssn-or);
  color: var(--anssn-sur-or);
}

/* --- Survol des actions principales --------------------------------------- */
/* Un bouton vert qui fonce au survol ne dit rien de plus qu'un bouton vert.
   En passant au jaune, il signale qu'il a été atteint — et le contraste du
   texte monte au passage, de 6,1:1 à 10,5:1. Le geste est franc, ce qui est
   la qualité qu'on attend d'un retour d'interface. */
.anssn-btn--plein:hover,
.tp-solid-btn:hover,
.anssn-login-btn:hover,
.tp-grd-btn:hover,
.anssn-cta-btn.tp-solid-btn:hover,
.da-footer .tp-footer-from form button:hover {
  background-color: var(--anssn-or);
  background-image: none;
  color: var(--anssn-sur-or);
}

.tp-grd-btn:hover span i,
.anssn-btn--plein:hover span i {
  color: var(--anssn-sur-or);
}

/* Le lien « Créer un compte » n'a pas de fond : il bascule au rouge, comme
   les autres liens de texte. */
.anssn-signup-btn:hover,
.anssn-signup-btn:hover i {
  color: var(--anssn-rouge);
}

/* --- Filtres de la rubrique Actualités ------------------------------------ */
/* Le filtre retenu porte la couleur ; les autres restent en retrait. */
.anssn-filter.is-active {
  background: var(--anssn-or);
  border-color: var(--anssn-or);
  color: var(--anssn-sur-or);
}

.anssn-filter:hover {
  border-color: var(--anssn-or);
  color: var(--anssn-vert-fonce);
}

/* ===========================================================================
   39. Ajustements de l'en-tête et du hero
   =========================================================================== */

/* Fil d'actualité : jaune un ton plus soutenu. Le lien passe à un rouge plus
   profond pour garder un contraste suffisant sur ce fond plus sombre. */
.anssn-ticker {
  background: linear-gradient(90deg, #eeac00 0%, #f7bc00 45%, #ffcd18 100%);
}

.anssn-ticker a.anssn-ticker__lien {
  color: #8a1623;
}

.anssn-ticker a.anssn-ticker__lien:hover {
  color: #5e0f18;
}

/* Barre de service : sur ordinateur, le contenu est calé à droite, aligné sur
   le bord droit de l'en-tête (bouton « Espace exploitant »). Sur tablette et
   téléphone il reste centré. */
@media (min-width: 992px) {
  .anssn-barre-service__ligne {
    flex-wrap: nowrap;
    justify-content: flex-end;
  }
}

/* « Découvrir l'Autorité » : bordure jaune, et se remplit de jaune au survol. */
.anssn-btn--ligne {
  border: 2px solid var(--anssn-or);
  padding: 11px 20px;
}

.anssn-btn--ligne:hover {
  background: var(--anssn-or);
  border-color: var(--anssn-or);
  color: var(--anssn-sur-or);
}

/* « Espace exploitant » : jaune au repos, vert au survol. */
.tp-solid-btn.anssn-login-btn {
  background-color: var(--anssn-or);
  background-image: none;
  color: var(--anssn-sur-or);
}

.tp-solid-btn.anssn-login-btn:hover {
  background-color: var(--anssn-vert);
  background-image: none;
  color: #fff;
}

/* Fil d'actualité : noir plein et graisse plus marquée pour la lisibilité
   sur le jaune. La date perd sa transparence. */
.anssn-ticker__item,
.anssn-ticker a {
  color: #000;
  font-weight: 600;
}

.anssn-ticker__date {
  opacity: 1;
  font-weight: 800;
}

.anssn-ticker__item i,
.anssn-ticker__item .flaticon-megaphone {
  opacity: 1;
}

.anssn-ticker__item + .anssn-ticker__item {
  border-left-color: rgba(0, 0, 0, .35);
}

/* Fil d'actualité : fond crème #FFFCE8, légèrement plus jaune à gauche. Sur
   ce fond clair, le rouge du logo retrouve un contraste suffisant (~5:1) pour
   le lien « Lire ». Pas de filet dessous : le fond crème suffit à le
   détacher de l'en-tête blanc. */
.anssn-ticker {
  background: linear-gradient(90deg, #fff3b8 0%, #FFFCE8 55%, #FFFCE8 100%);
  border-bottom: 0;
}

.anssn-ticker a.anssn-ticker__lien {
  color: var(--anssn-rouge);
}

.anssn-ticker a.anssn-ticker__lien:hover {
  color: #8a1623;
}

/* Fil d'actualité : texte noir sans gras, un cran plus grand. Le lien « Lire »
   se distingue par son seul rouge : souligné, il traçait un trait rouge sous
   la bande. */
.anssn-ticker {
  font-size: 15px;
}

.anssn-ticker__item,
.anssn-ticker a,
.anssn-ticker a.anssn-ticker__lien {
  font-weight: 400;
  letter-spacing: .01em;
}

.anssn-ticker__date {
  font-size: 13px;
  font-weight: 400;
}

@media (max-width: 575px) {
  .anssn-ticker {
    font-size: 14px;
  }
}

/* Fil d'actualité : texte réduit, la bande devient plus discrète. */
.anssn-ticker {
  font-size: 13px;
  padding: 7px 0;
}

.anssn-ticker__date {
  font-size: 11.5px;
}

@media (max-width: 575px) {
  .anssn-ticker {
    font-size: 12.5px;
  }
}

/* En-tête : un filet d'or discret sépare l'identité (logo, accès) de la
   navigation. Il est tracé sur la largeur du contenu, pas de l'écran, pour
   rester un séparateur et non une bande. */
.anssn-header__nav {
  border-top: 0;
}

.anssn-header__nav .main-menu {
  border-top: 1px solid #edc94a;
}