/*
  Le site commercial.

  **Aucune dépendance, aucune étape de construction.** Des fichiers HTML,
  cette feuille, quatre photographies. Le dossier se dépose sur n'importe quel
  hébergeur, il ne peut rien casser dans l'application, et il reste debout
  quand le serveur est à terre.

  Le parti pris : **simple, et orienté bénéfice.** Les titres disent ce que
  le client y gagne, jamais comment le produit est fait. Les photographies
  portent la chaleur ; la typographie reste calme et ne cherche pas à faire
  le travail des images.

  Couleurs et polices reprises de l'application (`apps/web/src/styles/
  tokens.css`) puis RECOPIÉES ici, pas importées : les deux n'ont pas le
  même cycle de vie, et un site vitrine qui casse parce qu'un jeton de
  couleur a bougé dans le produit est un site qu'on finit par ne plus
  toucher. Le fond, lui, est clair — c'est une page de vente, pas l'écran
  d'un agent.
*/

:root {
  --blanc: #ffffff;
  --creme: #f6f4f0;
  --encre: #14181a;
  --encre-2: #4c5459;
  --encre-3: #7d858a;
  --filet: #e4dfd7;
  --pri: #14454f;
  --pri-fonce: #0d2f36;
  --pri-clair: #e7efef;
  --acc: #9c5a22;

  --display: "Newsreader", Georgia, serif;
  --sans: "Archivo", "Helvetica Neue", Arial, sans-serif;

  --large: 1120px;
  --mesure: 34rem;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--blanc);
  color: var(--encre-2);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--display); font-weight: 400; color: var(--encre); margin: 0; line-height: 1.12; }
h1 { font-size: clamp(2.3rem, 5.2vw, 3.4rem); letter-spacing: -0.015em; }
h2 { font-size: clamp(1.8rem, 3.6vw, 2.5rem); letter-spacing: -0.01em; }
h3 { font-size: 1.22rem; line-height: 1.25; }
p { margin: 0; max-width: var(--mesure); }
p + p { margin-top: 0.9rem; }
a { color: var(--pri); text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; border-radius: 2px; }
img { display: block; max-width: 100%; height: auto; }

.contenu { width: 100%; max-width: var(--large); margin: 0 auto; padding: 0 1.5rem; }

/* --- L'en-tête ----------------------------------------------------------- */

.entete { position: sticky; top: 0; z-index: 20; background: rgba(255,255,255,.93);
  backdrop-filter: blur(8px); border-bottom: 1px solid var(--filet); }
.entete .contenu { display: flex; align-items: center; gap: 1.4rem; min-height: 4.4rem; flex-wrap: wrap;
  padding-top: .7rem; padding-bottom: .7rem; }
.marque { font-family: var(--display); font-size: 1.55rem; color: var(--encre);
  text-decoration: none; line-height: 1; }

/*
  **Deux liens, donc pas de menu.** La navigation a été un `<details>` qu'on
  dépliait sur téléphone, quand elle portait quatre entrées et que la marque
  s'appelait « Dalal ». Les deux ont changé : il reste deux liens, et « Ma
  cantine facile » est trois fois plus large que l'ancien nom.

  Mesuré sur un écran de 390 px : l'en-tête — qui est COLLANT — montait à
  trois lignes (la marque, puis le bouton rejeté à la ligne, puis le
  dépliant), soit près du quart de la hauteur utile, à chaque défilement.
  Deux liens affichés tiennent sur une ligne et coûtent moins que le
  mécanisme qui les cachait.
*/
.nav { display: flex; gap: 1.5rem; align-items: center; flex-wrap: wrap; font-size: .97rem; }
.nav a { text-decoration: none; color: var(--encre-2); padding: .25rem 0; border-bottom: 2px solid transparent; }
.nav a:hover { color: var(--pri); }
.nav a[aria-current="page"] { color: var(--encre); border-bottom-color: var(--acc); }

/*
  **La porte d'entrée, dans la navigation et non à côté du bouton de vente.**
  Deux boutons côte à côte dans l'en-tête se disputeraient le regard, et la
  page de vente a une tâche prioritaire : faire demander une démonstration.
  La connexion s'adresse à ceux qui sont DÉJÀ clients — ils la cherchent,
  ils n'ont pas besoin qu'on la leur crie.

  **Elle mène à la porte du PARENT**, et c'est un changement décidé par le
  client après usage. Le raisonnement initial — « le site s'adresse à
  l'école, donc le bouton mène au personnel » — confondait le PUBLIC du
  site avec celui du bouton. Le site se lit une fois, par une direction ;
  le bouton se clique tous les jours, par des centaines de parents à qui
  l'école a donné l'adresse.

  Le personnel garde sa porte : `/connexion` reste l'adresse où
  l'application renvoie un membre du personnel dont la session a expiré, et
  le pied de chaque page la nomme en clair. Le sélecteur de la page de
  connexion fait le reste en un clic.
*/
.nav a.connexion { border: 1px solid var(--filet); border-radius: 4px;
  padding: .38rem .85rem; color: var(--encre); border-bottom-width: 1px; }
.nav a.connexion:hover { border-color: var(--pri); color: var(--pri); }

@media (max-width: 52rem) {
  /* La marque et le bouton sur la première ligne, les liens sur la seconde. */
  .entete .contenu { gap: .9rem; min-height: 0; }
  .marque { font-size: 1.3rem; }
  .entete .action { margin-left: auto; padding: .6rem 1.1rem; font-size: .92rem; }
  .nav { order: 3; width: 100%; gap: 1.3rem; font-size: .93rem; }
  /* La connexion à l'extrémité de sa ligne : c'est la cible la plus
     fréquente une fois l'école cliente, et le pouce y arrive sans viser. */
  .nav a.connexion { margin-left: auto; }
}
@media (min-width: 52.0625rem) {
  .nav { margin-left: auto; }
}

/* --- Les appels à l'action ----------------------------------------------- */

.action, .action-2 {
  display: inline-block; text-decoration: none; font-weight: 500; font-size: .97rem;
  padding: .72rem 1.35rem; border-radius: 4px; border: 1px solid transparent;
}
.action { background: var(--pri); color: #fff; }
.action:hover { background: var(--pri-fonce); }
.action-2 { border-color: var(--filet); color: var(--encre); background: var(--blanc); }
.action-2:hover { border-color: var(--pri); color: var(--pri); }
.actions { display: flex; gap: .7rem; flex-wrap: wrap; margin-top: 1.9rem; }
.sous-action { margin-top: .9rem; font-size: .9rem; color: var(--encre-3); }

/*
  **L'accroche : la phrase qu'on retient quand on ne lit pas la page.**

  Deux emplois, et un seul rôle — résumer en une respiration ce que la
  section vient d'expliquer : « Les parents rechargent. Les élèves badgent.
  L'école garde le contrôle. » puis « Pas d'argent liquide. Pas de monnaie à
  gérer. »

  En SERIF et non en gras : le gras crie, le serif pose. La page a déjà ses
  titres pour la hiérarchie ; celle-ci n'est pas un titre, c'est une
  conclusion. D'où aussi la taille, entre le corps et le `h3` — assez pour
  qu'on s'y arrête, pas assez pour qu'on la prenne pour une section.
*/
.accroche { font-family: var(--display); font-size: 1.3rem; line-height: 1.45;
  color: var(--encre); margin-top: 1.6rem; max-width: var(--mesure); }

/* --- Les sections -------------------------------------------------------- */

section { padding: 4.5rem 0; }
.creme { background: var(--creme); }
.sombre { background: var(--pri-fonce); }
.sombre h2, .sombre h3 { color: #fff; }
.sombre p { color: #b9cfd0; }
.sombre .action-2 { background: transparent; border-color: rgba(255,255,255,.3); color: #fff; }
.sombre .action-2:hover { border-color: #fff; color: #fff; }

.titre { max-width: 40rem; }
.titre p { margin-top: 1rem; font-size: 1.1rem; max-width: 36rem; }

/* L'ouverture : texte à gauche, photographie à droite. */
.ouverture { padding: 3.6rem 0 4.2rem; }
.ouverture .contenu { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 3.5rem; align-items: center; }
.ouverture h1 + p { margin-top: 1.3rem; font-size: 1.15rem; }
.ouverture img { border-radius: 8px; }
@media (max-width: 58rem) { .ouverture .contenu { grid-template-columns: minmax(0, 1fr); gap: 2.2rem; } }

/* Les bénéfices : trois colonnes, sans boîte. Le filet suffit à séparer. */
.benefices { display: grid; gap: 2.2rem; margin-top: 3rem;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }

/*
  **Quatre publics, un seul rang.** À 16 rem de largeur minimale, la grille
  tient trois colonnes sur un écran de bureau : un quatrième bloc tombait
  seul sur la ligne suivante, et quatre publics qui se répondent — parents,
  élèves, cantine, administration — se lisent comme un ensemble ou pas du
  tout. 13 rem les fait tenir côte à côte, et `auto-fit` les replie
  normalement sur un téléphone.
*/
.benefices.quatre { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.benefice { border-top: 2px solid var(--pri); padding-top: 1.1rem; }
.benefice h3 { margin-bottom: .6rem; }
.benefice p { font-size: .97rem; }

/* Les étapes : une vraie séquence, donc des numéros. */
.etapes { display: grid; gap: 2rem; margin-top: 3rem; counter-reset: etape;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.etape { counter-increment: etape; }
.etape::before { content: counter(etape); display: block; font-family: var(--display);
  font-size: 2rem; line-height: 1; color: var(--acc); margin-bottom: .7rem; }
.etape h3 { margin-bottom: .5rem; }
.etape p { font-size: .97rem; }

/* Une section moitié texte, moitié photographie. */
.duo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 3.5rem; align-items: center; }
.duo img { border-radius: 8px; }
.duo.inverse .texte { order: 2; }
@media (max-width: 58rem) {
  .duo { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .duo.inverse .texte { order: 0; }
}

.liste { list-style: none; margin: 1.5rem 0 0; padding: 0; max-width: var(--mesure); }
.liste li { padding: .85rem 0; border-top: 1px solid var(--filet); font-size: .99rem; }
.liste li b { color: var(--encre); font-weight: 500; }
.sombre .liste li { border-color: rgba(255,255,255,.16); color: #b9cfd0; }
.sombre .liste li b { color: #fff; }

/* Un paragraphe qui nomme une limite. Il existe parce qu'une page qui ne dit
   que du bien se lit comme une brochure, et qu'un client qui découvre la
   limite après la signature ne revient pas. */
.reserve { border-left: 2px solid var(--acc); padding: .15rem 0 .15rem 1.2rem;
  max-width: var(--mesure); margin-top: 1.8rem; }
.reserve b { color: var(--encre); font-weight: 500; }
.sombre .reserve b { color: #fff; }

/* --- Les deux façons de nous joindre ------------------------------------- */

/*
  **Le numéro avant l'adresse.** Au Sénégal une direction écrit sur WhatsApp
  avant d'écrire un courriel ; l'ordre de la page suit l'ordre réel des prises
  de contact, et les deux liens partent avec le même message prérempli — un
  prospect qui n'a rien à rédiger répond plus souvent.
*/
.joindre { font-family: var(--display); font-size: clamp(1.35rem, 3.6vw, 1.85rem);
  line-height: 1.25; margin-top: 2rem; max-width: none; }
.joindre + .joindre { margin-top: 1.6rem; }
.joindre span { display: block; font-family: var(--sans); font-size: .85rem;
  color: var(--encre-3); margin-top: .4rem; }

/* --- Le pied ------------------------------------------------------------- */

.pied { background: var(--creme); border-top: 1px solid var(--filet); padding: 3rem 0 2.2rem; }
.pied .contenu { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
.pied h2 { font-family: var(--sans); font-size: .8rem; font-weight: 600; color: var(--encre);
  margin-bottom: .8rem; }
.pied ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.pied a { text-decoration: none; color: var(--encre-2); font-size: .95rem; }
.pied a:hover { color: var(--pri); }
.pied .bas { grid-column: 1 / -1; border-top: 1px solid var(--filet); padding-top: 1.3rem;
  font-size: .85rem; color: var(--encre-3); max-width: none; }
.pied .bas a { font-size: inherit; color: inherit; }