/* KORA - feuille de style du site public.
   Memes couleurs que l'ecran d'accueil de l'application: vert profond,
   creme, et les trois couleurs qui ecrivent KORA. */

:root {
  color-scheme: light;
  --creme:   #F8F5ED;
  --encre:   #18312B;
  --vert:    #103D33;
  --gris:    #66716A;
  --rouge:   #C8102E;
  --jaune:   #E8B923;
  --liseré:  #E3DDCE;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--creme);
  color: var(--encre);
  font: 17px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-text-size-adjust: 100%;
}

.bandeau {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: 720px;
  margin: 0 auto;
  padding: 20px 20px 0;
}

/* LE LOGO, AUX COULEURS DE L'APPLICATION. K vert, OR jaune, A corail — les
   trois teintes des croissants de l'écran d'accueil. Le site les avait prises
   de travers : K en rouge, OR en encre. Les valeurs sont celles du code de
   l'application, pas des variables du site : le jaune de la charte (#F4C444)
   n'est pas celui des encadrés d'avertissement (#E8B923), et les confondre
   ferait dériver l'identité au gré des retouches de mise en page. */
.logo {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -1.5px;
  text-decoration: none;
  color: #F4C444;              /* OR */
}
.logo b { color: #103D33; font-weight: 800; }   /* K */
.logo i { color: #D96E58; font-style: normal; } /* A */

.langue {
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  color: var(--vert);
  border: 1.5px solid var(--liseré);
  border-radius: 100px;
  padding: 7px 14px;
  white-space: nowrap;
}
.langue:hover { border-color: var(--vert); }

/* LE MENU DE L'ACCUEIL porte la meme classe que la pastille des pages
   juridiques, pour rester son sosie. Un <select> n'herite ni de la police ni du
   fond: on les lui rend. La fleche native est gardee - c'est elle qui dit
   "ceci s'ouvre". */
select.langue {
  font-family: inherit;
  background: transparent;
  cursor: pointer;
}
select.langue[hidden] { display: none; }

/* L'INVITE ET SON MENU, sur l'accueil. `margin-left: auto` les garde a droite
   meme quand ils passent a la ligne sous le logo (bandeau en `flex-wrap`). */
.bandeau { flex-wrap: wrap; }
.choixLangue {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}
.choixLangue[hidden] { display: none; }
.choixLangue label {
  font-size: 14px;
  color: var(--gris);
  white-space: nowrap;
}

/* LES PASTILLES DES PAGES JURIDIQUES: quatre codes dans un seul contour, celui
   de la pastille. La langue ouverte est pleine, les autres sont des liens. */
.langues {
  display: flex;
  gap: 2px;
  padding: 3px;
  border: 1.5px solid var(--liseré);
  border-radius: 100px;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}
.langues a,
.langues span {
  padding: 5px 10px;
  border-radius: 100px;
  text-decoration: none;
  color: var(--vert);
}
.langues a:hover { background: var(--liseré); }
.langues span { background: var(--vert); color: #fff; }

.texte {
  max-width: 720px;
  margin: 0 auto;
  padding-block: 8px 56px;
  padding-inline: 20px;
}

h1 {
  font-size: clamp(28px, 6vw, 38px);
  line-height: 1.15;
  letter-spacing: -1px;
  margin: 28px 0 4px;
}

h2 {
  font-size: clamp(19px, 4vw, 22px);
  line-height: 1.25;
  letter-spacing: -0.4px;
  margin: 42px 0 2px;
  padding-top: 20px;
  border-top: 1.5px solid var(--liseré);
}

p { margin: 14px 0; }
strong { font-weight: 700; }

/* Les passages entre crochets sont des decisions non tranchees. Tant qu'ils
   sont visibles, personne ne peut croire que le texte est definitif. */
.reserve {
  background: #FFF6D9;
  border-left: 4px solid var(--jaune);
  padding: 12px 14px;
  border-radius: 0 8px 8px 0;
  font-size: 15px;
  color: #6B5A12;
}

/* La ligne de version, en italique juste sous le titre. */
h1 + p em { color: var(--gris); font-size: 15px; }

.pied {
  max-width: 720px;
  margin: 0 auto;
  padding: 24px 20px 48px;
  border-top: 1.5px solid var(--liseré);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  font-size: 14px;
}
.pied { align-items: center; }

/* LA MARQUE EN PIED DE PAGE. Sa taille n'est PAS fixee ici: `marque.png` fait
   96 pixels de cote et le HTML porte `width="48" height="48"`. La page est donc
   correcte meme si cette feuille de style tarde ou ne charge pas — ce qui est
   arrive le 14 septembre, ou l'embleme s'est affiche a 512 pixels faute d'avoir
   ses regles.

   UNE MARQUE DE PIED DE PAGE NE DOIT PAS DEPENDRE DU CSS POUR NE PAS DEFIGURER
   LA PAGE. On ne garde ici que ce qui releve vraiment de la mise en page:
   l'alignement sur la hauteur des liens, et un peu d'air a sa droite.

   96 pixels pour 48 affiches: deux fois la taille, ce qui suffit a rester net
   sur les ecrans a forte densite. Six kilooctets. */
.marque {
  flex: 0 0 auto;
  /* POUSSEE A DROITE. `margin-left: auto` absorbe tout l'espace libre de la
     ligne flex: les liens restent groupes a gauche, la marque va au bout. Une
     seule declaration, et elle se defait proprement quand la ligne se replie
     sur un ecran etroit. */
  margin-left: auto;
}

.pied a { color: var(--gris); text-decoration: none; }
.pied a:hover { color: var(--vert); text-decoration: underline; }

/* --- Page d'accueil --- */

.accueil { max-width: 720px; margin: 0 auto; padding: 40px 20px 56px; }
.accueil .baseline {
  font-size: clamp(30px, 7vw, 44px);
  line-height: 1.1;
  letter-spacing: -1.4px;
  font-weight: 800;
  margin: 0 0 10px;
}
.accueil .sous { color: var(--gris); font-size: 18px; margin: 0 0 36px; max-width: 34em; }
.accueil h2 { border: 0; padding: 0; margin: 34px 0 10px; font-size: 15px;
              text-transform: uppercase; letter-spacing: 1px; color: var(--gris); }
.cartes { display: flex; flex-wrap: wrap; gap: 10px; }
.cartes a {
  text-decoration: none;
  color: var(--vert);
  font-weight: 700;
  border: 1.5px solid var(--liseré);
  border-radius: 12px;
  padding: 13px 18px;
  background: #fff;
}
.cartes a:hover { border-color: var(--vert); }

/* L'ACCROCHE, PUIS L'EMBLEME CENTRE DESSOUS.
   Une seule disposition, a toutes les largeurs. Il y a eu une version ou
   l'embleme se tenait a droite de l'accroche sur grand ecran et passait dessous
   sur telephone: deux mises en page a verifier a chaque retouche, pour un gain
   qui ne valait pas la peine. Celle-ci se lit de la meme facon partout.

   `align-self: center` centre l'image sans centrer le texte — le conteneur
   reste en colonne alignee a gauche, et seule l'image s'en detache. Centrer
   l'ensemble aurait fait flotter l'accroche au milieu, ce qui ne va pas a un
   titre de cette taille.

   La largeur est bornee deux fois: 480px en absolu, et 60% de la fenetre. La
   colonne de texte fait 720px au plus, donc l'image en occupe les deux tiers;
   la seconde borne prend le relais des que la fenetre descend sous 800px. */
.accueilHaut {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
.accueilTexte { flex: 1 1 auto; min-width: 0; }
.embleme {
  flex: 0 0 auto;
  align-self: center;
  width: min(480px, 60vw);
  height: auto;
  margin-block: 14px 8px;
}