/* KARIMEX — vitrine karimex.sn
   ---------------------------------------------------------------------------
   TYPOGRAPHIE : Plus Jakarta Sans, la police de la marque (celle de
   l'application Flutter), auto-hebergee en woff2 variable — aucune requete
   vers Google, aucune dependance externe. Avant, la feuille la reclamait sans
   jamais la charger : les visiteurs voyaient la police systeme.

   Le rendu « premium » ne vient pas d'une police de fantaisie mais du reglage :
   une echelle fluide a fort contraste de taille, un resserrement progressif
   (plus le corps est gros, plus l'interlettrage est serre), des graisses
   franches, un rythme vertical genereux et des chiffres tabulaires.

   COULEURS : le vert #1B8F4D et le rouge #E63946 de la marque restent les
   couleurs d'aplat. Pour le TEXTE et les fonds portant du texte, on utilise
   leurs versions foncees (--vert-texte, --rouge-texte) : les teintes de marque
   plafonnent a 4,13:1 et 4,17:1 sur blanc, sous le minimum AA de 4,5:1.

   DEUX TERRAINS, DEUX ENCRES (2026-08-26). La page repose desormais sur un
   VERT PROFOND, et les cartes restent claires par-dessus. Un meme jeton ne
   peut donc plus servir partout : --texte et --gris sont l'encre des SURFACES
   CLAIRES, --sur-fond et --sur-fond-doux celle du FOND VERT. Poser du --gris
   sur le fond (ou du --sur-fond dans une carte) donne un texte illisible.

   La regle qui evite l'erreur : le fond vert est l'etat par defaut (`body`),
   et la liste des surfaces claires (voir « SURFACES CLAIRES » plus bas) remet
   l'encre foncee une bonne fois. Tout element ajoute DANS une carte herite
   alors du bon contraste sans rien declarer ; tout element ajoute SUR le fond
   herite du blanc.

   Contrastes mesures sur le fond #0e5731 : blanc 8,66:1 · --sur-fond-doux
   5,99:1 · --vert-sur-fond 5,40:1 · --rouge-sur-fond 5,11:1. Tous au-dessus
   du minimum AA de 4,5:1.
   --------------------------------------------------------------------------- */

@font-face {
  font-family: 'Jakarta';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url(fonts/jakarta-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Jakarta';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url(fonts/jakarta-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* --- Couleurs de marque (aplats, decor) --- */
  --vert: #1B8F4D;
  --vert-clair: #45A82E;
  --vert-sombre: #0f5c34;
  --rouge: #E63946;

  /* --- Couleurs portant du texte (conformes AA) --- */
  --vert-texte: #12683a;   /* 6,85:1 sur blanc */
  --vert-degrade-1: #12683a;
  --vert-degrade-2: #238040; /* blanc dessus : 4,96:1 */
  --rouge-texte: #cc2733;  /* 5,38:1 sur blanc */
  --rouge-degrade-1: #cc2733;
  --rouge-degrade-2: #d92d3b;

  /* --- Encre des SURFACES CLAIRES (cartes, pastilles, encarts) ---
     Ratios mesures sur le blanc des cartes, qui n'a pas bouge. */
  --texte: #14201b;
  --gris: #5c6b64;         /* 5,61:1 */
  --gris-clair: #66746d;   /* 4,90:1 */
  --bord: #dde7e1;
  --bord-fort: #c3d3ca;

  /* --- Le FOND VERT et son encre ---
     --fond porte les sections courantes, --fond-doux les sections alternees
     (plus profond : elles se lisent en retrait), --fond-pied le pied de page. */
  --fond: #0e5731;
  --fond-doux: #0a4526;
  --fond-pied: #08331d;
  --sur-fond: #ffffff;       /* 8,66:1 sur --fond */
  --sur-fond-doux: #c9dbd1;  /* 5,99:1 — texte secondaire sur le fond */
  --vert-sur-fond: #7fe0a4;  /* 5,40:1 — accent vert lisible sur le fond */
  --rouge-sur-fond: #ffb3b8; /* 5,11:1 — le rouge de marque eclairci */
  --bord-fond: rgba(255, 255, 255, .16);
  --bord-fond-fort: rgba(255, 255, 255, .32);

  --encre: #0f1a15;

  /* --- Elevation ---
     Sur fond vert, une ombre a 4 % ne se voit plus : les valeurs sont celles
     qui redonnent aux cartes claires le meme detachement qu'elles avaient sur
     blanc, pas les memes chiffres. */
  --ombre-fine: 0 1px 2px rgba(3, 20, 11, .18);
  --ombre: 0 1px 2px rgba(3, 20, 11, .18), 0 10px 30px rgba(3, 20, 11, .26);
  --ombre-forte: 0 18px 50px rgba(3, 20, 11, .38);

  /* --- Rythme vertical : une seule progression pour tout le site --- */
  --pas-1: 8px;
  --pas-2: 14px;
  --pas-3: 22px;
  --pas-4: 34px;
  --pas-5: 56px;
  --pas-6: clamp(72px, 9vw, 128px);

  --rayon: 18px;
  --rayon-lg: 26px;
  --largeur: 1160px;
  --largeur-texte: 62ch;

  /* --- Courbes : trois, pas une de plus ---
     --sortie      : depart franc, arrivee amortie. Retours au toucher,
                     apparitions. C'est la courbe par defaut.
     --entree-sortie : symetrique, pour ce qui part et revient.
     --tiroir      : longue detente, pour les panneaux qui se deploient. */
  --sortie: cubic-bezier(.23, 1, .32, 1);
  --entree-sortie: cubic-bezier(.77, 0, .175, 1);
  --tiroir: cubic-bezier(.32, .72, 0, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
  -webkit-text-size-adjust: 100%;
  /* Le fond est aussi porte par <html> : sans cela, la zone de rebond du
     defilement sur iOS et macOS reste blanche au-dela du corps de la page. */
  background: var(--fond);
}

body {
  margin: 0;
  background: var(--fond);
  color: var(--sur-fond);
  font-family: 'Jakarta', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: clamp(16px, .55vw + 14.5px, 17.5px);
  font-weight: 400;
  line-height: 1.7;
  font-optical-sizing: auto;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg { max-width: 100%; display: block; }

/* =========================================================================
   SURFACES CLAIRES

   Les cartes, pastilles, encarts et le plan restent blancs sur le fond vert.
   Cette regle leur rend l'encre foncee une bonne fois, pour que rien de ce
   qu'elles contiennent n'ait a se preoccuper du terrain : un titre ajoute
   dans une carte demain heritera du bon contraste sans une ligne de plus.

   Elle est placee TOT a dessein — chaque surface redeclare ensuite sa propre
   couleur de texte (--gris pour les paragraphes de carte, par exemple), et
   c'est bien la sienne qui doit l'emporter, pas ce repli.
   ========================================================================= */

.pastille, .repere, .carte, .rayon, .zone, .encart, .coord, .scene,
.bouton-ligne, .carte-plan {
  color: var(--texte);
}

/* Les chiffres s'alignent en colonne partout ou ils comptent. */
.repere b, .zone, table, time { font-variant-numeric: tabular-nums; }

/* Un lien sur le fond vert prend le vert clair ; dans une surface claire, il
   reprend le vert fonce. Deux terrains, deux encres — meme regle que ci-dessus. */
a { color: var(--vert-sur-fond); text-decoration: none; }
.pastille a, .repere a, .carte a, .rayon a, .zone a, .encart a, .coord a,
.carte-plan a { color: var(--vert-texte); }

/* Anneau de focus unique, visible sur clair comme sur fonce. */
:focus-visible {
  outline: 3px solid var(--vert-sur-fond);
  outline-offset: 3px;
  border-radius: 4px;
}
.pastille :focus-visible, .repere :focus-visible, .carte :focus-visible,
.rayon :focus-visible, .zone :focus-visible, .encart :focus-visible,
.coord :focus-visible { outline-color: var(--vert-texte); }
.pied :focus-visible, .appel :focus-visible { outline-color: #fff; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0;
}

.saut {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--encre); color: #fff;
  padding: 12px 18px; border-radius: 0 0 12px 12px;
  font-weight: 700;
  transition: top .18s var(--tiroir), transform 120ms var(--sortie);
}
.saut:focus { top: 0; text-decoration: none; }

.wrap { max-width: var(--largeur); margin: 0 auto; padding: 0 clamp(20px, 4vw, 32px); }

/* =========================================================================
   ECHELLE TYPOGRAPHIQUE
   Regle de composition : le resserrement suit la taille. Un titre de 60 px a
   -0,04em respire correctement ; un texte de 17 px au meme reglage devient
   illisible. D'ou un interlettrage decroissant avec le corps, et l'inverse
   pour les capitales, qui en reclament toujours plus.
   ========================================================================= */

.display {
  /* Le plafond est descendu de 4,5 a 3,9 rem le 2026-08-26 : la colonne de
     texte de l'accroche a maigri au profit de la photo, et 4,5 rem y decoupait
     le titre en mots de cinq lettres. */
  font-size: clamp(2.4rem, 1.1rem + 4.4vw, 3.9rem);
  line-height: 1.03;
  letter-spacing: -.042em;
  font-weight: 800;
  margin: 0 0 var(--pas-3);
  text-wrap: balance;
}

h2 {
  font-size: clamp(1.85rem, .9rem + 2.6vw, 2.75rem);
  line-height: 1.12;
  letter-spacing: -.032em;
  font-weight: 700;
  margin: 0 0 var(--pas-2);
  text-wrap: balance;
}

h3 {
  font-size: 1.15rem;
  line-height: 1.32;
  letter-spacing: -.014em;
  font-weight: 700;
  margin: 0 0 var(--pas-1);
}

p { margin: 0 0 var(--pas-2); text-wrap: pretty; max-width: var(--largeur-texte); }
p:last-child { margin-bottom: 0; }

/* Chapo : le pont entre le titre et le texte courant. */
.chapo {
  font-size: clamp(1.08rem, .5rem + 1.1vw, 1.3rem);
  line-height: 1.55;
  letter-spacing: -.012em;
  color: var(--sur-fond-doux);
  font-weight: 400;
  max-width: 46ch;
}

/* Surtitre : capitales tres espacees, precedees d'un filet. C'est le detail
   qui signe une mise en page soignee — a condition de ne jamais l'employer
   pour du texte a lire.

   Le rouge de ce surtitre n'a JAMAIS ete visible : `.sur` seul pese (0,1,0),
   quand `.titre p` et `.livraison p` pesent (0,1,1) et viennent plus bas dans
   la feuille. Les cinq surtitres de la page sortaient donc dans la couleur du
   texte secondaire. Les deux selecteurs de contexte, en (0,2,0), reprennent
   la main — plutot qu'un `!important`, qui reglerait le symptome en rendant
   la regle inopposable partout ailleurs. */
.titre .sur, .livraison .sur, .sur {
  display: flex; align-items: center; gap: 12px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--rouge-sur-fond);
  margin-bottom: var(--pas-2);
}
.sur::before {
  content: ""; width: 28px; height: 2px; flex: none;
  background: currentColor; opacity: .55;
}
.titre .sur { justify-content: center; }

.menu-texte, .bouton, .zone, .repere span, .coord b, .pied h3 {
  font-feature-settings: "ss01";
}

/* =========================================================================
   EN-TETE
   ========================================================================= */

.entete {
  position: sticky; top: 0; z-index: 50;
  background: rgba(10, 69, 38, .78);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--bord-fond);
}
.entete .wrap { display: flex; align-items: center; gap: 20px; height: 80px; }

.marque { display: flex; align-items: center; flex: none; }
.marque img { height: 54px; width: auto; border-radius: 7px; }


.nav { display: flex; gap: clamp(18px, 2vw, 30px); margin-left: auto; }
.nav a {
  color: var(--sur-fond-doux); font-weight: 600; font-size: .94rem;
  letter-spacing: -.005em; padding: 8px 0;
  border-bottom: 2px solid transparent;
  transition: color .15s ease, border-color .15s ease, opacity 120ms var(--sortie);
}


.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: inherit;
  font-weight: 700; font-size: .95rem; line-height: 1;
  letter-spacing: -.008em;
  padding: 15px 24px; border-radius: 999px; border: 1px solid transparent;
  cursor: pointer;
  transition: transform 120ms var(--sortie), box-shadow .16s ease,
    background-color .16s ease, border-color .16s ease;
}

.bouton-plein {
  background: linear-gradient(135deg, var(--vert-degrade-1) 0%, var(--vert-degrade-2) 100%);
  color: #fff; box-shadow: var(--ombre-forte);
}
.bouton-rouge {
  background: linear-gradient(135deg, var(--rouge-degrade-1) 0%, var(--rouge-degrade-2) 100%);
  color: #fff; box-shadow: 0 18px 44px rgba(204, 39, 51, .22);
}
.bouton-ligne {
  background: #fff; color: var(--vert-texte); border-color: var(--bord-fort);
  box-shadow: var(--ombre-fine);
}

.entete .bouton { flex: none; padding: 12px 20px; }

.burger {
  display: none; background: none; border: 0;
  padding: 10px; cursor: pointer; color: var(--sur-fond);
  transition: transform 120ms var(--sortie);
}

/* =========================================================================
   ACCROCHE
   ========================================================================= */

.hero {
  position: relative; overflow: hidden;
  /* Les deux halos etaient des teintes POSEES sur un fond quasi blanc ; sur le
     vert profond ils disparaitraient. Ce sont maintenant des eclaircissements,
     c'est-a-dire la meme intention rendue par les moyens du terrain sombre. */
  background:
    radial-gradient(900px 440px at 88% -12%, rgba(230, 57, 70, .30), transparent 62%),
    radial-gradient(820px 500px at 2% 0%, rgba(69, 168, 46, .34), transparent 60%),
    var(--fond-doux);
  border-bottom: 1px solid var(--bord-fond);
}
/* -------------------------------------------------------------------------
   POUSSIERE AMBIANTE

   Quatorze points qui derivent derriere l'accroche. C'est du decor assume :
   il n'explique rien, il ne guide rien. Il n'a donc droit de cite que parce
   que cette page est vue rarement, et sous trois conditions strictes :

   1. rien en dessous de 720 px — le public reel est sur telephone d'entree
      de gamme, et quatorze couches composites y coutent du courant ;
   2. rien en mouvement reduit ;
   3. aucun canvas, aucun script : seulement `transform`, qui s'anime sur le
      compositeur sans declencher ni mise en page ni repeinture.
   ------------------------------------------------------------------------- */

.poussiere { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.poussiere span {
  position: absolute;
  left: var(--x); top: var(--y);
  width: var(--s); height: var(--s);
  border-radius: 50%;
  background: var(--c, var(--vert-sur-fond));
  /* Les opacites en ligne (5 a 12 %) avaient ete reglees sur un fond clair.
     Le facteur les rehausse sans toucher au balisage, la poussiere restant
     un decor : perceptible du coin de l'oeil, jamais lisible. */
  opacity: calc(var(--o) * 2.2);
  animation: deriver var(--t) var(--entree-sortie) var(--d) infinite alternate;
}
@keyframes deriver { to { transform: translate3d(var(--dx), var(--dy), 0); } }

@media (max-width: 720px) { .poussiere { display: none; } }

/* L'image occupe la plus grande part, poussee jusqu'a la limite ou elle reste
   nette (2026-08-26).

   OU EST CETTE LIMITE. La photo source fait 740 px de large. Le seuil n'est
   donc PAS 740 px d'affichage : le panoramique l'agrandit jusqu'a 1,14, et
   c'est cet etat-la qui doit rester net. Le plafond reel est 740 / 1,14, soit
   649 px. `.scene` le porte en `max-width` plutot qu'un reglage de colonnes :
   ainsi la limite est ecrite une fois, a l'endroit qu'elle protege, et aucune
   largeur de fenetre ne peut la franchir par accident.

   CE QUE CELA COUTE. Elargir l'image retrecit le texte. La colonne passe de
   467 a environ 410 px, ou le titre d'accroche a 4,5 rem se briserait en mots
   de cinq lettres. Son echelle est donc redescendue a 3,9 rem, et l'ecart
   entre colonnes resserre : ce sont les deux ajustements qui rendent
   l'elargissement tenable, pas des retouches d'agrement.

   POURQUOI 39fr ET 61fr, ET NON .39fr ET .61fr. Quand TOUS les facteurs sont
   inferieurs a 1, la grille ne repartit plus l'espace : elle donne a chaque
   piste sa fraction de l'espace libre, et le reste demeure vide. Ecrit en
   decimales, ce reglage laissait la photo a 350 px vers 1100 px de fenetre,
   au lieu des 574 attendus — un creux invisible aux largeurs voisines, donc
   du genre a passer inapercu longtemps. Des facteurs entiers l'evitent. */
.hero .wrap {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 39fr 61fr;
  gap: clamp(28px, 3.5vw, 48px); align-items: center;
  padding-top: clamp(56px, 7vw, 96px);
  padding-bottom: clamp(64px, 8vw, 104px);
}
.pastille {
  display: inline-flex; align-items: center; gap: 9px;
  background: #fff; border: 1px solid var(--bord); border-radius: 999px;
  padding: 8px 16px; font-size: .8rem; font-weight: 700;
  letter-spacing: .01em; color: var(--vert-texte);
  box-shadow: var(--ombre-fine); margin-bottom: var(--pas-3);
}
.pastille .point { width: 8px; height: 8px; border-radius: 50%; background: var(--rouge); flex: none; }
.display em { font-style: normal; color: var(--vert-sur-fond); }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: var(--pas-4); }

/* -------------------------------------------------------------------------
   SCENE D'ACCROCHE — une photographie, un lent panoramique

   La composition de produits en quatre calques a laisse place a une photo de
   l'entrepot (2026-08-26). Le parallaxe au pointeur est parti avec elle : il
   fabriquait de la profondeur en decalant des plans les uns par rapport aux
   autres, ce qu'une image unique ne permet pas — la deplacer ne produirait
   qu'un glissement, c'est-a-dire du mouvement sans raison.

   Reste le panoramique : 34 s, aller-retour, jamais de retour brutal. Il est
   porte par `scale` et `translate`, proprietes independantes, donc composite :
   ni mise en page ni repeinture. La photo est legerement agrandie au repos,
   sans quoi le deplacement decouvrirait ses bords.
   ------------------------------------------------------------------------- */

.scene {
  position: relative;
  border-radius: var(--rayon-lg); overflow: hidden;
  box-shadow: var(--ombre-forte); border: 1px solid var(--bord);
  background: #eef5f0;
  /* 740 px de source / 1,14 d'agrandissement au plus fort du panoramique :
     au-dela, le navigateur inventerait des pixels. Voir l'accroche. */
  max-width: 649px;
  margin-inline: auto;
}

.scene .photo {
  display: block; width: 100%; height: auto;
  animation: panoramique 34s var(--entree-sortie) infinite alternate;
}
@keyframes panoramique {
  from { scale: 1.04; translate: -1.2% .4%; }
  to   { scale: 1.14; translate: 1.2% -.8%; }
}

/* =========================================================================
   REPERES CHIFFRES
   ========================================================================= */

.reperes {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px;
  margin: calc(var(--pas-5) * -1) auto 0; position: relative; z-index: 2;
  background: var(--bord); border: 1px solid var(--bord);
  border-radius: var(--rayon); overflow: hidden; box-shadow: var(--ombre);
}
.repere { background: #fff; padding: var(--pas-4) var(--pas-3); text-align: center; }
.repere b {
  display: block;
  font-size: clamp(1.9rem, 1rem + 2vw, 2.6rem);
  line-height: 1.05; letter-spacing: -.04em; font-weight: 800;
  color: var(--vert-texte); margin-bottom: 6px;
}
.repere span {
  display: block; font-size: .78rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--gris);
  line-height: 1.4;
  overflow-wrap: anywhere;
}

/* =========================================================================
   SECTIONS
   ========================================================================= */

.bloc { padding: var(--pas-6) 0; }
.bloc.doux {
  background: var(--fond-doux);
  border-top: 1px solid var(--bord-fond);
  border-bottom: 1px solid var(--bord-fond);
}

.titre { max-width: 46rem; margin: 0 auto var(--pas-5); text-align: center; }
.titre p { color: var(--sur-fond-doux); margin: 0 auto; }

/* Cartes d'activite */
.cartes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 22px); }
.carte {
  background: #fff; border: 1px solid var(--bord); border-radius: var(--rayon);
  padding: var(--pas-4) var(--pas-3); box-shadow: var(--ombre-fine);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.carte .ico {
  width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center;
  background: linear-gradient(140deg, rgba(18, 104, 58, .10), rgba(35, 128, 64, .16));
  color: var(--vert-texte); margin-bottom: var(--pas-3);
}
.carte.accent .ico {
  background: linear-gradient(140deg, rgba(204, 39, 51, .10), rgba(217, 45, 59, .16));
  color: var(--rouge-texte);
}
.carte p { color: var(--gris); font-size: .97rem; line-height: 1.62; }

/* Rayons */
.rayons { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.rayon {
  display: flex; align-items: center; gap: 11px;
  background: #fff; border: 1px solid var(--bord); border-radius: 14px;
  padding: 14px 15px; font-size: .92rem; font-weight: 600;
  letter-spacing: -.008em; line-height: 1.3;
  box-shadow: var(--ombre-fine);
  transition: border-color .16s ease, transform .16s ease;
}

.rayon .em { font-size: 1.3rem; line-height: 1; flex: none; }

/* Etapes */
.etapes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); counter-reset: etape; }
.etape { position: relative; padding-top: var(--pas-3); border-top: 2px solid var(--bord-fond-fort); }
.etape::before {
  counter-increment: etape; content: counter(etape, decimal-leading-zero);
  display: block; font-size: 1.05rem; font-weight: 800;
  letter-spacing: .06em; color: var(--vert-sur-fond);
  margin-bottom: var(--pas-2);
  font-variant-numeric: tabular-nums;
}
.etape p { color: var(--sur-fond-doux); font-size: .97rem; line-height: 1.62; }

/* Livraison */
.livraison { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 56px); align-items: center; }
.livraison p { color: var(--sur-fond-doux); }
.zones { display: flex; flex-wrap: wrap; gap: 10px; margin-top: var(--pas-3); }
.zone {
  background: #fff; border: 1px solid var(--bord); border-radius: 999px;
  padding: 10px 17px; font-weight: 600; font-size: .92rem; letter-spacing: -.006em;
  display: inline-flex; align-items: center; gap: 9px;
}
.zone::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--rouge); flex: none; }
.encart {
  background: #fff; border: 1px solid var(--bord); border-left: 3px solid var(--rouge);
  border-radius: 0 var(--rayon) var(--rayon) 0; padding: var(--pas-3) var(--pas-3);
  margin-top: var(--pas-4); box-shadow: var(--ombre-fine);
  font-size: .96rem; line-height: 1.62; color: var(--gris);
}
.encart strong { color: var(--texte); font-weight: 700; }
.carte-plan {
  width: 100%; border-radius: var(--rayon-lg);
  border: 1px solid var(--bord); box-shadow: var(--ombre); background: #fff;
}

/* Contact */
.contact { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(28px, 4vw, 56px); align-items: start; }
.coordonnees { display: grid; gap: 12px; }
.coord {
  display: flex; gap: 16px; align-items: flex-start;
  background: #fff; border: 1px solid var(--bord); border-radius: var(--rayon);
  padding: var(--pas-3); box-shadow: var(--ombre-fine);
}
.coord .ico {
  width: 42px; height: 42px; border-radius: 12px; flex: none; display: grid; place-items: center;
  background: rgba(18, 104, 58, .09); color: var(--vert-texte);
}
.coord b {
  display: block; font-size: .74rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .14em; color: var(--gris-clair);
  margin-bottom: 2px;
}
.coord a, .coord span { font-weight: 600; letter-spacing: -.008em; color: var(--texte); }
.coord a { color: var(--vert-texte); }

/* Trois numeros dans une seule carte : en ligne ils se toucheraient, et sur
   telephone deux cibles d'appel voisines de quelques pixels se confondent.
   L'ecart de 6 px separe les zones tactiles sans creer un bloc aere qui
   deferait l'equilibre des trois cartes de contact. */
.coord .tels { display: grid; gap: 6px; }
.coord .tels a { font-variant-numeric: tabular-nums; }

/* Sur telephone, ces trois liens sont trois cibles d'APPEL contigues — le cas
   ou une erreur de pouce coute le plus cher, puisqu'elle declenche un appel.
   Chacun prend donc la hauteur tactile de 44 px, au lieu des 28 px de sa seule
   ligne de texte. La regle est reservee aux petits ecrans : au pointeur, la
   precision n'est pas en cause et trois lignes espacees deferaient l'equilibre
   des trois cartes de contact. */
@media (max-width: 560px) {
  .coord .tels { gap: 2px; }
  .coord .tels a { display: flex; align-items: center; min-height: 44px; }
}

/* -------------------------------------------------------------------------
   WHATSAPP

   Deux numeros, donc deux liens : une carte de contact ordinaire n'en porte
   qu'un, et empiler deux adresses sans les distinguer obligerait le visiteur
   a lire avant de choisir. Chacun devient une ligne cliquable pleine largeur,
   dimensionnee pour le pouce (48 px de haut).

   Le vert de WhatsApp (#25D366) ne sert QU'AU GLYPHE : du blanc dessus ne
   donne que 1,98:1, il ne peut donc pas porter de texte. Les libelles restent
   sur l'encre des surfaces claires, et la marque reste reconnaissable.
   ------------------------------------------------------------------------- */

.coord .ico-wa { background: rgba(37, 211, 102, .14); color: #128C4A; }
.whatsapp .wa-intro {
  display: block; font-weight: 400; font-size: .93rem; line-height: 1.5;
  color: var(--gris); margin-bottom: 10px; max-width: 34ch;
}
.wa-liens { display: grid; gap: 8px; }
.wa-lien {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 48px; padding: 8px 14px;
  border: 1px solid var(--bord); border-radius: 12px;
  /* Le blanc-vert que --fond-doux portait AVANT le passage au fond vert : ici
     on est dans une carte claire, c'est donc bien de cette valeur qu'il s'agit,
     et non du jeton, qui designe desormais un vert profond. */
  background: #f3faf6;
  transition: border-color .16s ease, background-color .16s ease,
    transform 120ms var(--sortie);
}
.wa-lien .wa-num {
  font-weight: 700; letter-spacing: -.01em; color: var(--texte);
  font-variant-numeric: tabular-nums;
}
.wa-lien .wa-action {
  font-size: .78rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--vert-texte); flex: none;
}
.wa-lien:active { transform: scale(.985); }

/* Sur telephone, le numero et son libelle ne tiennent plus cote a cote : la
   carte est deja amputee de la colonne d'icone et des marges. Poses l'un sous
   l'autre ils redeviennent lisibles, et surtout la ligne cesse d'imposer au
   document une largeur minimale superieure a l'ecran — c'est ce qui faisait
   deborder la page a 320 px. */
@media (max-width: 560px) {
  .wa-lien { flex-direction: column; align-items: flex-start; gap: 2px; padding: 9px 13px; }
  .wa-lien .wa-num { font-size: .95rem; }
  .wa-lien .wa-action { font-size: .72rem; }
}

.appel {
  background:
    radial-gradient(600px 300px at 85% -20%, rgba(255, 255, 255, .16), transparent 60%),
    linear-gradient(140deg, var(--vert-sombre) 0%, var(--vert-degrade-1) 60%, var(--vert-degrade-2) 100%);
  color: #fff; border-radius: var(--rayon-lg);
  padding: var(--pas-5) var(--pas-4); box-shadow: var(--ombre-forte);
  /* Vert sur vert : sans ce filet, le panneau se fondrait dans la section.
     Le degrade garde ses valeurs (blanc a 4,96:1 sur son point le plus clair),
     c'est le contour qui fait le detachement, pas un eclaircissement. */
  border: 1px solid rgba(255, 255, 255, .22);
}
.appel h3 { font-size: 1.5rem; letter-spacing: -.026em; line-height: 1.2; margin-bottom: var(--pas-2); }
.appel p { color: rgba(255, 255, 255, .9); font-size: 1rem; }
.appel .actions { margin-top: var(--pas-4); }
.appel .bouton-ligne { color: var(--vert-texte); border-color: transparent; }

/* =========================================================================
   PIED
   ========================================================================= */

/* Le pied etait presque noir quand la page etait blanche. Sur le vert profond
   il prend la teinte la plus sombre de la gamme : la page reste d'une seule
   matiere, et le pied ancre toujours le bas. Contraste du texte : 8,04:1. */
.pied { background: var(--fond-pied); color: #b9c7c0; padding: var(--pas-6) 0 var(--pas-4); }
.pied a { color: #dfe9e4; }
.pied .haut { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: clamp(28px, 4vw, 48px); }
.pied img { height: 64px; width: auto; margin-bottom: var(--pas-3); border-radius: 8px; }
.pied p { font-size: .95rem; line-height: 1.65; max-width: 38ch; }
.pied h3 {
  color: #fff; font-size: .74rem; text-transform: uppercase;
  letter-spacing: .16em; font-weight: 700; margin: 0 0 var(--pas-2);
}
.pied ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: .95rem; }
/* -------------------------------------------------------------------------
   RESEAUX

   Une pastille neutre par reseau, la couleur de marque n'apparaissant qu'au
   survol et au focus. C'est un choix de LISIBILITE, pas de sobriete : sur le
   vert profond du pied, le noir de TikTok disparaitrait et le bleu de
   Facebook passerait tout juste. Les cinq pastilles gardent donc le meme
   traitement — un glyphe blanc sur un fond translucide, contraste identique
   pour tous — et chaque marque se revele quand on la designe.

   La couleur voyage par `--marque`, pose en ligne sur chaque lien : ajouter
   un reseau demain ne demandera pas une regle CSS de plus.

   48 px de cote : la meme cible tactile que les lignes WhatsApp du contact.
   ------------------------------------------------------------------------- */

/* Le titre et les pastilles sur une meme ligne, le titre a gauche. Ils se
   separent d'eux-memes quand la largeur ne suffit plus. */
.reseaux {
  margin-top: var(--pas-5);
  padding-top: var(--pas-4);
  border-top: 1px solid rgba(255, 255, 255, .12);
  display: flex; align-items: center;
  flex-wrap: wrap; gap: 14px var(--pas-3);
}
.reseaux h3 { margin-bottom: 0; }

/* `.pied .reseaux-liens` et non `.reseaux-liens` seul : le pied declare plus
   haut `.pied ul { display: grid }` pour ses colonnes de liens, et cette regle
   pese (0,1,1) contre (0,1,0). Ecrite simplement, la mise en ligne ne
   s'appliquait pas et les cinq pastilles s'empilaient sur cinq rangees. Deux
   classes portent la regle a (0,2,0), qui l'emporte. */
.pied .reseaux-liens {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 10px;
}

.reseau {
  display: grid; place-items: center;
  width: 48px; height: 48px; border-radius: 14px;
  background: rgba(255, 255, 255, .10);
  border: 1px solid rgba(255, 255, 255, .16);
  color: #fff;
  transition: background-color .18s ease, border-color .18s ease,
    transform 120ms var(--sortie);
}
.reseau svg { width: 21px; height: 21px; }
.reseau:active { transform: scale(.94); }

@media (hover: hover) and (pointer: fine) {
  /* Pas de soulignement : la cible est une pastille, pas un mot. */
  .reseau:hover {
    text-decoration: none;
    background: var(--marque);
    border-color: var(--marque);
    transform: translateY(-2px);
  }
}
/* Au clavier aussi : sans cela, la marque ne se revelerait qu'a la souris. */
.reseau:focus-visible { background: var(--marque); border-color: var(--marque); }

/* Sur les ecrans les plus etroits, cinq pastilles de 48 px et leurs ecarts
   reclament 280 px pour 262 disponibles : la cinquieme passait a la ligne.
   44 px et un ecart de 8 les ramenent sur une seule rangee, sans descendre
   sous la cible tactile minimale.

   Ce bloc vient APRES les regles de `.reseau`, et pas avant : a specificite
   egale, c'est le dernier ecrit qui l'emporte — place plus haut, il etait
   simplement ignore. */
@media (max-width: 400px) {
  .pied .reseaux-liens { gap: 8px; }
  .reseau { width: 44px; height: 44px; border-radius: 13px; }
  .reseau svg { width: 19px; height: 19px; }
}

.pied .bas {
  margin-top: var(--pas-5); padding-top: var(--pas-3);
  border-top: 1px solid rgba(255, 255, 255, .12);
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between;
  font-size: .86rem; color: #93a29b; letter-spacing: .01em;
}

/* =========================================================================
   ETATS : SURVOL ET APPUI

   Le survol est reserve aux pointeurs qui en ont un. Sur Android, :hover se
   declenche au tap et RESTE colle jusqu'au tap suivant : la carte survolee
   demeure soulevee, ce qui se lit comme un defaut d'affichage.

   L'appui, lui, est le SEUL retour dont dispose un visiteur sur telephone.
   Volontairement court (120 ms) et discret (3 %) : a cette frequence
   d'usage, un mouvement perceptible donnerait une impression de lenteur.

   Note : les cartes d'activite et les pastilles de rayon ne sont pas
   cliquables. Leur donner un retour a l'appui laisserait croire qu'elles
   menent quelque part — elles gardent donc le seul survol, informatif.
   ========================================================================= */

@media (hover: hover) and (pointer: fine) {
  a:hover { text-decoration: underline; text-underline-offset: 3px; }
  .marque:hover, .bouton:hover { text-decoration: none; }
  .nav a:hover { color: var(--vert-sur-fond); border-bottom-color: var(--vert-sur-fond); }
  .bouton:hover { transform: translateY(-2px); }
  .bouton-ligne:hover { border-color: var(--vert-texte); }
  .carte:hover {
    transform: translateY(-4px);
    box-shadow: var(--ombre); border-color: var(--bord-fort);
  }
  .rayon:hover { border-color: var(--vert-texte); transform: translateY(-2px); }
  /* La ligne WhatsApp est un bloc, pas un mot : le souligner d'un bord a
     l'autre se lirait comme un defaut. Elle repond par son fond et son bord. */
  .wa-lien:hover { text-decoration: none; border-color: var(--vert-texte); background: #eaf6ef; }
}

.bouton:active, .burger:active, .saut:active { transform: scale(.97); }
.nav a:active, .pied a:active, .coord a:active, .marque:active { opacity: .62; }

/* =========================================================================
   APPARITION AU DEFILEMENT
   ========================================================================= */

/* Chaque element entre pour son propre compte, avec le retard de son rang :
   une grille de six cartes qui surgit d'un bloc se lit comme un sursaut,
   la meme grille en cascade se lit comme une arrivee. Le retard est plafonne
   a huit crans — sans cela, le 19e rayon attendrait 855 ms, ce qui n'est plus
   une cascade mais une file d'attente. */
.apparait {
  opacity: 0; transform: translateY(12px);
  transition: opacity .38s var(--sortie), transform .38s var(--sortie);
  transition-delay: calc(min(var(--i, 0), 8) * 45ms);
}
.apparait.vu { opacity: 1; transform: none; }

/* -------------------------------------------------------------------------
   CARTE DE LIVRAISON

   La seule animation du site qui EXPLIQUE quelque chose : les liaisons se
   tracent depuis le depot, dans l'ordre, puis les quartiers se posent. Le
   visiteur voit d'ou part la marchandise avant de lire la liste des zones.

   Tout est conditionne a la classe `.anime`, que le script ne pose que s'il
   peut declencher la revelation et si le visiteur n'a pas demande moins de
   mouvement. Sans elle, la carte s'affiche complete : jamais d'ecran vide.
   ------------------------------------------------------------------------- */

.plan { font-family: inherit; }
.plan .liaison { stroke-dasharray: 1; }
.plan.anime .liaison { stroke-dashoffset: 1; }
.plan.anime .quartier { opacity: 0; }
.plan.anime.vu .liaison {
  animation: tracer 1.1s var(--sortie) forwards;
  animation-delay: calc(var(--i) * 90ms);
}
.plan.anime.vu .quartier {
  animation: poser 200ms var(--sortie) forwards;
  /* Le quartier se pose quand son trait l'a rejoint, pas avant. */
  animation-delay: calc(var(--i) * 90ms + 720ms);
  transform-box: fill-box;
  transform-origin: center;
}

@keyframes tracer { to { stroke-dashoffset: 0; } }
@keyframes poser {
  from { opacity: 0; transform: scale(.85); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .apparait { opacity: 1; transform: none; transition: none; transition-delay: 0s; }
  .carte:hover, .rayon:hover, .bouton:hover { transform: none; }
  /* La carte reste lisible et complete : ni trace, ni pose. */
  .plan .liaison { stroke-dashoffset: 0; animation: none; }
  .plan .quartier { opacity: 1; animation: none; }
  /* Le decor ambiant disparait entierement : il n'apporte aucune information. */
  .poussiere { display: none; }
  /* La photo s'immobilise a sa taille reelle : `scale: 1` est indispensable,
     sans lui elle resterait agrandie a la valeur ou l'animation s'est arretee. */
  .scene .photo { animation: none; scale: 1; translate: none; }
  /* Le retour a l'appui reste indispensable : on le rend par l'opacite,
     qui ne deplace rien, plutot que de le supprimer. */
  .bouton:active, .burger:active, .saut:active { transform: none; opacity: .85; }
  .nav { transition: opacity 120ms linear, visibility 120ms; transform: none; }
  .nav.ouvert { transform: none; }
}

/* =========================================================================
   ADAPTATIF
   ========================================================================= */

@media (max-width: 1000px) {
  .hero .wrap { grid-template-columns: 1fr; }
  .cartes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rayons { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .livraison, .contact { grid-template-columns: 1fr; }
  .reperes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pied .haut { grid-template-columns: 1fr 1fr; }
}

/* En-tete compact : des 900 px, les cinq liens et le bouton ne tiennent plus
   sur une ligne. Le numero passe alors en texte pour lecteur d'ecran — masque
   a l'oeil, mais toujours annonce : sans lui, le bouton n'aurait plus de nom. */
@media (max-width: 900px) {
  /* Ferme, le panneau reste dans le document mais devient invisible :
     `visibility: hidden` le retire de l'ordre de tabulation ET de l'arbre
     d'accessibilite, exactement comme le faisait `display: none`, mais lui
     laisse la possibilite de se transitionner. Le panneau descend de 8 px a
     l'ouverture et remonte par le meme chemin a la fermeture : entrer et
     sortir par des trajets differents desoriente. */
  .nav {
    display: flex; position: absolute; top: 72px; left: 0; right: 0;
    background: var(--fond-doux); border-bottom: 1px solid var(--bord-fond);
    flex-direction: column; gap: 0; padding: 8px clamp(20px, 4vw, 32px) 18px;
    box-shadow: var(--ombre);
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity 200ms var(--tiroir), transform 200ms var(--tiroir),
      visibility 200ms;
  }
  .nav.ouvert { opacity: 1; visibility: visible; transform: none; }
  .nav a { padding: 14px 0; border-bottom: 1px solid var(--bord-fond); }
  .burger { display: block; order: 3; margin-left: 6px; }
  .entete .bouton { order: 2; margin-left: auto; padding: 13px; border-radius: 50%; }
  .entete .bouton .num {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0, 0, 0, 0); white-space: nowrap;
  }
  .marque img { height: 44px; }
  .entete .wrap { height: 72px; }
  html { scroll-padding-top: 88px; }
}

@media (max-width: 720px) {
  /* Photo immobile : une boucle de 34 s qui tourne en permanence derriere le
     texte n'apporte rien a qui lit sur un telephone, et elle coute le meme
     travail a un appareil souvent modeste. `scale: 1` est indispensable —
     sans lui, la photo resterait agrandie a la valeur ou l'animation s'est
     arretee. */
  .scene .photo { animation: none; scale: 1; translate: none; }

  .cartes, .etapes { grid-template-columns: 1fr; }
  .rayons { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .reperes { margin-top: calc(var(--pas-4) * -1); }
  .pied .haut { grid-template-columns: 1fr; }
  .titre { text-align: left; }
  .titre .sur { justify-content: flex-start; }
  .titre p { margin-left: 0; }
}