/*
  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 PERSONNEL. Celle du parent est à deux endroits où
  un parent se trouve déjà : en ouverture de `parents.html`, et au pied de
  chaque page. Et l'écran du personnel nomme explicitement l'autre porte —
  « Vous êtes un parent ? Connectez-vous ici » — donc personne ne reste
  bloqué derrière la mauvaise.
*/
.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); }

/* --- 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)); }
.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; }