/* EPS Manager - Application créée par Mikaël Fourny.
   source/public/p/style.css - L'habillage des pages de PRÉSENTATION.

   ⚠ CES PAGES VIVENT HORS DE L'APPLICATION REACT, et c'est tout leur intérêt :
   elles ont une VRAIE adresse que Google peut lire. Le routeur de l'application
   est à dièse — tous ses écrans partagent « / » — donc aucun écran n'est
   indexable. Ces pages-là le sont.

   ⚠ AUCUNE DÉPENDANCE, AUCUN SCRIPT, AUCUNE POLICE DISTANTE. Une page de
   présentation qui attend un CDN met trois secondes à s'afficher sur la 4G d'un
   bord de plan d'eau, et Google mesure ce délai. Les couleurs sont celles de la
   charte du projet (magenta #C21372, corail #F27A65, orange d'action #E8763A,
   anthracite #4D4D4D) ; le dégradé reste réservé au logo.

   Mikael - chef de projet - 2026-09-10 */

:root {
  --encre: #2b2b2b;
  --encre-douce: #5a5a5a;
  --fond: #fdfcfb;
  --carte: #ffffff;
  --trait: #e6e1de;
  --magenta: #c21372;
  --corail: #f27a65;
  --action: #e8763a;
  --anthracite: #4d4d4d;
}

@media (prefers-color-scheme: dark) {
  :root {
    --encre: #f2efed;
    --encre-douce: #b9b2ae;
    --fond: #191716;
    --carte: #221f1e;
    --trait: #383231;
    --magenta: #ef4f9c;
    --corail: #ff9b88;
    --action: #ff9455;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fond);
  color: var(--encre);
  font: 16px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  /* ⚠ ZONES SÛRES DES IPHONE. Sans cela, du texte passe sous l'encoche et sous la
     barre d'accueil. Ce produit est déclaré « très utilisé sur téléphone ». */
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

.enveloppe { max-width: 44rem; margin: 0 auto; padding: 1.5rem 1.1rem 4rem; }

/* ⚠ `min-width: 0` PARTOUT OÙ UN ENFANT DE FLEX PEUT DÉBORDER. C'est la cause
   profonde des trois débordements mesurés à 375 px le 2026-09-07 : un enfant de
   flex refuse par défaut de descendre sous la largeur de son contenu. */
header, main, section, article, footer, li, p { min-width: 0; }

/* Un mot très long — une adresse, un identifiant — ne doit jamais faire défiler
   la page entière. Il se coupe dans son propre bloc. */
p, li, h1, h2, h3 { overflow-wrap: anywhere; }

a { color: var(--magenta); }
a:hover { color: var(--action); }

.marque {
  display: flex; align-items: center; gap: .65rem;
  font-weight: 800; font-size: 1.05rem; letter-spacing: -.01em;
  text-decoration: none; color: var(--encre);
}
.marque img { width: 34px; height: 34px; }

h1 { font-size: clamp(1.7rem, 6vw, 2.4rem); line-height: 1.15; letter-spacing: -.02em; margin: 1.6rem 0 .6rem; }
h2 { font-size: clamp(1.25rem, 4.4vw, 1.6rem); line-height: 1.25; letter-spacing: -.01em; margin: 2.4rem 0 .5rem; }
h3 { font-size: 1.05rem; margin: 1.4rem 0 .3rem; }

.chapeau { font-size: 1.1rem; color: var(--encre-douce); }

.bouton {
  display: inline-block; margin-top: 1.2rem;
  background: var(--action); color: #fff; text-decoration: none;
  padding: .8rem 1.35rem; border-radius: .55rem; font-weight: 700;
  /* Cible tactile confortable : au bord de l'eau, avec les mains mouillées. */
  min-height: 48px; line-height: 1.9;
}
.bouton:hover { color: #fff; filter: brightness(.94); }

.carte {
  background: var(--carte); border: 1px solid var(--trait);
  border-radius: .7rem; padding: 1rem 1.1rem; margin: 1rem 0;
}
.carte h3 { margin-top: 0; }

ul.liste { padding-left: 1.15rem; }
ul.liste li { margin: .35rem 0; }

/* Un tableau large défile DANS SON PROPRE cadre : la page, elle, ne défile
   jamais horizontalement. Règle du projet, mesurée à 375 px. */
.cadre-defilant { overflow-x: auto; border: 1px solid var(--trait); border-radius: .7rem; }
table { border-collapse: collapse; width: 100%; min-width: 30rem; font-size: .95rem; }
th, td { text-align: left; padding: .6rem .8rem; border-bottom: 1px solid var(--trait); vertical-align: top; }
th { font-weight: 700; background: rgba(194, 19, 114, .06); }

nav.fil { font-size: .9rem; color: var(--encre-douce); margin-top: 1.2rem; }
nav.fil a { color: var(--encre-douce); }

footer {
  margin-top: 3rem; padding-top: 1.2rem;
  border-top: 1px solid var(--trait);
  font-size: .88rem; color: var(--encre-douce);
}
footer a { color: var(--encre-douce); }

/* `prefers-reduced-motion` : on fait disparaître, on ne ralentit jamais. */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}