/* ==========================================================================
   ACPF : page provisoire.
   Tous les réglages sont des jetons sur :root. Aucune valeur en dur plus bas :
   pour changer une couleur, une marge ou un rythme, on ne touche qu'ici.
   ========================================================================== */
:root {
  /* Couleurs relevées dans le logo. Le fond est exactement celui du fichier
     image, pour qu'aucun cadre ne se voie autour du logo. */
  --couleur-fond: #fefefe;
  --couleur-rouge: #be0c1c;
  --couleur-gris: #4b4e55;

  /* Mesure de lecture et marges latérales (téléphone, grand écran). */
  --mesure: 34rem;
  --marge-laterale-telephone: 1.25rem;
  --marge-laterale-grand-ecran: 3rem;
  --marge-laterale-fluide: 6vw;
  --marge-laterale: clamp(var(--marge-laterale-telephone), var(--marge-laterale-fluide), var(--marge-laterale-grand-ecran));

  /* Échelle d'espacements verticaux : quatre valeurs, pas une de plus. */
  --espace-1: 0.5rem;
  --espace-2: 1rem;
  --espace-3: 2rem;
  --espace-4: 4rem;

  /* Marge intérieure de la page : latérale seulement. Le haut et le bas sont
     tenus par le contenu et par le pied, pour que le pied touche le bas. */
  --marge-interieure: 0 var(--marge-laterale);
  --contenu-respiration: var(--espace-3);

  /* Logo : jamais plus large que le fichier d'origine (460 px). */
  --logo-largeur: 28.75rem;

  /* Filet décoratif sous le logo. */
  --filet-largeur: 2.75rem;
  --filet-epaisseur: 0.125rem;

  /* Typographie : polices du système uniquement. */
  --police: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --texte-taille: 1.0625rem;
  --texte-interligne: 1.6;
  --annonce-taille: 0.875rem;
  --annonce-approche: 0.18em;
  --annonce-graisse: 700;

  /* Animation d'entrée : un fondu avec léger glissement, en cascade. */
  --anim-duree: 880ms;
  --anim-courbe: cubic-bezier(.22, .61, .36, 1);
  --anim-glissement: 8px;
  --anim-delai-logo: 0ms;
  --anim-delai-adresse: 280ms;
  --anim-delai-message: 560ms;
  --anim-delai-pied: 840ms;

  /* Pied de page : signature, petite et discrète. */
  --couleur-discret: #6f727a;
  --pied-taille: 0.75rem;
  --pied-logo-hauteur: 0.875rem;
  --pied-logo-decalage: -0.125rem;
  --pied-logo-marge: 0.1875rem;
  --pied-soulignement-decalage: 0.125rem;
  --pied-respiration: var(--espace-2);
  /* Hauteur du pied : une ligne de texte plus sa respiration haute et basse.
     Sert aussi de contrepoids en haut de page, pour que le contenu reste
     centré dans la fenêtre et non dans l'espace au-dessus du pied. */
  --pied-hauteur: calc(var(--pied-taille) * var(--texte-interligne) + 2 * var(--pied-respiration));
  /* Liens du pied : même famille de gris que son texte, un cran plus soutenu. */
  --pied-lien-couleur: var(--couleur-gris);
  --focus-couleur: var(--couleur-rouge);
  --focus-epaisseur: 0.125rem;
  --focus-decalage: 0.1875rem;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  background: var(--couleur-fond);
  color-scheme: light;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  /* La page fait au moins un écran. « dvh » ENSUITE et non à la place : sur
     mobile, 100vh compte la barre d'adresse même rétractée. Un navigateur qui
     ne connaît pas l'unité ignore la ligne et garde celle du dessus. */
  min-height: 100vh;
  min-height: 100dvh;
  /* Hauteur EXACTE d'un écran là où « dvh » existe : c'est ce qui autorise le
     contrepoids du pied à se comprimer en fenêtre basse. Un contenu plus haut
     que l'écran dépasse simplement et la page défile, pied à la suite. */
  height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--marge-interieure);
  background: var(--couleur-fond);
  color: var(--couleur-gris);
  font-family: var(--police);
  font-size: var(--texte-taille);
  line-height: var(--texte-interligne);
  text-align: center;
}

/* Contrepoids du pied, en haut de page : même hauteur que lui tant qu'il y a
   de la place, donc le contenu reste centré dans la fenêtre. Il se laisse
   comprimer jusqu'à zéro quand la fenêtre est basse : aucun défilement inutile. */
body::before {
  content: "";
  flex: 0 1 var(--pied-hauteur);
}

/* Le contenu prend tout l'espace libre et s'y centre. « 1 0 auto » et non
   « 1 » : il ne se laisse jamais comprimer sous sa hauteur réelle. */
.page {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  max-width: var(--mesure);
  padding-block: var(--contenu-respiration);
}

/* Le logo est le titre de la page. */
.logo {
  margin: 0;
  font-size: inherit;
  line-height: 0;
}

.logo img {
  display: block;
  width: 100%;
  max-width: var(--logo-largeur);
  height: auto;
  margin-inline: auto;
}

.adresse {
  margin: var(--espace-3) 0 0;
  font-style: normal;
}

/* Filet rouge entre le logo et l'adresse. */
.adresse::before {
  content: "";
  display: block;
  width: var(--filet-largeur);
  height: var(--filet-epaisseur);
  margin: 0 auto var(--espace-3);
  background: var(--couleur-rouge);
}

/* Téléphone : style prêt pour le bloc à activer dans index.html. */
.telephone {
  margin: var(--espace-2) 0 0;
}

.telephone a {
  color: inherit;
  text-decoration-color: var(--couleur-rouge);
}

.message {
  margin: var(--espace-4) 0 0;
}

.message p {
  margin: 0;
}

.message .annonce {
  margin-bottom: var(--espace-1);
  color: var(--couleur-rouge);
  font-size: var(--annonce-taille);
  font-weight: var(--annonce-graisse);
  letter-spacing: var(--annonce-approche);
  text-transform: uppercase;
}

/* Pied de page, collé au bord inférieur de la fenêtre. Il est POUSSÉ, jamais
   positionné (ni fixed ni absolute) : enfant direct de <body>, sa marge haute
   automatique prend l'espace libre de la colonne. */
.pied {
  flex-shrink: 0;
  box-sizing: border-box;
  width: 100%;
  max-width: var(--mesure);
  min-height: var(--pied-hauteur);
  padding-block: var(--pied-respiration);
  color: var(--couleur-discret);
  font-size: var(--pied-taille);
  text-transform: lowercase;
}

body > .pied {
  margin-top: auto;
}

/* Les deux liens du pied, même traitement : couleur du site, pas de
   soulignement permanent, soulignement au survol et au focus clavier. */
.pied a,
.pied a:visited {
  color: var(--pied-lien-couleur);
  text-decoration: none;
  white-space: nowrap;
}

.pied a:hover,
.pied a:focus-visible {
  text-decoration: underline;
  text-underline-offset: var(--pied-soulignement-decalage);
}

.pied a:focus-visible {
  outline: var(--focus-epaisseur) solid var(--focus-couleur);
  outline-offset: var(--focus-decalage);
}

.signature-iav-logo {
  width: auto;
  height: var(--pied-logo-hauteur);
  margin-right: var(--pied-logo-marge);
  vertical-align: var(--pied-logo-decalage);
}

/* --------------------------------------------------------------------------
   Animation d'entrée : le logo, puis l'adresse, puis le message, puis le pied.
   Garde-fou : l'opacité 0 ne vient QUE de l'état « from » de l'animation
   (animation-fill-mode: both). Aucune règle statique ne masque quoi que ce
   soit : si les animations ne tournent pas, la page reste entièrement lisible.
   -------------------------------------------------------------------------- */
@keyframes acpf-fondu {
  from { opacity: 0; transform: translateY(var(--anim-glissement)); }
  to   { opacity: 1; transform: none; }
}

.logo    { animation: acpf-fondu var(--anim-duree) var(--anim-courbe) var(--anim-delai-logo) both; }
.adresse { animation: acpf-fondu var(--anim-duree) var(--anim-courbe) var(--anim-delai-adresse) both; }
.message { animation: acpf-fondu var(--anim-duree) var(--anim-courbe) var(--anim-delai-message) both; }
/* Le pied touche le bas de la fenêtre : on n'anime QUE son opacité. Un
   glissement le ferait dépasser le temps du fondu, et une barre de défilement
   apparaîtrait puis disparaîtrait. */
@keyframes acpf-fondu-sur-place {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.pied    { animation: acpf-fondu-sur-place var(--anim-duree) var(--anim-courbe) var(--anim-delai-pied) both; }

/* Mouvement réduit demandé par le système : aucune animation. */
@media (prefers-reduced-motion: reduce) {
  .logo,
  .adresse,
  .message,
  .pied {
    animation: none;
  }
}