/* ==========================================================================
   base.css : reset, police embarquee, typographie de base
   ========================================================================== */

/* --------------------------------------------------------------------------
   POLICE EMBARQUEE : PAS D'APPEL A GOOGLE FONTS

   Charger une police depuis fonts.googleapis.com transmet l'adresse IP de
   chaque visiteur a Google. Le tribunal regional de Munich a juge ce transfert
   contraire au RGPD en janvier 2022. La page vise des banques europeennes,
   dont allemandes : l'exposition est evitable, donc evitee.

   Archivo est sous licence SIL Open Font License, qui autorise explicitement
   l'auto-hebergement. Fichier : sous-ensemble latin, police VARIABLE a deux
   axes (graisse 100-900, largeur 62-125 %), 90 Ko. Un seul fichier couvre
   donc tous les usages de la page. Elle ne declenche aucune requete sortante.
   -------------------------------------------------------------------------- */

/* Les deux axes sont declares ici : c'est ce qui permet ensuite de piloter la
   police avec les proprietes standard font-weight et font-stretch, plutot
   qu'avec font-variation-settings. */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url('../assets/fonts/archivo-latin.woff2') format('woff2');
}

/* --------------------------------------------------------------------------
   RESET
   -------------------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-200);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

h1, h2, h3, h4, p, ul, ol, figure, blockquote {
  margin: 0;
}

ul, ol {
  padding: 0;
  list-style: none;
}

a { color: inherit; }

/* Une personne qui navigue au clavier doit toujours voir ou elle est,
   y compris sur les fonds marine. */
:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
  border-radius: 2px;
}

/* Le mouvement se limite au survol/focus du CTA et a l'apparition de la
   barre utilitaire. Aucune animation au scroll : ce n'est ni utile ni
   approprie pour une audience bancaire. Et on respecte la preference
   systeme dans tous les cas. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }

  /* Le reflet du bouton est coupe explicitement plutot que reduit a une duree
     infime : on garde ainsi la maitrise de la position finale du calque, au
     lieu de dependre de la derniere image cle. */
  .summit-cta {
    animation: none !important;
    background-position: 200% 0, 0 0;
  }

  .summit-cta::before { animation: none !important; opacity: 0; }
}

/* --------------------------------------------------------------------------
   PRIMITIVES TYPOGRAPHIQUES
   -------------------------------------------------------------------------- */

/* Le traitement "EXPERIMENTATION" du visuel officiel : graisse fine, largeur
   normale, fort interlettrage. */
.summit-thin {
  font-family: var(--font-sans);
  font-stretch: var(--wd-normal);
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: .35em;
  line-height: var(--lh-snug);
}

/* --------------------------------------------------------------------------
   LIBELLE TECHNIQUE : remplace le motif Courier New

   Sur-titres, horaires, tags, bandeaux : capitales en largeur normale, graisse
   demi-grasse, fort interlettrage, chiffres tabulaires. Les chiffres tabulaires
   alignent verticalement les horaires du programme, ce que la chasse fixe de
   Courier New assurait ; la fonction est conservee sans la police systeme.
   -------------------------------------------------------------------------- */
.summit-eyebrow {
  font-family: var(--font-sans);
  font-stretch: var(--wd-normal);
  font-weight: 600;
  font-size: var(--fs-100);
  letter-spacing: .16em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  color: var(--burnt);
}

.summit-eyebrow--onnavy { color: var(--accent); }

.summit-h2 {
  font-family: var(--font-sans);
  font-stretch: var(--wd-title);
  font-weight: 700;
  font-size: clamp(var(--fs-400), 3.4vw, var(--fs-600));
  line-height: var(--lh-snug);
  letter-spacing: -0.005em;
  text-transform: uppercase;
  /* equilibre le drapeau des titres sur plusieurs lignes ; ignore par les
     navigateurs qui ne le connaissent pas, donc sans risque. */
  text-wrap: balance;
}

.summit-h3 {
  font-family: var(--font-sans);
  font-stretch: 88%;
  font-weight: 700;
  font-size: var(--fs-300);
  line-height: var(--lh-snug);
  text-transform: uppercase;
  letter-spacing: .01em;
}

.summit-prose p + p { margin-top: var(--space-4); }

.summit-visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   BOUTON D'INSCRIPTION
   Seul endroit de la page, avec la bande hero, ou le degrade est autorise.
   -------------------------------------------------------------------------- */

.summit-cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .7em;
  padding: var(--space-4) var(--space-12);
  border: 0;
  border-radius: var(--radius-pill);
  color: #FFFFFF;
  font-family: var(--font-sans);
  font-size: var(--fs-cta);
  font-weight: bold;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  box-shadow: var(--cta-shadow);
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;

  /* Deux couches de fond : un reflet clair par-dessus le degrade de marque.
     Le reflet est un calque de fond et non un pseudo-element, ce qui evite
     d'avoir a poser overflow:hidden sur un bouton en forme de pilule et
     libere ::after pour le chevron. */
  background-image: var(--cta-sheen), var(--cta-gradient);
  background-repeat: no-repeat;
  background-size: 220% 100%, 100% 100%;
  background-position: 200% 0, 0 0;
  animation: summit-cta-sheen 4.2s ease-in-out infinite;
}

/* Le reflet ne traverse le bouton que sur les 25 derniers pour cent du cycle :
   le reste du temps il attend hors cadre. Un balayage permanent fatiguerait
   l'oeil ; un balayage espace attire le regard sans agiter la page. */
@keyframes summit-cta-sheen {
  0%, 75% { background-position: 200% 0, 0 0; }
  100%    { background-position: -120% 0, 0 0; }
}

/* Halo qui se dilate puis s'efface, comme un phare. C'est le seul element de
   la page qui appelle le regard de lui-meme ; il reste donc discret, lent, et
   s'arrete des que le curseur arrive sur le bouton. */
.summit-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  animation: summit-cta-halo 3.6s cubic-bezier(.22, .61, .36, 1) infinite;
}

/* Le halo est dessine en box-shadow et non en transform: scale(). Une
   transformation agrandit la zone de defilement du document, et le bouton
   etant en pleine largeur sur mobile, le halo faisait deborder la page de
   quelques pixels. Une ombre portee, elle, n'a aucun effet sur la mise en
   page ni sur le defilement. */
@keyframes summit-cta-halo {
  0%        { box-shadow: 0 0 0 0 rgba(255, 175, 0, .55); }
  55%, 100% { box-shadow: 0 0 0 14px rgba(255, 175, 0, 0); }
}

/* Le petit bouton de la barre fixe ne pulse pas : il est deja permanent a
   l'ecran, un halo permanent y serait insupportable. */
.summit-cta--small::before { display: none; }

.summit-cta:hover::before,
.summit-cta:focus-visible::before { animation-play-state: paused; opacity: 0; }

/* Chevron dessine en CSS, comme celui de la ligne d'ambition. Il avance au
   survol : le mouvement dit ou mene le bouton. */
.summit-cta::after {
  content: "";
  width: .42em;
  height: .42em;
  border-top: .14em solid currentColor;
  border-right: .14em solid currentColor;
  transform: rotate(45deg);
  flex: none;
  transition: transform .2s ease;
}

.summit-cta:hover,
.summit-cta:focus-visible {
  background-image: var(--cta-sheen), var(--cta-gradient-hover);
  box-shadow: var(--cta-shadow-hover);
  transform: translateY(-2px);
}

.summit-cta:hover::after,
.summit-cta:focus-visible::after {
  transform: rotate(45deg) translate(3px, -3px);
}

.summit-cta:active { transform: translateY(0); }

.summit-cta--small {
  padding: var(--space-2) var(--space-6);
  font-size: var(--fs-100);
  letter-spacing: .1em;
  box-shadow: none;
}

/* --------------------------------------------------------------------------
   UTILITAIRES D'ESPACEMENT
   Volontairement limites a trois crans de l'echelle. Ils existent pour eviter
   des attributs style="" dans le HTML, pas pour ouvrir un systeme utilitaire.
   -------------------------------------------------------------------------- */

.summit-mt-4  { margin-top: var(--space-4); }
.summit-mt-8  { margin-top: var(--space-8); }
.summit-mt-12 { margin-top: var(--space-12); }

.summit-h2--narrow { max-width: 22ch; }

/* Empeche une date ou un nom propre de se couper entre deux lignes. */
.summit-nowrap { white-space: nowrap; }

/* Le seul endroit ou une coupure en plein mot est souhaitable : les adresses
   e-mail et les URL, qui n'offrent aucune espace ou se couper. Applique ici de
   facon ciblee, et surtout PAS globalement sur body : une regle globale coupait
   « EXPERIMENTATION » en plein milieu dans le titre de section. */
.summit-fact__val a,
.summit-note a,
.summit-footer__row a { overflow-wrap: anywhere; }