/* Vitrine publique de Sana-Cargo — la page que voit un visiteur.

   Elle était dessinée par Flutter : 3,9 Mo à télécharger avant le premier
   mot. En HTML, elle s'affiche en moins d'une seconde, se lit sans
   JavaScript — seul le simulateur en demande —, et les moteurs de recherche
   y voient enfin du texte.

   La page emprunte Inter à l'application — décision de M. SANA, 27/09/2026 :
   la vitrine doit être identique à celle qu'elle remplace, et la police en
   fait partie. `font-display: swap` en paie le prix sans le faire attendre :
   le texte s'affiche aussitôt dans la police du système, puis bascule quand
   Inter arrive.

   Les couleurs sont celles de `client/lib/theme/couleurs.dart`, valeur pour
   valeur — y compris les dégradés et l'alpha des voiles. Une vitrine qui
   ressemble à l'application sans en être exactement la couleur se remarque
   dès qu'on passe de l'une à l'autre. */

@font-face {
  font-family: 'Inter';
  /* Servie par nos soins, comme pour les pages légales : aucun serveur tiers,
     et rien qui dépende de l'adresse de l'application. */
  src: url('/fonts/Inter-Variable.ttf') format('truetype');
  font-weight: 100 900;
  font-display: swap;
}

:root {
  /* Marque */
  --bleu: #1f3fd1;            /* brandBlue */
  --bleu-sombre: #16308f;     /* brandBlueDark */
  --bleu-pale: #e8ecfc;       /* brandBlueTint */
  --orange: #f5821f;          /* brandOrange */
  --orange-pale: #fdebd8;     /* brandOrangeTint */
  --orange-texte: #a9540f;    /* brandOrangeText — l'orange de marque ne se lit pas en texte */
  --jaune: #ffc72c;           /* brandYellow */
  --rouge: #c0321d;           /* danger */
  --rouge-pale: #fbe2de;      /* brandRedTint */
  --vert: #1a8a4c;            /* la confirmation « copié » */
  --vert-pale: #eafbf2;

  /* Neutres */
  --texte: #14181f;           /* neutral900 — 17,8 : 1 sur blanc */
  --texte-fort: #3f4551;      /* neutral700 */
  --texte-second: #5f6673;    /* neutral500 — 5,8 : 1 sur blanc */
  --bordure-champ: #d1d5db;   /* neutral300 */
  --filet: #e7e9ec;           /* neutral150 */
  --gris: #f4f5f7;            /* neutral100 */
  --surface: #ffffff;
  --sur-bleu: #dce2fa;        /* brandPanelBodyText — le texte courant sur fond bleu */

  --focus: #1f3fd1;
  --sigle-bleu: #0021ff;
  --sigle-orange: #f5811e;
  --ombre: 0 4px 14px rgba(20, 24, 31, .06);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--surface);
  color: var(--texte);
  font: 400 1rem/1.65 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

h1, h2, h3 { line-height: 1.25; text-wrap: balance; margin: 0 0 .5em; }
h1 { font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3rem); font-weight: 800; letter-spacing: -.02em; }
h2 { font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem); font-weight: 800; letter-spacing: -.01em; }
h3 { font-size: 1.05rem; font-weight: 700; }
p { margin: 0 0 1em; }
a { color: var(--bleu); }
img { max-width: 100%; display: block; }

:where(a, button, summary, input, select):focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: 4px;
}

.evitement {
  position: absolute; left: -9999px; top: 0; z-index: 10;
  background: var(--surface); color: var(--texte);
  padding: 12px 16px; border: 2px solid var(--focus);
}
.evitement:focus { left: 8px; top: 8px; }

.cadre { max-width: 1180px; margin: 0 auto; padding: 0 28px; }
@media (max-width: 520px) { .cadre { padding: 0 20px; } }

/* ── En-tête ─────────────────────────────────────────────────────────────── */

.entete {
  position: sticky; top: 0; z-index: 5;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--filet);
}
.entete-interieur {
  max-width: 1180px; margin: 0 auto; padding: 12px 28px;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.sigle {
  font-weight: 800; font-size: 1.25rem; letter-spacing: -.02em;
  text-decoration: none; white-space: nowrap;
}
.sigle .s1 { color: var(--sigle-bleu); }
.sigle .s2 { color: var(--sigle-orange); }

/* Le bouton plein reprend l'`ElevatedButton` du thème : bleu de marque,
   texte blanc, coins arrondis — non des pilules. */
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 12px 22px; border-radius: 10px;
  font-size: .97rem; font-weight: 700; text-decoration: none; cursor: pointer;
  border: 1px solid transparent; font-family: inherit;
}
.bouton-plein { background: var(--bleu); color: #fff; }
.bouton-plein:hover { background: var(--bleu-sombre); }
.bouton-clair { background: var(--surface); color: var(--bleu); border-color: var(--bordure-champ); }
.bouton-clair:hover { border-color: var(--bleu); }
/* Sur fond bleu, le bouton s'inverse : blanc plein, texte de marque. */
.bouton-sur-bleu { background: var(--surface); color: var(--bleu); }
.bouton-sur-bleu:hover { background: var(--bleu-pale); }
.bouton.copie { background: var(--vert-pale); color: var(--vert); border-color: var(--vert); }

/* ── Hero ────────────────────────────────────────────────────────────────── */

.hero { position: relative; color: #fff; isolation: isolate; }
.hero img, .hero video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: -2;
}
/* Le voile de la vitrine Flutter, alpha pour alpha : dense à gauche où se lit
   le texte, léger à droite où se tiennent les visages. */
.hero::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg,
    rgba(20, 24, 31, .86) 0%, rgba(20, 24, 31, .66) 45%, rgba(20, 24, 31, .22) 100%);
}
.hero-contenu { padding: 84px 0; max-width: 640px; }
.hero h1 { color: #fff; }
.hero p { color: var(--sur-bleu); font-size: 1rem; }

/* ── Le carrousel du hero ─────────────────────────────────────────────────
   Les diapositives viennent du back-office (M. SANA, rapporté par Lionnel
   OUEDRAOGO, 04/10/2026) ; `vitrine.js` les pose à la place du hero écrit
   dans la page, qui reste celui d'un visiteur sans JavaScript ou d'une API
   injoignable.

   Toutes occupent la même case de grille : le hero prend la hauteur de la
   plus haute, et rien ne saute d'une diapositive à l'autre. Chacune porte sa
   photo et son voile ; le voile commun du hero s'efface. */
.hero.carrousel::after { content: none; }
.diapos { display: grid; }
.diapo {
  grid-area: 1 / 1; position: relative; isolation: isolate; overflow: hidden;
  opacity: 0; visibility: hidden;
  transition: opacity .8s ease, visibility 0s linear .8s;
}
.diapo.active { opacity: 1; visibility: visible; transition: opacity .8s ease, visibility 0s; }
.diapo::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg,
    rgba(20, 24, 31, .86) 0%, rgba(20, 24, 31, .66) 45%, rgba(20, 24, 31, .22) 100%);
}
/* Une photo qui ne peut pas couvrir la bannière — petite, ou plus haute que
   large — s'y montre entière et jamais agrandie (`scale-down`), sur un fond
   flou tiré d'elle-même : rien n'est coupé ni étiré, et la bannière reste
   pleine. Au centre, sur tous les écrans : calée à droite sur un écran
   large, elle paraissait décentrée (Lionnel OUEDRAOGO, 05/10/2026). */
.diapo .fond { display: none; }
.diapo.cadree .fond {
  display: block; position: absolute; inset: -48px; z-index: -3;
  background: center / cover no-repeat; filter: blur(32px);
}
.hero .diapo.cadree :is(img, video) { object-fit: scale-down; object-position: center; }

/* Une seule page, un seul titre principal : la première diapositive porte le
   h1, les suivantes un h2 qui lui ressemble trait pour trait. */
.diapo h2 { color: #fff; font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3rem); letter-spacing: -.02em; }
/* La place des commandes, sous le bouton. */
.hero.carrousel .hero-contenu { padding-bottom: 112px; }

.carrousel-commandes {
  position: absolute; left: 0; right: 0; bottom: 28px;
  display: flex; justify-content: center; align-items: center; gap: 6px;
}
.carrousel-commandes button {
  display: grid; place-items: center; width: 36px; height: 36px; padding: 0;
  border: 0; border-radius: 50%; background: rgba(20, 24, 31, .4); color: #fff;
  font: inherit; font-size: 1.15rem; line-height: 1; cursor: pointer;
}
.carrousel-commandes button:hover { background: rgba(20, 24, 31, .62); }
/* `display: grid` l'emporterait sur l'attribut `hidden` : le bouton du son
   resterait visible sur une photo. */
.carrousel-commandes button[hidden] { display: none; }
.carrousel-commandes button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.carrousel-points {
  display: flex; align-items: center; padding: 0 6px; height: 36px;
  border-radius: 999px; background: rgba(20, 24, 31, .4);
}
/* Un point visible de 8 pixels, mais une cible de 28 : assez pour un pouce. */
.carrousel-points button { width: 28px; height: 28px; background: none; }
.carrousel-points button:hover { background: none; }
.carrousel-points button::before {
  content: ''; width: 8px; height: 8px; border-radius: 999px;
  background: rgba(255, 255, 255, .55); transition: width .3s ease, background .3s ease;
}
.carrousel-points button[aria-current="true"]::before { width: 22px; background: #fff; }

@media (prefers-reduced-motion: reduce) {
  .diapo, .diapo.active, .carrousel-points button::before { transition: none; }
}

.etiquette {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 14px; border-radius: 999px;
  background: rgba(255, 255, 255, .14); color: #fff;
  font-size: .78rem; font-weight: 700; margin: 0 0 18px;
}
.etiquette::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--jaune); flex: none;
}
/* Sur fond clair : pastille orange, texte orange lisible, fond crème. */
.etiquette-claire { background: var(--orange-pale); color: var(--orange-texte); }
.etiquette-claire::before { background: var(--orange); }
/* Le mode de transport d'un entrepôt, lui, se dit en bleu, sans pastille. */
.etiquette-bleue { background: var(--bleu-pale); color: var(--bleu); font-size: .74rem; }
.etiquette-bleue::before { display: none; }

.actions { display: flex; gap: 12px; flex-wrap: wrap; margin: 26px 0 0; }

/* ── Bandeau de confiance ────────────────────────────────────────────────── */

.chiffres { border-top: 1px solid var(--filet); border-bottom: 1px solid var(--filet); }
.chiffres ul {
  list-style: none; margin: 0; padding: 26px 0; display: grid; gap: 22px;
  grid-template-columns: repeat(2, 1fr); text-align: center;
}
@media (min-width: 900px) { .chiffres ul { grid-template-columns: repeat(4, 1fr); } }
.chiffres strong { display: block; font-size: 1.375rem; font-weight: 800; color: var(--bleu); }
.chiffres span { color: var(--texte-second); font-size: .9rem; }

/* ── Sections ────────────────────────────────────────────────────────────── */

section { padding: 70px 0; }
.section-titre { max-width: 640px; margin-bottom: 40px; }
.section-titre p { color: var(--texte-second); margin: 0; }
/* Trois têtes de section sont centrées dans l'application — « Comment ça
   marche », « Deux modes de transport », « Nos entrepôts » et « Nos
   agences » —, les autres restent à gauche. */
.section-titre.centre { margin-inline: auto; text-align: center; max-width: 600px; }
.fond-gris { background: var(--gris); }
.fond-bleu-pale { background: var(--bleu-pale); }
.filet-dessus { border-top: 1px solid var(--filet); }

/* « Comment ça marche » : le même dégradé vertical que dans l'application,
   du bleu très pâle au blanc. Le texte y reste sombre. */
.fond-degrade {
  background: linear-gradient(180deg, var(--bleu-pale) 0%, #eef1fc 55%, #ffffff 100%);
}

.grille { display: grid; gap: 20px; }
.grille-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grille-4 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

.carte {
  background: var(--surface); border: 1px solid var(--filet);
  border-radius: 16px; padding: 24px; box-shadow: var(--ombre);
}
.carte h3 { margin-top: 0; }
.carte p:last-child { margin-bottom: 0; }
.carte-photo { padding: 0; overflow: hidden; }
.carte-photo img { width: 100%; height: 190px; object-fit: cover; }
.carte-photo .corps { padding: 22px 24px 26px; }

/* Les quatre étapes sont une liste ordonnée — c'est ce qu'elles sont, et un
   lecteur d'écran l'annonce ainsi. Mais leur numéro est déjà dans la pastille
   bleue : la puce du navigateur ferait « 1. ① ». */
.etapes { list-style: none; margin: 0; padding: 0; }

.etape .rang {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--bleu); color: #fff; font-weight: 800; margin-bottom: 14px;
  width: 30px; height: 30px; font-size: .95rem;
}

/* La carte d'un entrepôt : fond gris, sans bordure, comme dans
   l'application, et ses informations séparées par un filet. */
.carte-entrepot {
  background: var(--gris); border: 0; border-radius: 18px; padding: 24px; box-shadow: none;
}
.carte-entrepot .infos { border-top: 1px solid var(--filet); padding-top: 14px; margin-top: 14px; }

.note {
  background: var(--bleu-pale); color: var(--bleu-sombre);
  border-radius: 12px; padding: 14px 18px; font-size: .92rem;
}
.note-orange { background: var(--orange-pale); color: var(--orange-texte); }

/* Le marquage du colis, sous les quatre étapes.
   Une carte blanche et non une cinquième étape : ce n'est pas un moment du
   parcours mais une condition de la première étape, et la numéroter aurait
   fait croire à une cinquième chose à faire après la livraison. */
.marquage {
  background: var(--surface); border: 1px solid var(--filet);
  border-radius: 16px; padding: 28px; box-shadow: var(--ombre);
  margin-top: 28px; max-width: 760px; margin-left: auto; margin-right: auto;
}
.marquage h3 { margin: 0 0 8px; font-size: 1.15rem; }
.marquage > p { margin: 0 0 16px; color: var(--texte-second); }
/* Les trois mentions sont une liste ordonnée — elles s'écrivent dans cet
   ordre sur le carton. Le numéro du navigateur suffit ici : il n'y a pas de
   pastille pour le doubler, contrairement aux étapes. */
.mentions { margin: 0 0 16px; padding-left: 1.3em; }
.mentions li { margin-bottom: 8px; }
.marquage .note { margin: 0; }

dl.infos { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: .92rem; }
dl.infos dt { color: var(--texte-second); font-weight: 600; }
dl.infos dd { margin: 0; color: var(--texte-fort); overflow-wrap: anywhere; }

.lieu { color: var(--texte-second); font-size: .9rem; margin-top: -.4em; }
.carte .note { margin-top: 16px; }
.carte .bouton { margin-top: 14px; }

/* ── Simulateur ──────────────────────────────────────────────────────────── */

.simulateur { display: grid; gap: 36px; align-items: start; }
@media (min-width: 900px) { .simulateur { grid-template-columns: 1fr 1fr; } }
.simulateur-intro .intro-texte { max-width: 420px; color: var(--texte-second); font-size: .9rem; }
.vignette-mode { position: relative; margin: 22px 0 0; }
.vignette-mode img { width: 100%; height: 280px; object-fit: cover; border-radius: 18px; }
.vignette-mode figcaption {
  position: absolute; top: 16px; left: 16px;
  background: rgba(20, 24, 31, .72); color: #fff;
  padding: 7px 12px; border-radius: 8px; font-size: .85rem; font-weight: 600;
}
.carte-simulateur { padding: 26px; border-radius: 18px; box-shadow: none; }
.titre-carte { font-weight: 800; font-size: 1.05rem; margin: 0 0 16px; }
.pleine-largeur { width: 100%; }
/* La légende d'un groupe de boutons : utile au lecteur d'écran, muette à
   l'œil — l'application ne la montre pas non plus. */
.invisible {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.resultat { margin-top: 18px; }
.carte-simulateur .mention { color: var(--texte-second); font-size: .78rem; margin: 12px 0 18px; text-align: center; }
.carte-simulateur .mention-sous-bouton { margin: 10px 0 0; text-align: center; }
fieldset { border: 0; margin: 0 0 18px; padding: 0; }
legend { font-weight: 700; font-size: .95rem; padding: 0 0 8px; }

/* Un sélecteur segmenté, comme dans l'application : une piste grise, et le
   segment choisi en blanc, posé dessus. */
.choix {
  display: flex; gap: 4px; background: var(--gris);
  border-radius: 12px; padding: 4px;
}
.choix label {
  flex: 1 1 0; display: flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 44px; padding: 8px 12px; border-radius: 9px;
  font-weight: 600; font-size: .93rem; color: var(--texte-second);
  cursor: pointer; text-align: center;
}
.choix input { position: absolute; opacity: 0; width: 0; height: 0; }
.choix label:has(input:checked) {
  background: var(--surface); color: var(--bleu);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
}
.choix input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 4px; border-radius: 4px; }

.champ { margin-bottom: 16px; }
.champ label { display: block; font-weight: 600; font-size: .95rem; margin-bottom: 6px; }
.champ input {
  width: 100%; min-height: 48px; padding: 11px 14px;
  border: 1px solid #848a95; border-radius: 12px; background: var(--surface);
  color: var(--texte); font: inherit;
}
.aide { display: block; color: var(--texte-second); font-size: .8rem; margin-top: 5px; line-height: 1.5; }

.resultat {
  background: var(--bleu-pale); border-radius: 16px; padding: 24px; text-align: center;
  color: var(--texte-fort);
}
.resultat .prix { font-size: 1.9rem; font-weight: 800; display: block; color: var(--bleu); }
.resultat .delai { font-weight: 600; font-size: .85rem; color: var(--texte-fort); }
.resultat .mention { color: var(--texte-second); font-size: .78rem; margin: 14px 0 0; }
.resultat.erreur { background: var(--rouge-pale); }
.resultat.erreur .prix { color: var(--rouge); }
.mention-sous-bouton { color: var(--texte-second); font-size: .85rem; }

/* ── Bandeaux bleus ──────────────────────────────────────────────────────── */

.bandeau { background: var(--bleu); color: #fff; }
.bandeau .cadre {
  display: grid; gap: 32px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  align-items: center; padding-block: 56px;
}
.bandeau h2 { color: #fff; }
.bandeau p { color: var(--sur-bleu); }
.bandeau img { border-radius: 16px; width: 100%; height: 260px; object-fit: cover; }
.bandeau-inverse .cadre > img { order: -1; }
@media (max-width: 720px) {
  /* Sur un téléphone, la photo passe toujours après le texte : c'est le
     texte qu'on vient lire. */
  .bandeau .cadre > img { order: 2; }
}
.bandeau .actions { margin-top: 18px; }

/* ── Support ─────────────────────────────────────────────────────────────── */

.canaux a { text-decoration: none; color: inherit; display: block; height: 100%; }
.canaux a:hover .carte { border-color: var(--bleu); }
.canaux .carte { height: 100%; }
.canaux .lien { color: var(--bleu); font-weight: 700; }

details {
  background: var(--surface); border: 1px solid var(--filet);
  border-radius: 12px; margin-bottom: 10px;
}
summary {
  cursor: pointer; padding: 16px 18px; font-weight: 600; min-height: 48px;
  display: flex; align-items: center;
}
details[open] summary { border-bottom: 1px solid var(--filet); }
details p { margin: 0; padding: 16px 18px; color: var(--texte-fort); }

/* ── Pied de page ────────────────────────────────────────────────────────── */

/* La mention de propriété et les raccourcis partagent une ligne, l'une à
   gauche, les autres à droite — jusqu'à ce qu'elle soit trop étroite, où ils
   passent dessous, alignés à gauche. Les listes gardent leur nature pour un
   lecteur d'écran et perdent leurs puces pour l'œil, qui lit une enfilade
   séparée par des points médians. */
.pied { border-top: 1px solid var(--filet); padding: 32px 0; }
.pied .cadre { display: flex; flex-direction: column; gap: 16px; }
.pied-ligne {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 14px 24px;
}
.raccourcis {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px;
}
.raccourcis a {
  display: inline-block; padding: 4px 8px; color: var(--bleu);
  font-size: .75rem; font-weight: 600; line-height: 1.2; text-decoration: none;
}
.raccourcis a:hover { text-decoration: underline; }
/* Le point médian sépare pour l'œil seulement. Son texte de remplacement vide
   le retire de ce qu'annonce un lecteur d'écran — mais tous les navigateurs ne
   connaissent pas encore cette notation, et sans la règle simple d'abord ils
   n'afficheraient aucun séparateur. */
.raccourcis li + li::before { content: '·'; color: var(--bordure-champ); margin-right: 10px; }
@supports (content: 'x' / '') {
  .raccourcis li + li::before { content: '·' / ''; }
}
.pied .copyright { color: var(--texte-second); font-size: .75rem; margin: 0; }

/* ── Pas de mode sombre, et c'est voulu ──────────────────────────────────── */
/*
   L'application n'a pas de thème sombre : elle est claire partout. La vitrine
   ne s'en invente donc pas un — elle emploierait des couleurs que la marque
   n'a jamais choisies, et les deux cesseraient de se ressembler. Les pages
   légales gardent le leur : ce sont des textes qu'on lit longuement, non une
   vitrine.
*/

/* ── Impression ──────────────────────────────────────────────────────────── */

@media print {
  .entete, .actions, .simulateur, .pied { display: none; }
  .hero { color: #000; }
  .hero::after, .hero img, .hero video, .diapo::after, .diapo .fond, .carrousel-commandes { display: none; }
  .bandeau { background: #fff; color: #000; }
  .bandeau h2, .bandeau p { color: #000; }
}