/* ==========================================================================
   Page du Groupe Morais : le groupe et ses deux activités.
   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 du client. Le fond est exactement celui du
     fichier image, pour qu'aucun cadre ne se voie autour du logo. L'accent est
     la couleur vive du logo, le texte sa couleur sombre. */
  --couleur-fond: #ffffff;
  --couleur-accent: #2b6cb0;
  --couleur-texte: #1b2733;
  /* Couleurs de la charte IAV (~/Model/charte.md) : le rouge ne porte QUE
     « depuis 2008 », rien d'autre. */
  --couleur-depuis-2008: #da081c;
  --couleur-bordure: #e3e9f0;
  --couleur-secondaire: #5a6b7f;

  /* Mesure de lecture et marges latérales (téléphone, grand écran). */
  --mesure: 48rem;
  --mesure-texte: 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éposé. */
  /* Logo MD : hauteur réduite, et jamais plus de 18 % de la fenêtre. */
  --logo-hauteur: 7.5rem;
  --logo-part-hauteur: 18vh;

  /* Écriture du logo (même rythme que la clé MD-KeyBridge). */
  --ecriture-epaisseur: 64;
  /* Blanc du masque SVG : il ne se voit pas, il dit « visible ». */
  --masque-plein: #fff;
  --stylo-halo-opacite: 0.25;

  /* Cartes des deux activités. */
  --cartes-colonne-min: 17rem;
  --carte-rayon: 0.5rem;
  --carte-bordure: 1px;
  --carte-image-hauteur: 6.5rem;
  --carte-transition: 180ms;

  /* 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;
  --carte-texte-taille: 0.9375rem;
  --carte-nom-graisse: 700;
  --carte-depuis-taille: 0.8125rem;

  /* 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;
  /* La suite de la page attend que la signature soit presque finie (2 s). */
  --anim-delai-presentation: 1680ms;
  --anim-delai-activites: 1960ms;
  --anim-delai-pied: 2240ms;

  /* Pied de page : signature, petite et discrète. */
  /* Texte discret : la couleur du texte, éclaircie vers le fond. Suit donc les
     couleurs du client sans rien régler. Un navigateur ancien qui ne connaît
     pas color-mix garde simplement la couleur du texte. */
  --discret-part-texte: 80%;
  --couleur-discret: color-mix(in srgb, var(--couleur-texte) var(--discret-part-texte), var(--couleur-fond));
  --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 que son texte, un cran plus soutenu. */
  --pied-lien-couleur: var(--couleur-texte);
  --focus-couleur: var(--couleur-accent);
  --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-texte);
  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;
}

/* Le logo est un SVG qui s'écrit : la hauteur commande, la largeur suit. */
.logo-md {
  display: block;
  width: auto;
  height: min(var(--logo-hauteur), var(--logo-part-hauteur));
  margin-inline: auto;
  overflow: visible;
}

/* Traits du masque : larges et arrondis, ils couvrent toute l'épaisseur du
   logo. Le décalage de base est 0 : sans animation, tout est visible. */
.ecriture-trait {
  fill: none;
  stroke: var(--masque-plein);
  stroke-width: var(--ecriture-epaisseur);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1 1.1;
  stroke-dashoffset: 0;
}

.encre-couleur {
  flood-color: var(--couleur-accent);
}

.stylo-halo {
  fill: var(--couleur-accent);
  opacity: var(--stylo-halo-opacite);
}

.stylo-coeur {
  fill: var(--couleur-accent);
}

/* Présentation : le nom du groupe en annonce, puis sa devise. */
.presentation {
  margin: var(--espace-3) auto 0;
  max-width: var(--mesure-texte);
}

.presentation p {
  margin: 0;
}

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

/* Les deux activités : côte à côte quand la place le permet, l'une sous
   l'autre sur téléphone. Chaque carte est un lien entier. */
.activites {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--cartes-colonne-min)), 1fr));
  gap: var(--espace-2);
  margin: var(--espace-3) 0 0;
}

/* Filet de couleur entre la présentation et les activités. */
.activites::before {
  content: "";
  grid-column: 1 / -1;
  justify-self: center;
  width: var(--filet-largeur);
  height: var(--filet-epaisseur);
  margin-bottom: var(--espace-2);
  background: var(--couleur-accent);
}

.activite {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--espace-1);
  padding: var(--espace-3) var(--espace-2);
  border: var(--carte-bordure) solid var(--couleur-bordure);
  border-radius: var(--carte-rayon);
  /* Fond blanc et non --couleur-bloc : l'image de l'olivier a un fond blanc
     opaque, un fond teinté ferait apparaître son carré. */
  background: var(--couleur-fond);
  color: inherit;
  text-decoration: none;
  transition: border-color var(--carte-transition) ease;
}

.activite:hover {
  border-color: var(--couleur-accent);
}

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

.activite img {
  display: block;
  width: auto;
  max-width: 100%;
  height: var(--carte-image-hauteur);
  object-fit: contain;
  margin-bottom: var(--espace-1);
}

.activite-nom {
  font-weight: var(--carte-nom-graisse);
}

.activite-depuis,
.activite-depuis-neutre {
  font-size: var(--carte-depuis-taille);
  font-weight: var(--carte-nom-graisse);
}

/* « depuis 2008 » : seule place du rouge de la charte. */
.activite-depuis {
  color: var(--couleur-depuis-2008);
}

.activite-depuis-neutre {
  color: var(--couleur-secondaire);
}

.activite-texte {
  font-size: var(--carte-texte-taille);
}

.activite-lien {
  margin-top: auto;
  padding-top: var(--espace-1);
  color: var(--couleur-accent);
  font-size: var(--carte-texte-taille);
  text-decoration: underline;
  text-underline-offset: var(--pied-soulignement-decalage);
}

/* 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 la présentation, puis les activités, 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 landing-fondu {
  from { opacity: 0; transform: translateY(var(--anim-glissement)); }
  to   { opacity: 1; transform: none; }
}

/* Le logo ne fond pas : il s'écrit (animation SVG dans index.html). */
.presentation { animation: landing-fondu var(--anim-duree) var(--anim-courbe) var(--anim-delai-presentation) both; }
.activites { animation: landing-fondu var(--anim-duree) var(--anim-courbe) var(--anim-delai-activites) 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 landing-fondu-sur-place {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.pied    { animation: landing-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) {
  .presentation,
  .activites,
  .pied {
    animation: none;
  }

  /* L'écriture SVG ne connaît pas cette préférence : la feuille l'emporte sur
     ses valeurs animées. Logo entier tout de suite, ni encre fraîche ni stylo. */
  .ecriture-trait {
    stroke-dasharray: none;
  }

  .encre-fraiche,
  .stylo {
    display: none;
  }
}