/* Le dessin des pages secondaires de la vitrine.
   Partage par /analyse-de-bien et /gestion-locative : deux pages qui se
   ressemblent et qui gardent chacune sa copie divergent a la premiere
   retouche, et le visiteur le voit avant nous.
   La feuille de l'accueil, elle, est dans vitrine-styles.css. */

.an-page { background: #FCF7F3; }

/* Le héros : sombre, comme les panneaux de l'accueil, pour que la page
   s'ouvre sur la même matière que celle qu'elle décrit. */
.an-heros {
  background: #191B28;
  color: #F2F1F6;
  padding: clamp(72px, 9vw, 118px) 24px clamp(64px, 8vw, 96px);
}
.an-heros-coeur { max-width: 1240px; margin: 0 auto; }
.an-oeil {
  display: inline-flex; align-items: center; gap: 9px;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.06);
  border-radius: 999px; padding: 7px 15px;
  font-size: 13px; color: rgba(255,255,255,.86);
}
.an-oeil i { width: 7px; height: 7px; border-radius: 50%; background: #5FE3A8; font-style: normal; }
.an-heros h1 {
  margin: 22px 0 0;
  font-family: 'Poppins', 'Switzer', sans-serif;
  font-size: min(6vw, 64px); line-height: 1.03; letter-spacing: -.035em; font-weight: 700;
  color: #fff;
}
.an-heros p {
  margin: 20px 0 0; max-width: 720px;
  font-size: 18px; line-height: 1.6; color: rgba(255,255,255,.78);
}
/*
  Le bandeau d'ouverture d'un module pas encore ouvert (Sébastien, 2026-09-23).

  ⚠️ IL SE LIT AVANT LES CHIFFRES, PAS APRÈS. Placé sous la rangée « 48 écrans,
  sans limite, gratuit », il arrivait une fois la promesse déjà faite. Une date
  d'ouverture qui contredit ce qu'on vient de lire n'informe pas, elle dément.

  Ambre plutôt que rouge : c'est une date, pas une panne.
*/
.an-ouverture {
  margin: 26px 0 0; padding: 13px 18px; border-radius: 14px;
  max-width: 62ch;
  background: rgba(254,188,46,.10); border: 1px solid rgba(254,188,46,.34);
  font-size: 14.5px; line-height: 1.55; color: #F2F1F6;
}
.an-ouverture b { color: #FEBC2E; }
.an-ouverture a { color: #F2F1F6; text-decoration: underline; text-underline-offset: 2px; }

.an-heros-chiffres {
  display: flex; flex-wrap: wrap; gap: 14px 40px; margin: 34px 0 0;
  padding-top: 26px; border-top: 1px solid rgba(255,255,255,.12);
}
.an-heros-chiffres div { min-width: 0; }
.an-heros-chiffres strong {
  display: block; font-size: clamp(26px, 3vw, 36px); font-weight: 700;
  letter-spacing: -.03em; color: #fff; font-variant-numeric: tabular-nums;
}
.an-heros-chiffres span { display: block; margin-top: 4px; font-size: 13.5px; color: rgba(255,255,255,.6); }

/*
  Un volet par onglet de l'analyse. Même gabarit que les sections de
  l'accueil : 1288 px de large, 24 px de gouttière, 96 px entre les blocs.
*/
.an-volet { max-width: 1288px; margin: 0 auto; padding: 0 24px 96px; }
.an-volet:first-of-type { padding-top: 96px; }
.an-volet h2 {
  margin: 14px 0 0;
  font-family: 'Poppins', 'Switzer', sans-serif;
  font-size: min(5.4vw, 58px); line-height: 1.04; letter-spacing: -.035em; font-weight: 700;
  color: #14101D;
}
.an-volet > p { margin: 16px 0 0; max-width: 760px; font-size: 17px; line-height: 1.6; color: #6E6472; }

/*
  ⚠️ LA GRILLE, PAS UN `flex-wrap`. Le contenu des cartes est de longueur très
  inégale : en flex, la largeur d'une carte dépend de son texte, et la rangée
  se casse à un endroit différent sur chaque volet.
*/
/*
  ⚠️ DES CARTES, PAS UN QUADRILLAGE. La grille a filets d'un pixel laissait des
  cases vides sur la derniere rangee : quatre colonnes pour neuf modules, et
  les trois trous restants se lisaient comme un tableau inacheve. Des cartes
  detachees n'ont pas de rangee a completer.
*/
.an-modules {
  /*
    ⚠️ LE PLANCHER DE COLONNE EST CE QUI TIENT LES DEUX LIGNES. A 268 px, une
    carte n'offrait que 33 caracteres par ligne : chaque description tombait a
    trois ou quatre lignes, et cinquante-huit cartes de quatre lignes font un
    mur. A 360 px, la grille rend une colonne plutot que de retrecir les
    cartes, la ligne tient 47 caracteres, et deux lignes suffisent a toutes les
    largeurs d'ecran sauf le telephone, ou tout se replie de toute facon.
  */
  display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: clamp(12px, 1.2vw, 16px);
  padding: clamp(16px, 2vw, 26px);
}
.an-module {
  background: #20222F;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 20px;
  padding: clamp(18px, 2vw, 24px);
}
.an-module[data-cle="1"] {
  background: rgba(127,227,176,.05);
  border-color: rgba(127,227,176,.20);
}
.an-module h3 {
  margin: 0; font-size: 16.5px; line-height: 1.35; font-weight: 650;
  letter-spacing: -.01em; color: #F2F1F6;
}
.an-module p { margin: 10px 0 0; font-size: 14.5px; line-height: 1.6; color: #A9ABB8; }
.an-module[data-cle="1"] h3 { color: #7FE3B0; }

/*
  Le rappel de méthode, sous chaque panneau.

  ⚠️ LE SÉLECTEUR PORTE LE PARENT, SINON RIEN NE S'APPLIQUE. `.an-volet > p`
  est plus spécifique que `.an-note` seul : la note héritait du chapeau, 17 px
  et `max-width: 760px`, et tombait sur deux lignes. Une note se relit d'un
  coup d'œil, donc une seule ligne et pas de laisse de 760 px.
*/
.an-volet > .an-note { margin: 16px 0 0; max-width: none; font-size: 13.5px; line-height: 1.6; color: #8A8290; }

/* L'appel final, sur le fond sombre des panneaux. */
.an-appel { max-width: 1288px; margin: 0 auto 96px; padding: 0 24px; }
.an-appel-coeur {
  background: #191B28; color: #F2F1F6; border-radius: 26px;
  padding: clamp(36px, 5vw, 64px);
}
.an-appel h2 {
  margin: 0; font-family: 'Poppins', 'Switzer', sans-serif;
  font-size: min(4.6vw, 46px); line-height: 1.06; letter-spacing: -.035em; font-weight: 700; color: #fff;
}
.an-appel p { margin: 16px 0 0; max-width: 620px; font-size: 17px; line-height: 1.6; color: rgba(255,255,255,.78); }
.an-appel-boutons { display: flex; flex-wrap: wrap; gap: 12px; margin: 30px 0 0; }
.an-bouton {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 24px; border-radius: 999px;
  font-size: 15px; font-weight: 650; text-decoration: none;
}
.an-bouton-plein { background: #FCF7F3; color: #14101D; }
.an-bouton-vide { border: 1px solid rgba(255,255,255,.28); color: #F2F1F6; }
.an-page a:focus-visible { outline: 2px solid #B0489F; outline-offset: 3px; }

/* ─────────────────────────────────────────────────────────────────────────
   LES ANIMATIONS

   ⚠️ TOUT EST PORTE PAR `.js`. Une regle qui masque sa cible ne s'applique
   que si le script a pose le drapeau : une animation qui peut vider une page
   n'est pas une animation, c'est une panne.

   ⚠️ ET `prefers-reduced-motion` COUPE TOUT. Le mouvement rend certaines
   personnes malades ; le systeme le dit, on l'ecoute.
   ───────────────────────────────────────────────────────────────────────── */
.js [data-reveal] {
  opacity: 0; transform: translateY(20px);
  transition: opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1);
}
.js [data-reveal].vu { opacity: 1; transform: none; }
.js [data-reveal][data-delai="1"] { transition-delay: .10s; }
.js [data-reveal][data-delai="2"] { transition-delay: .20s; }
.js [data-reveal][data-delai="3"] { transition-delay: .30s; }

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
  .an-scene * { animation: none !important; }
  .an-trace { stroke-dashoffset: 0 !important; }
  .an-pousse { transform: none !important; }
  .an-anneau { stroke-dashoffset: var(--reste, 60) !important; }
  .an-tard { opacity: 1 !important; }
}

/* ── La scene en tete de chaque panneau ───────────────────────────────────
   Un dessin, pas une image : rien a telecharger, rien qui pixelise, et il se
   recolorie avec le panneau. */
.an-scene {
  position: relative;
  padding: clamp(18px, 2.4vw, 30px) clamp(16px, 2vw, 26px);
  border-bottom: 1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(120% 140% at 12% 0%, rgba(176,72,159,.16), transparent 58%),
    radial-gradient(120% 140% at 88% 100%, rgba(127,227,176,.12), transparent 58%);
}
.an-scene svg { display: block; width: 100%; height: auto; }
.an-scene text { font-family: 'Switzer', 'Helvetica Neue', Arial, sans-serif; }

/* Le trait qui s'ecrit : la longueur du chemin sert de tiret. */
.an-trace { stroke-dasharray: 1400; stroke-dashoffset: 1400; }
.vu .an-trace { animation: an-ecrire 1.8s cubic-bezier(.22,1,.36,1) .15s forwards; }
@keyframes an-ecrire { to { stroke-dashoffset: 0; } }

/* ⚠️ `transform-box: fill-box` EST OBLIGATOIRE SUR UN ELEMENT SVG. Sans lui,
   `transform-origin` se rapporte au repere du document et la barre part de
   l'autre bout de l'ecran au lieu de pousser depuis sa base. */
.an-pousse { transform: scaleY(.04); transform-box: fill-box; transform-origin: 50% 100%; }
.vu .an-pousse { animation: an-monter 1s cubic-bezier(.16,1,.3,1) forwards; }
.vu .an-pousse:nth-of-type(2) { animation-delay: .06s }
.vu .an-pousse:nth-of-type(3) { animation-delay: .12s }
.vu .an-pousse:nth-of-type(4) { animation-delay: .18s }
.vu .an-pousse:nth-of-type(5) { animation-delay: .24s }
.vu .an-pousse:nth-of-type(6) { animation-delay: .30s }
.vu .an-pousse:nth-of-type(7) { animation-delay: .36s }
@keyframes an-monter { to { transform: scaleY(1); } }

/* L'anneau d'une note : meme mecanique que le trait, en circulaire. */
.an-anneau {
  stroke-dasharray: 226; stroke-dashoffset: 226;
  transform: rotate(-90deg); transform-box: fill-box; transform-origin: center;
}
.vu .an-anneau { animation: an-remplir 1.6s cubic-bezier(.22,1,.36,1) .2s forwards; }
@keyframes an-remplir { to { stroke-dashoffset: var(--reste, 60); } }

/* Ce qui arrive en dernier : une valeur, un verdict. */
.an-tard { opacity: 0; }
.vu .an-tard { animation: an-paraitre .7s ease .9s forwards; }
@keyframes an-paraitre { to { opacity: 1; } }

/* Le battement d'un point vivant. */
.an-pouls { animation: an-battre 2.6s ease-in-out infinite; }
@keyframes an-battre { 0%,100% { opacity: .4 } 50% { opacity: 1 } }

/* ── Le pictogramme d'un module ─────────────────────────────────────────── */
.an-module { display: flex; gap: 14px; align-items: flex-start; }
.an-ico {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.10);
  color: #A9ABB8;
}
.an-module[data-cle="1"] .an-ico {
  color: #7FE3B0; border-color: rgba(127,227,176,.32); background: rgba(127,227,176,.08);
}
.an-ico svg { width: 18px; height: 18px; }
.an-module-texte { min-width: 0; }
.an-symboles { position: absolute; width: 0; height: 0; overflow: hidden; }

@media (max-width: 700px) {
  .an-volet { padding-bottom: 64px; }
  .an-volet:first-of-type { padding-top: 64px; }
  .an-modules { grid-template-columns: 1fr; }
  /*
    ⚠️ LE PICTOGRAMME PASSE AU-DESSUS SUR TELEPHONE. En rangee, il prend
    quarante-huit pixels sur une carte qui n'en fait que trois cent quarante :
    la ligne tombe a trente-cinq caracteres et la description repasse a trois
    lignes. Empile, le texte retrouve toute la largeur.
  */
  .an-module { flex-direction: column; gap: 12px; }
}


/* ── Les questions-reponses ──────────────────────────────────────────────
   Une balise `details` native : l'ouverture, le clavier, la recherche dans la
   page et l'impression marchent sans une ligne de script. Un accordeon
   bricole en div les redemande tous, et en oublie toujours un. */
.an-qrs { padding: clamp(10px, 1.4vw, 18px) clamp(12px, 1.6vw, 22px) clamp(16px, 2vw, 26px); }
.an-qr { border-bottom: 1px solid rgba(255,255,255,.08); }
.an-qr:last-child { border-bottom: 0; }
.an-qr summary {
  display: grid; grid-template-columns: 34px minmax(0, 1fr) 14px; align-items: center; gap: 14px;
  padding: 18px 6px; cursor: pointer; list-style: none;
}
.an-qr summary::-webkit-details-marker { display: none; }
.an-qr-question { font-size: 16.5px; line-height: 1.4; font-weight: 600; color: #F2F1F6; }
.an-qr-ico {
  width: 34px; height: 34px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.10); color: #A9ABB8;
}
.an-qr-ico svg { width: 17px; height: 17px; }
.an-qr-chevron { width: 12px; height: 8px; color: #A9ABB8; transition: transform .18s ease; }
.an-qr[open] .an-qr-chevron { transform: rotate(180deg); }
.an-qr[open] .an-qr-question { color: #7FE3B0; }
.an-qr[open] .an-qr-ico { color: #7FE3B0; background: rgba(127,227,176,.09); border-color: rgba(127,227,176,.26); }
.an-qr summary:hover .an-qr-question { color: #FFFFFF; }

/*
  ⚠️ LA REPONSE S'ALIGNE SOUS LA QUESTION, PAS SOUS LE PICTOGRAMME. Le decalage
  de 48 px reprend la colonne du pictogramme et son ecart : sans lui, la
  reponse repart de la marge et la question parait suspendue au-dessus du vide.
*/
.an-qr > p {
  margin: 0 0 20px; padding-left: 48px; padding-right: 24px;
  max-width: 78ch; font-size: 15px; line-height: 1.65; color: #A9ABB8;
}

@media (prefers-reduced-motion: reduce) { .an-qr-chevron { transition: none; } }
@media (max-width: 640px) {
  .an-qr summary { grid-template-columns: 28px minmax(0, 1fr) 12px; gap: 10px; }
  .an-qr-ico { width: 28px; height: 28px; }
  .an-qr > p { padding-left: 38px; padding-right: 0; }
}


/* ── La date d'ouverture, au-dessus du titre ─────────────────────────────
   ⚠️ AU-DESSUS ET NON A COTE. A cote, elle entre en concurrence avec le titre
   pour la meme ligne et le fait passer a deux lignes sur la moitie des cartes.
   Au-dessus, elle se lit comme une etiquette et ne deplace rien. */
.an-quand {
  display: block; margin-bottom: 6px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: #A9ABB8; font-variant-numeric: tabular-nums;
}
.an-quand-ouvert { color: #7FE3B0; }


/* ── La frise cliquable ──────────────────────────────────────────────────
   Chaque mois a sa couleur, portee par la variable `--mois` posee sur le
   jalon ET sur ses cartes : une seule valeur decide des deux, elles ne
   peuvent pas se contredire. */
.an-frise { display: block; width: 100%; height: auto; }
.an-jalon { cursor: pointer; }
.an-jalon-cible { fill: transparent; }
.an-jalon:hover .an-jalon-cible,
.an-jalon:focus-visible .an-jalon-cible { fill: rgba(255,255,255,.05); }
.an-jalon:focus { outline: none; }
.an-jalon:focus-visible .an-jalon-cible { stroke: var(--mois); stroke-width: 1.5; }
.an-jalon-annee { fill: #6E6472; }
.an-jalon-mois { fill: #A9ABB8; }
.an-jalon-compte { fill: #6E6472; }
.an-jalon-anneau { fill: #191B28; stroke: var(--mois); stroke-width: 2.5; }
.an-jalon-coeur { fill: transparent; transition: fill .18s ease; }
.an-jalon:hover .an-jalon-mois { fill: var(--mois); }

/* Le mois choisi : plein, et son libelle prend sa couleur. */
.an-jalon[data-choisi] .an-jalon-coeur { fill: var(--mois); }
.an-jalon[data-choisi] .an-jalon-mois { fill: var(--mois); }
.an-jalon[data-choisi] .an-jalon-cible { fill: rgba(255,255,255,.06); }

.an-frise-aide { margin: 14px 0 0; text-align: center; font-size: 13px; color: #6E6472; }

/* La carte prend la couleur de son mois, sur son etiquette et son picto. */
.an-module[data-mois] .an-quand { color: var(--mois); }
.an-module[data-mois] .an-ico {
  color: var(--mois);
  background: color-mix(in srgb, var(--mois) 10%, transparent);
  border-color: color-mix(in srgb, var(--mois) 30%, transparent);
}

.an-module[hidden] { display: none; }

/* Le rappel de filtre, sous les cartes. */
.an-filtre-etat {
  display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap;
  margin: 0; padding: 0 clamp(16px, 2vw, 26px) clamp(20px, 2.4vw, 30px);
  font-size: 14px; color: #A9ABB8;
}
.an-filtre-etat[hidden] { display: none; }
.an-filtre-tout {
  border: 1px solid rgba(255,255,255,.20); background: transparent; color: #F2F1F6;
  border-radius: 999px; padding: 8px 16px; font: inherit; font-size: 13.5px; cursor: pointer;
}
.an-filtre-tout:hover { background: rgba(255,255,255,.07); }

@media (prefers-reduced-motion: reduce) { .an-jalon-coeur { transition: none; } }


/* ── Le recit, dans le panneau ────────────────────────────────────────────
   Un texte suivi, et non des cartes : c'est une histoire, elle se lit d'un
   bout a l'autre. La forme du panneau ne change pas, seul son contenu le
   fait, ce qui suffit a rompre la repetition sans quitter l'habillage. */
.an-recit { padding: clamp(22px, 3vw, 40px) clamp(20px, 2.6vw, 44px) clamp(26px, 3vw, 44px); }
.an-recit-tete {
  /*
    ⚠️ TOUTE LA LARGEUR DU PANNEAU. Un `max-width: 30ch` la repliait sur la
    moitie gauche : la phrase d'ouverture se lisait comme une colonne parmi
    d'autres au lieu d'ouvrir le bloc. Elle porte l'idee de la page, elle
    prend la place.
  */
  margin: 0 0 26px; max-width: none;
  font-family: 'Poppins', 'Switzer', sans-serif;
  font-size: clamp(24px, 2.9vw, 34px); line-height: 1.18; letter-spacing: -.03em;
  font-weight: 700; color: #FFFFFF;
  /*
    ⚠️ PAS DE `text-wrap: balance` ICI. Il egalise les lignes en les
    RACCOURCISSANT toutes : la boite faisait bien toute la largeur, mais le
    texte peint s'arretait aux trois quarts. Mesurer la boite ne le voit pas ;
    il faut mesurer la ligne la plus longue.
  */
  text-wrap: pretty;
}
/*
  ⚠️ DEUX COLONNES EXACTEMENT, ET SEULEMENT SUR GRAND ECRAN. `auto-fit` en
  creait TROIS a 1440 px pour deux paragraphes : la troisieme restait vide et
  les deux autres tombaient a soixante-douze caracteres par ligne. Et sous
  900 px, deux colonnes descendaient a quarante-deux caracteres, ce qui hache
  un texte suivi. Une colonne, alors.
*/
.an-recit-corps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(28px, 3.4vw, 56px); }
@media (max-width: 900px) { .an-recit-corps { grid-template-columns: 1fr; } }
.an-recit-corps p { margin: 0 0 16px; font-size: 15.5px; line-height: 1.7; color: #C9C7D2; }
.an-recit-corps p:last-child { margin-bottom: 0; }
.an-recit-corps strong { color: #F2F1F6; font-weight: 650; }
.an-recit-corps em { color: #7FE3B0; font-style: normal; font-weight: 650; }

.an-signature {
  display: flex; align-items: center; gap: 14px;
  margin-top: clamp(24px, 2.6vw, 34px); padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,.10);
}
.an-signature-initiales {
  flex: 0 0 auto; width: 46px; height: 46px; border-radius: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(127,227,176,.10); border: 1px solid rgba(127,227,176,.28);
  color: #7FE3B0; font-weight: 700; font-size: 15px; letter-spacing: .02em;
}
.an-signature strong { display: block; font-size: 15.5px; color: #F2F1F6; }
.an-signature span { display: block; margin-top: 2px; font-size: 13.5px; color: #A9ABB8; }

/*
  ⚠️ LA PHOTO EST SERVIE PAR NOUS, PAS PAR LE CDN DE LINKEDIN. Le lien
  d'origine portait une date d'expiration au 01/10/2026 : trois semaines apres
  la mise en ligne, la page aurait affiche un carre casse sans que personne
  s'en apercoive. Le fichier est copie dans `public/`.

  ⚠️ ET SES DIMENSIONS SONT ECRITES DANS LA BALISE. Sans `width` et `height`,
  le texte de la signature saute au moment ou l'image arrive.
*/
.an-signature-photo {
  /* Un visage a 46 px est une vignette ; a 62 il porte la signature d'une
     page qui raconte une histoire. Le rayon suit : 62 moins la meme marge
     visuelle que la boite d'initiales qu'il remplace. */
  flex: 0 0 auto; width: 62px; height: 62px; border-radius: 18px;
  object-fit: cover; display: block;
  border: 1px solid rgba(127,227,176,.28);
}

/*
  Le lien LinkedIn, colle au nom.

  ⚠️ IL S'OUVRE AILLEURS, DONC `rel="noopener"` : sans lui, la page ouverte
  garde une reference vers la notre et peut la rediriger. Et il porte un
  `aria-label`, parce qu'un lien dont le contenu est un dessin n'a aucun texte
  a annoncer.
*/
.an-signature-lien {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; margin-left: 9px; vertical-align: -5px;
  border-radius: 7px; color: #A9ABB8;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.10);
  transition: color .16s ease, background .16s ease, border-color .16s ease;
}
.an-signature-lien svg { width: 13px; height: 13px; }
.an-signature-lien:hover,
.an-signature-lien:focus-visible {
  color: #7FE3B0; background: rgba(127,227,176,.10); border-color: rgba(127,227,176,.30);
}
@media (prefers-reduced-motion: reduce) { .an-signature-lien { transition: none; } }

/* --- La page des ressources : des modules qui sont des liens -------------- */

/*
  ⚠️ C'EST LA CARTE ENTIERE QUI EST LE LIEN, pas son titre. Une carte qui
  réagit au survol mais dont seuls trois mots sont cliquables est un piège :
  on vise la carte, on clique dans le vide.
*/
.an-module-lien {
  text-decoration: none;
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}
.an-module-lien:hover {
  border-color: rgba(127,227,176,.38);
  background: #252838;
  transform: translateY(-2px);
}
.an-module-lien[data-cle="1"]:hover { background: rgba(127,227,176,.10); }
.an-module-lien:focus-visible {
  outline: 2px solid #7FE3B0; outline-offset: 3px;
}
.an-module-lien:hover .an-ico { color: #7FE3B0; border-color: rgba(127,227,176,.32); }

/* La provenance, sous le texte : elle dit qui publie, pas où ça mène. */
.an-source {
  display: inline-block; margin-top: 12px;
  font-size: 12px; letter-spacing: .04em;
  color: #6E6472;
}
.an-module-lien:hover .an-source { color: #8A8290; }

/*
  La plaque des favicons, sur la page des ressources.

  ⚠️ UN FOND BLANC, POUR LES QUATRE. Deux des logos sont posés sur du
  transparent : le monogramme d'Easy Mobilier est vert foncé, celui de Moood
  orange. Sur le panneau nuit, le premier disparaissait purement et simplement.
  Les deux autres portent déjà leur fond, mais la plaque les met au même rang :
  quatre marques traitées de quatre façons se lisent comme un bricolage.

  ⚠️ ET `object-fit: contain`, PAS `cover`. Le logo de Moood est un mot large de
  trois fois sa hauteur ; `cover` le recadrerait au milieu et n'en montrerait
  que « oo ».
*/
/*
  ⚠️ TROIS SELECTEURS, ET C'EST LA CARTE MISE EN AVANT QUI L'IMPOSE.
  `.an-module[data-cle="1"] .an-ico` peint le pictogramme en vert d'eau, avec
  une specificite de 0,3,0 : une regle a une seule classe ne pouvait pas
  gagner. Mesure faite, la plaque de la premiere carte ressortait en
  rgba(127,227,176,.08) au lieu du blanc.
*/
.an-module .an-ico-marque,
.an-module[data-cle="1"] .an-ico-marque {
  background: #FFFFFF;
  border-color: rgba(255,255,255,.16);
  padding: 6px;
}
.an-module .an-ico-marque img {
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
}
.an-module-lien:hover .an-ico-marque,
.an-module-lien[data-cle="1"]:hover .an-ico-marque {
  background: #FFFFFF;
  border-color: rgba(127,227,176,.45);
}

/* Le nombre de membres d'un groupe, à côté de son nom (2026-09-25). Relevé à
   la main sur la page du groupe : Facebook ne le rend pas à une requête. */
.an-membres {
  display: inline-block; margin-left: 6px; padding: 2px 9px; border-radius: 999px;
  background: rgba(255, 255, 255, .08); color: #A9ABB8;
  font-size: 11.5px; font-weight: 600; white-space: nowrap; vertical-align: middle;
}