/* ==========================================================================
   Artemed - annonces et appels a projets (module independant, ajoute en 2026)
   Charge apres artemed.css, uniquement sur les pages qui en ont besoin
   (accueil FR/EN, pages "Appels a projets"). Il reutilise les couleurs et
   polices definies dans artemed.css (:root) et n'en modifie aucune regle,
   sauf l'espace au-dessus de la phrase d'accueil quand une annonce est affichee.

   LE TEXTE DES ANNONCES N'EST PAS ICI : il se trouve dans fr/index.html et
   en/index.html, entre les commentaires "ANNONCE A LA UNE".
   Penser a changer le numero ?v= dans les pages si l'on modifie ce fichier.
   ========================================================================== */

/* ---------- Annonce a la une (sous l'en-tete de la page d'accueil) ---------- */
.annonce[hidden] { display: none; }

.annonce-inner {
  position: relative;
  display: grid;
  /* meme grille que les quatre cartes de l'accueil : le titre s'aligne sur la 2e carte,
     le statut et la date limite sur la 1re */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-areas:
    "statut titre   titre   titre"
    "date   details details lien";
  column-gap: 1.25rem;
  row-gap: 0.5rem;
  align-items: baseline;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--line);
  padding: 1.05rem 0 1.2rem;
}

.annonce-statut {
  grid-area: statut; margin: 0;
  font: 500 0.78rem/1.3 var(--sans); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--accent);
}
.annonce-statut::before {
  content: ""; display: inline-block; width: 0.5rem; height: 0.5rem; margin-right: 0.6rem;
  border-radius: 50%; background: currentColor; vertical-align: 0.06em;
}

.annonce-titre {
  grid-area: titre; margin: 0;
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(1.4rem, 1.08rem + 0.95vw, 1.95rem); line-height: 1.12; letter-spacing: -0.025em;
  color: var(--ink); text-wrap: balance;
  transition: color .2s ease;
}

.annonce-details, .annonce-date { margin: 0; font-size: 0.93rem; line-height: 1.45; }
.annonce-details { grid-area: details; color: var(--muted); }
.annonce-date { grid-area: date; font-weight: 500; color: var(--ink); }
.annonce-nw { white-space: nowrap; }

/* Le lien couvre tout le bandeau (une seule tabulation, grande zone de clic) */
.annonce-lien {
  grid-area: lien; justify-self: end;
  display: inline-flex; align-items: center; gap: 0.55rem;
  border: 1px solid var(--ink); border-radius: 999px; padding: 0.68rem 1.25rem;
  font: 500 0.9rem/1.1 var(--sans); letter-spacing: 0.01em; white-space: nowrap;
  color: var(--ink); text-decoration: none;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.annonce-lien::after { content: ""; position: absolute; inset: 0; }
.annonce-lien:hover, .annonce-lien:focus-visible { background: var(--accent); border-color: var(--accent); color: #fff; }
.annonce-inner:hover .annonce-titre { color: var(--accent); }
.annonce-fleche { display: inline-block; transition: transform .2s ease; }
.annonce-lien:hover .annonce-fleche { transform: translateX(3px); }

/* Moins d'air au-dessus de la phrase d'accueil quand l'annonce est la,
   pour que la composition d'origine bouge le moins possible */
.annonce:not([hidden]) + .statement { padding-top: clamp(1.75rem, 4.2vw, 3.75rem); }

/* Tablette, et variante "carte" a toutes les tailles */
@media (max-width: 999px) {
  .annonce-inner {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "statut  statut"
      "titre   titre"
      "details lien"
      "date    lien";
    column-gap: 1.5rem; row-gap: 0.3rem;
  }
  .annonce-titre { margin: 0.25rem 0 0.3rem; }
  .annonce-lien { align-self: center; }
}
/* Telephone : tout en une colonne */
@media (max-width: 600px) {
  .annonce-inner {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "statut" "titre" "details" "date" "lien";
    padding: 0.95rem 0 1.1rem;
  }
  .annonce-lien { justify-self: start; margin-top: 0.75rem; }
}
@media (prefers-reduced-motion: reduce) {
  .annonce-titre, .annonce-lien, .annonce-fleche { transition: none; }
  .annonce-lien:hover .annonce-fleche { transform: none; }
}
@media print {
  .annonce-inner { border-bottom-color: #000; }
  .annonce-lien { border: 0; padding: 0; }
}

/* ---------- Variante "carte" (page Appels a projets : appel en cours) ---------- */
.annonce--carte .annonce-inner {
  background: var(--accent-light); border: 0; border-radius: var(--radius-lg);
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "statut  statut"
    "titre   titre"
    "details lien"
    "date    lien";
  column-gap: 1.5rem; row-gap: 0.3rem;
  padding: clamp(1.35rem, 3vw, 2rem) clamp(1.35rem, 3vw, 2.1rem);
}
.annonce--carte .annonce-titre { margin: 0.25rem 0 0.3rem; }
.annonce--carte .annonce-lien { align-self: center; background: var(--black); border-color: var(--black); color: #fff; }
.annonce--carte .annonce-lien:hover, .annonce--carte .annonce-lien:focus-visible { background: var(--accent); border-color: var(--accent); }
@media (max-width: 600px) {
  .annonce--carte .annonce-inner { grid-template-columns: minmax(0, 1fr); grid-template-areas: "statut" "titre" "details" "date" "lien"; }
}

/* ---------- Page "Appels a projets" (index) ---------- */
.appels-intro { margin: 1.1rem 0 0; max-width: 22rem; color: var(--muted); font-size: 0.97rem; line-height: 1.5; }
.appels-section + .appels-section { margin-top: clamp(2.5rem, 5vw, 3.75rem); }
.appels-vide { margin: 0; color: var(--muted); }

/* ---------- Page d'un appel : informations essentielles ---------- */
.appel-infos { margin: 1.6rem 0 0; border-top: 1px solid var(--line); font-size: 0.95rem; line-height: 1.45; }
.appel-infos > div { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.15rem; padding: 0.7rem 0; border-bottom: 1px solid var(--line); }
.appel-infos dt { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); }
.appel-infos dd { margin: 0; color: var(--ink); }
.appel-infos .appel-limite dd { font-family: var(--serif); font-size: 1.3rem; line-height: 1.2; color: var(--accent); }
.appel-statut { margin: 0 0 0.75rem; }
/* Les liens "Lire l'appel complet" menent directement au texte de l'appel (#appel / #call) */
.entry[id] { scroll-margin-top: 1.25rem; }
.appel-statut--clos { color: var(--muted); }