/* =====================================================================
   MONGOMBO SALES — Feuille de style
   Direction : « Lagune & Or ». Le montant gagné est toujours le héros.
   ===================================================================== */

:root{
  /* --- Palette de marque, reprise du visuel « Appel à candidatures » --- */
  --jaune:#FACF00;          /* bandeau, boutons d'action */
  --jaune-fonce:#E0B900;
  --jaune-voile:#FFF6CC;
  --rouge:#E42313;          /* chiffres, dates, urgence */
  --rouge-vif:#ED4202;
  --rouge-voile:#FDE7E3;
  --violet:#682F84;         /* pastille web, liens, accents */
  --violet-fonce:#4E2264;
  --violet-voile:#F2EAF6;
  --encre:#141210;          /* noir des titres */
  --encre-doux:#3A3330;
  --creme:#F7F0EA;          /* fond de page */
  --peche:#F7D8C2;          /* haut du dégradé */
  --craie:#FFFFFF;
  --gris:#6E6560;
  --gris-clair:#A39A94;
  --trait:#E7DED6;

  /* --- Alias historiques : les anciennes pages continuent de fonctionner --- */
  --lagune:var(--violet);
  --lagune-fonce:var(--violet-fonce);
  --lagune-voile:var(--violet-voile);
  --or:var(--jaune);
  --or-voile:var(--jaune-voile);
  --brique:var(--rouge);
  --brique-voile:var(--rouge-voile);
  --papier:var(--creme);

  --rayon:18px;
  --rayon-s:12px;
  --rayon-pilule:999px;
  --ombre:0 1px 2px rgba(20,18,16,.05), 0 10px 30px rgba(20,18,16,.07);
  --ombre-forte:0 16px 46px rgba(20,18,16,.16);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--papier);
  color:var(--encre);
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  font-size:15px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{
  font-family:'Archivo','Inter',sans-serif;
  font-weight:800;
  line-height:1.15;
  letter-spacing:-.02em;
  margin:0 0 .5rem;
}
h1{font-size:clamp(1.7rem,4vw,2.5rem)}
h2{font-size:clamp(1.3rem,2.6vw,1.7rem)}
h3{font-size:1.08rem}
p{margin:0 0 1rem}
a{color:var(--lagune-fonce);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;display:block}
hr{border:0;border-top:1px solid var(--trait);margin:1.75rem 0}
:focus-visible{outline:3px solid var(--or);outline-offset:2px;border-radius:4px}

.conteneur{width:100%;max-width:1180px;margin:0 auto;padding:0 18px}
.conteneur-etroit{max-width:520px}
.pile>*+*{margin-top:1rem}
.centre{text-align:center}
.muet{color:var(--gris)}
.petit{font-size:.82rem}
.gras{font-weight:600}
.chiffres{font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.masquer{display:none !important}

/* --- Barre supérieure ---------------------------------------------- */
.entete{
  position:sticky;top:0;z-index:50;
  background:rgba(250,249,246,.92);
  backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid var(--trait);
}
.entete-int{display:flex;align-items:center;gap:14px;height:64px}
.logo{display:flex;align-items:center;gap:9px;font-family:'Archivo',sans-serif;
  font-weight:800;font-size:1.15rem;color:var(--encre);letter-spacing:-.03em}
.logo:hover{text-decoration:none}
.logo-marque{
  width:30px;height:30px;border-radius:9px;flex:0 0 30px;
  background:var(--lagune);color:#fff;display:grid;place-items:center;
  font-size:.9rem;font-weight:800;
}
.logo span.suffixe{color:var(--lagune);font-weight:600}
.entete nav{margin-left:auto;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.lien-nav{padding:8px 12px;border-radius:var(--rayon-s);color:var(--encre-doux);font-weight:500;font-size:.92rem}
.lien-nav:hover{background:var(--lagune-voile);text-decoration:none}
.cloche{position:relative;padding:8px 12px}
.cloche .pastille-nb{
  position:absolute;top:2px;right:4px;background:var(--brique);color:#fff;
  border-radius:20px;font-size:.65rem;padding:1px 5px;font-weight:700
}

/* --- Boutons -------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 20px;border-radius:var(--rayon-s);border:1px solid transparent;
  font:inherit;font-weight:600;font-size:.93rem;cursor:pointer;
  background:var(--lagune);color:#fff;transition:.15s ease;
}
.btn:hover{background:var(--lagune-fonce);text-decoration:none;color:#fff}
.btn-secondaire{background:var(--craie);color:var(--encre);border-color:var(--trait)}
.btn-secondaire:hover{background:var(--lagune-voile);color:var(--encre)}
.btn-or{background:var(--or);color:var(--encre)}
.btn-or:hover{background:#d3930e;color:var(--encre)}
.btn-danger{background:var(--brique)}
.btn-danger:hover{background:#8f2d21}
.btn-bloc{width:100%}
.btn-petit{padding:7px 13px;font-size:.83rem}
.btn:disabled{opacity:.5;cursor:not-allowed}

/* --- Cartes --------------------------------------------------------- */
.carte{
  background:var(--craie);border:1px solid var(--trait);
  border-radius:var(--rayon);padding:22px;box-shadow:var(--ombre);
}
.carte-plate{box-shadow:none}
.grille{display:grid;gap:16px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.entre{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}

/* --- Signature : la carte mission ----------------------------------- */
.mission{
  background:var(--craie);border:1px solid var(--trait);border-radius:var(--rayon);
  overflow:hidden;display:flex;flex-direction:column;transition:.18s ease;
  box-shadow:var(--ombre);
}
.mission:hover{transform:translateY(-3px);box-shadow:var(--ombre-forte);border-color:#cfd9d4}
.mission-visuel{height:132px;background:var(--lagune-voile);position:relative;overflow:hidden}
.mission-visuel img{width:100%;height:100%;object-fit:cover}
.mission-visuel .vide{
  height:100%;display:grid;place-items:center;
  font-family:'Archivo',sans-serif;font-size:2rem;color:var(--lagune);opacity:.35
}
.mission-etiquette{
  position:absolute;top:10px;left:10px;background:rgba(16,35,31,.82);color:#fff;
  font-size:.7rem;font-weight:600;padding:4px 9px;border-radius:20px;letter-spacing:.02em;
  text-transform:uppercase
}
.mission-corps{padding:16px 18px 18px;display:flex;flex-direction:column;flex:1}
.mission-entreprise{font-size:.78rem;color:var(--gris);text-transform:uppercase;letter-spacing:.06em;font-weight:600}
.mission-titre{font-family:'Archivo',sans-serif;font-weight:700;font-size:1.05rem;
  margin:4px 0 12px;line-height:1.25;color:var(--encre)}
.gain{
  border-top:1px dashed var(--trait);border-bottom:1px dashed var(--trait);
  padding:12px 0;margin-bottom:12px
}
.gain .etiquette{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--gris);font-weight:600}
.gain .montant{
  font-family:'Archivo',sans-serif;font-weight:800;
  font-size:1.75rem;line-height:1.1;color:var(--lagune);font-variant-numeric:tabular-nums;
  letter-spacing:-.03em
}
.gain .montant small{font-size:.85rem;font-weight:600;color:var(--gris);letter-spacing:0}
.mission-meta{display:flex;gap:14px;flex-wrap:wrap;font-size:.8rem;color:var(--gris);margin-top:auto}
.mission-meta b{color:var(--encre-doux);font-weight:600}

/* --- Jauge d'objectif ----------------------------------------------- */
.jauge{height:6px;background:var(--trait);border-radius:6px;overflow:hidden;margin:10px 0 6px}
.jauge span{display:block;height:100%;background:var(--or);border-radius:6px}

/* --- Statistiques --------------------------------------------------- */
.stat{background:var(--craie);border:1px solid var(--trait);border-radius:var(--rayon);padding:18px}
.stat .etiquette{font-size:.74rem;text-transform:uppercase;letter-spacing:.07em;color:var(--gris);font-weight:600}
.stat .valeur{font-family:'Archivo',sans-serif;font-weight:800;font-size:1.6rem;
  letter-spacing:-.03em;font-variant-numeric:tabular-nums;margin-top:4px}
.stat.accent{background:var(--encre);border-color:var(--encre);color:#fff}
.stat.accent .etiquette{color:#9DBBB2}
.stat.accent .valeur{color:var(--or)}

/* --- Pastilles ------------------------------------------------------ */
.pastille{
  display:inline-block;padding:3px 10px;border-radius:20px;
  font-size:.75rem;font-weight:600;line-height:1.5;white-space:nowrap
}
.pastille-vert{background:var(--lagune-voile);color:var(--lagune-fonce)}
.pastille-attente{background:var(--or-voile);color:#8a6206}
.pastille-rouge{background:var(--brique-voile);color:var(--brique)}
.pastille-neutre{background:#EEF1EF;color:var(--gris)}

.niveau{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:.8rem;
  padding:4px 11px;border-radius:20px}
.niveau.bronze{background:#F5EAE0;color:#8A5A2B}
.niveau.argent{background:#EDF0F2;color:#5A6873}
.niveau.or{background:var(--or-voile);color:#8a6206}
.niveau.diamant{background:#E7F0FB;color:#1E5AA8}

/* --- Formulaires ---------------------------------------------------- */
.champ{margin-bottom:16px}
.champ label{display:block;font-weight:600;font-size:.87rem;margin-bottom:6px;color:var(--encre-doux)}
.champ .aide{font-size:.79rem;color:var(--gris);margin-top:5px}
input[type=text],input[type=email],input[type=password],input[type=tel],input[type=number],
input[type=date],input[type=url],input[type=file],select,textarea{
  width:100%;padding:11px 13px;border:1px solid var(--trait);border-radius:var(--rayon-s);
  font:inherit;font-size:.94rem;background:var(--craie);color:var(--encre)
}
textarea{min-height:110px;resize:vertical}
input:focus,select:focus,textarea:focus{border-color:var(--lagune);outline:none;
  box-shadow:0 0 0 3px rgba(14,110,92,.13)}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:14px}

/* --- Alertes -------------------------------------------------------- */
.alerte{padding:13px 16px;border-radius:var(--rayon-s);margin-bottom:16px;
  font-size:.9rem;border:1px solid transparent}
.alerte-succes{background:var(--lagune-voile);color:var(--lagune-fonce);border-color:#bfdcd4}
.alerte-erreur{background:var(--brique-voile);color:var(--brique);border-color:#f0cdc7}
.alerte-info{background:var(--or-voile);color:#8a6206;border-color:#f0dfb5}

/* --- Tableaux ------------------------------------------------------- */
.tableau-cadre{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--trait);
  border-radius:var(--rayon);background:var(--craie)}
table{width:100%;border-collapse:collapse;font-size:.89rem;min-width:620px}
thead th{background:#F3F5F4;text-align:left;padding:11px 14px;font-weight:600;font-size:.78rem;
  text-transform:uppercase;letter-spacing:.05em;color:var(--gris);white-space:nowrap}
tbody td{padding:13px 14px;border-top:1px solid var(--trait);vertical-align:middle}
tbody tr:hover{background:#FBFCFB}
td .ref{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.83rem;color:var(--gris)}

/* --- Mise en page espace connecté ----------------------------------- */
.espace{display:grid;grid-template-columns:230px 1fr;gap:26px;padding:26px 0 60px;align-items:start}
.menu{position:sticky;top:88px;background:var(--craie);border:1px solid var(--trait);
  border-radius:var(--rayon);padding:10px}
.menu a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--rayon-s);
  color:var(--encre-doux);font-size:.9rem;font-weight:500}
.menu a:hover{background:var(--lagune-voile);text-decoration:none}
.menu a.actif{background:var(--encre);color:#fff;font-weight:600}
.menu .groupe{font-size:.7rem;text-transform:uppercase;letter-spacing:.09em;color:var(--gris-clair);
  padding:12px 12px 6px;font-weight:700}
.titre-page{margin-bottom:20px}
.titre-page .surtitre{font-size:.76rem;text-transform:uppercase;letter-spacing:.1em;
  color:var(--lagune);font-weight:700;margin-bottom:4px}

/* --- Accueil -------------------------------------------------------- */
.heros{background:var(--encre);color:#fff;padding:64px 0 72px;position:relative;overflow:hidden}
.heros:after{content:'';position:absolute;right:-90px;top:-90px;width:340px;height:340px;
  border-radius:50%;background:radial-gradient(circle,rgba(232,163,23,.28),transparent 68%)}
.heros h1{color:#fff;max-width:16ch}
.heros h1 em{font-style:normal;color:var(--or)}
.heros p{color:#B9CCC6;max-width:52ch;font-size:1.03rem}
.heros .actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.compteurs{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:44px;
  border-top:1px solid rgba(255,255,255,.14);padding-top:26px;max-width:640px}
.compteurs .valeur{font-family:'Archivo',sans-serif;font-size:1.9rem;font-weight:800;
  color:var(--or);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.compteurs .etiquette{font-size:.79rem;color:#9DBBB2}
.section{padding:56px 0}
.etapes{counter-reset:etape}
.etape{position:relative;padding-left:56px;margin-bottom:26px}
.etape:before{
  counter-increment:etape;content:counter(etape);
  position:absolute;left:0;top:0;width:38px;height:38px;border-radius:11px;
  background:var(--lagune-voile);color:var(--lagune-fonce);display:grid;place-items:center;
  font-family:'Archivo',sans-serif;font-weight:800
}

/* --- Filtres -------------------------------------------------------- */
.filtres{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;background:var(--craie);
  border:1px solid var(--trait);border-radius:var(--rayon);padding:14px;margin-bottom:22px}
.filtres .champ{margin:0;flex:1 1 170px}

/* --- Pied de page --------------------------------------------------- */
.pied{background:var(--encre);color:#9DBBB2;padding:36px 0;margin-top:auto;font-size:.88rem}
.pied a{color:#fff}
.pied .entre{align-items:flex-start}

/* --- Vide ----------------------------------------------------------- */
.vide-etat{text-align:center;padding:48px 20px;background:var(--craie);
  border:1px dashed var(--trait);border-radius:var(--rayon)}
.vide-etat h3{margin-bottom:6px}

/* --- Code de validation --------------------------------------------- */
.code-vente{
  font-family:'Archivo',sans-serif;font-size:1.5rem;font-weight:800;
  letter-spacing:.28em;background:var(--or-voile);color:#8a6206;
  padding:10px 16px;border-radius:var(--rayon-s);display:inline-block
}

/* --- Responsive ------------------------------------------------------ */
@media (max-width:960px){
  .espace{grid-template-columns:1fr;gap:16px;padding-top:18px}
  .menu{position:static;display:flex;gap:6px;overflow-x:auto;padding:8px}
  .menu a{white-space:nowrap;padding:9px 13px}
  .menu .groupe{display:none}
  .g4{grid-template-columns:repeat(2,1fr)}
  .g3{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .entete-int{height:58px}
  .entete nav .lien-nav.optionnel{display:none}
  .g2,.g3,.g4{grid-template-columns:1fr}
  .duo{grid-template-columns:1fr}
  .compteurs{grid-template-columns:1fr;gap:14px}
  .heros{padding:44px 0 50px}
  .section{padding:38px 0}
  .carte{padding:18px}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important}
  .mission:hover{transform:none}
}

/* =====================================================================
   PRODUITS — la photo d'abord
   ===================================================================== */

/* Vignette de carte : format 4/3 constant, quelle que soit la photo */
.visuel{
  position:relative;width:100%;aspect-ratio:4/3;overflow:hidden;
  background:linear-gradient(135deg,#EEF3F1,#E2EBE7);
}
.visuel img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .45s cubic-bezier(.2,.6,.2,1);
}
.mission:hover .visuel img{transform:scale(1.05)}
.visuel-vide{
  position:absolute;inset:0;display:grid;place-items:center;gap:6px;
  background:
    radial-gradient(circle at 30% 25%, rgba(14,110,92,.10), transparent 60%),
    linear-gradient(135deg,#EDF3F1,#DFE9E5);
}
.visuel-vide .initiales{
  font-family:'Archivo',sans-serif;font-size:2.4rem;font-weight:800;
  color:var(--lagune);opacity:.28;letter-spacing:-.04em;line-height:1
}
.visuel-vide .mention{
  font-size:.68rem;text-transform:uppercase;letter-spacing:.12em;
  color:var(--gris-clair);font-weight:700
}

/* Bandeaux posés sur la photo */
.badge-remise{
  position:absolute;top:10px;right:10px;background:var(--or);color:var(--encre);
  font-family:'Archivo',sans-serif;font-weight:800;font-size:.95rem;
  padding:7px 11px;border-radius:11px;line-height:1;
  box-shadow:0 4px 14px rgba(16,35,31,.22)
}
.badge-stock{
  position:absolute;bottom:10px;left:10px;background:rgba(16,35,31,.82);color:#fff;
  font-size:.7rem;font-weight:600;padding:4px 9px;border-radius:20px
}
.badge-epuise{
  position:absolute;inset:0;display:grid;place-items:center;
  background:rgba(16,35,31,.55);color:#fff;
  font-family:'Archivo',sans-serif;font-weight:800;font-size:1.1rem;
  text-transform:uppercase;letter-spacing:.08em
}

/* Fiche produit : grande photo cliquable */
.photo-fiche{
  position:relative;width:100%;aspect-ratio:4/3;max-height:440px;overflow:hidden;
  border-radius:var(--rayon);background:linear-gradient(135deg,#EEF3F1,#E2EBE7);
  margin-bottom:18px;cursor:zoom-in
}
.photo-fiche img{width:100%;height:100%;object-fit:cover;display:block}
.photo-fiche .loupe{
  position:absolute;bottom:12px;right:12px;background:rgba(255,255,255,.94);
  color:var(--encre);font-size:.75rem;font-weight:600;padding:6px 11px;border-radius:20px;
  box-shadow:var(--ombre)
}

/* Vue plein écran */
.zoom-fond{
  position:fixed;inset:0;z-index:200;background:rgba(16,35,31,.92);
  display:none;place-items:center;padding:24px;cursor:zoom-out
}
.zoom-fond.ouvert{display:grid}
.zoom-fond img{max-width:100%;max-height:88vh;object-fit:contain;border-radius:var(--rayon)}
.zoom-fond .fermer{
  position:absolute;top:16px;right:20px;color:#fff;font-size:1.6rem;
  background:none;border:0;cursor:pointer;line-height:1
}

/* Miniature en ligne (listes, tableaux) */
.vignette{
  width:76px;height:76px;flex:0 0 76px;border-radius:12px;object-fit:cover;
  background:linear-gradient(135deg,#EEF3F1,#E2EBE7)
}
.vignette-vide{
  display:grid;place-items:center;font-family:'Archivo',sans-serif;
  font-weight:800;color:var(--lagune);opacity:.35
}

/* Prix barré + prix promo */
.prix-barre{text-decoration:line-through;color:var(--gris-clair)}

/* =====================================================================
   PARTAGE
   ===================================================================== */
.partage{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.btn-partage{
  display:inline-flex;align-items:center;gap:7px;padding:9px 14px;border-radius:var(--rayon-s);
  font:inherit;font-size:.86rem;font-weight:600;cursor:pointer;border:1px solid var(--trait);
  background:var(--craie);color:var(--encre);transition:.15s ease
}
.btn-partage:hover{text-decoration:none;transform:translateY(-1px);box-shadow:var(--ombre)}
.btn-partage svg{width:16px;height:16px;flex:0 0 16px}
.btn-partage.whatsapp{background:#25D366;border-color:#25D366;color:#fff}
.btn-partage.whatsapp:hover{background:#1EB855;color:#fff}
.btn-partage.facebook{background:#1877F2;border-color:#1877F2;color:#fff}
.btn-partage.facebook:hover{background:#1361cc;color:#fff}
.btn-partage.natif{background:var(--encre);border-color:var(--encre);color:#fff}
.btn-partage.natif:hover{background:#1c3a33;color:#fff}
.bloc-partage{
  border:1px dashed var(--trait);border-radius:var(--rayon);padding:16px;
  background:#FCFDFC
}
.bloc-partage h3{margin-bottom:4px}
.apercu-message{
  font-size:.82rem;color:var(--gris);background:var(--craie);border:1px solid var(--trait);
  border-radius:var(--rayon-s);padding:10px 12px;margin:10px 0;white-space:pre-line;
  max-height:170px;overflow:auto
}
.copie-ok{font-size:.82rem;color:var(--lagune);font-weight:600}

@media (max-width:640px){
  .visuel{aspect-ratio:1/1}
  .photo-fiche{aspect-ratio:1/1}
  .btn-partage{flex:1 1 auto;justify-content:center}
}

/* Aperçu du visuel promo généré pour le partage */
.partage-bloc .apercu-visuel{
  width:100%;max-width:260px;border-radius:var(--rayon);border:1px solid var(--trait);
  box-shadow:var(--ombre);margin:0 0 14px;display:block
}
.partage-bloc{margin:0}

/* =====================================================================
   PATCH 07 — IDENTITÉ « AFFICHE »
   Reprise du visuel appel à candidatures : bandeau jaune incliné,
   gros titres noirs capitales, chiffres rouges, pilules, pastille violette.
   ===================================================================== */

body{background:var(--creme)}

/* Dégradé pêche → crème, comme le fond du visuel */
.fond-affiche{
  background:
    radial-gradient(120% 90% at 8% -10%, rgba(247,216,194,.95), rgba(247,240,234,0) 62%),
    linear-gradient(180deg,#FBE7DA 0%, var(--creme) 55%);
}

/* --- Barre supérieure ------------------------------------------------ */
.entete{background:rgba(247,240,234,.94);border-bottom:1px solid var(--trait)}
.logo-marque{background:var(--rouge);border-radius:11px}
.logo span.suffixe{color:var(--violet)}
.lien-nav:hover{background:var(--violet-voile)}

/* --- Boutons --------------------------------------------------------- */
.btn{background:var(--encre);color:#fff;font-weight:700;border-radius:var(--rayon-pilule);padding:12px 24px}
.btn:hover{background:#000;color:#fff}
.btn-or{background:var(--jaune);color:var(--encre)}
.btn-or:hover{background:var(--jaune-fonce);color:var(--encre)}
.btn-rouge{background:var(--rouge);color:#fff}
.btn-rouge:hover{background:#c31c0f;color:#fff}
.btn-violet{background:var(--violet);color:#fff}
.btn-violet:hover{background:var(--violet-fonce);color:#fff}
.btn-secondaire{background:var(--craie);color:var(--encre);border-color:var(--trait)}
.btn-secondaire:hover{background:var(--jaune-voile);color:var(--encre)}
.btn-danger{background:var(--rouge)}

/* --- Bandeau incliné ------------------------------------------------- */
.ruban{
  background:var(--jaune);color:var(--encre);
  transform:rotate(-1.2deg);
  padding:14px 30px;margin:0 -10px 26px;
  box-shadow:0 10px 26px rgba(250,207,0,.32);
}
.ruban h1,.ruban h2,.ruban .texte{
  font-family:'Archivo',sans-serif;font-weight:900;text-transform:uppercase;
  letter-spacing:-.01em;line-height:1.05;margin:0;text-align:center;
  font-size:clamp(1.5rem,5.2vw,3rem);
}
.ruban-int{transform:rotate(1.2deg)}
.ruban.rouge{background:var(--rouge);color:#fff;box-shadow:0 10px 26px rgba(228,35,19,.28)}
.ruban.violet{background:var(--violet);color:#fff;box-shadow:0 10px 26px rgba(104,47,132,.26)}

/* --- Bloc chiffre + intitulé ----------------------------------------- */
.bloc-chiffre{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.bloc-chiffre .nombre{
  font-family:'Archivo',sans-serif;font-weight:900;color:var(--rouge);
  font-size:clamp(3.2rem,11vw,6rem);line-height:.85;letter-spacing:-.05em
}
.bloc-chiffre .intitule{
  font-family:'Archivo',sans-serif;font-weight:900;text-transform:uppercase;
  font-size:clamp(1.2rem,3.4vw,2rem);line-height:1.02;letter-spacing:-.02em;color:var(--encre)
}
.bloc-chiffre .precision{font-size:.9rem;color:var(--gris);font-weight:500;text-transform:none;margin-top:8px;max-width:40ch}

/* --- Pilules d'étiquettes -------------------------------------------- */
.pilules{display:flex;gap:12px;flex-wrap:wrap;margin:22px 0}
.pilule{
  font-family:'Archivo',sans-serif;font-weight:800;text-transform:uppercase;
  font-size:clamp(.85rem,2.2vw,1.05rem);letter-spacing:.01em;
  padding:13px 30px;border-radius:var(--rayon-pilule);background:var(--craie);color:var(--encre);
  box-shadow:0 4px 14px rgba(20,18,16,.08);white-space:nowrap
}
.pilule.jaune{background:var(--jaune)}
.pilule.rouge{background:var(--rouge);color:#fff}
.pilule.violet{background:var(--violet);color:#fff}
.pilule.encre{background:var(--encre);color:#fff}

/* --- Carte « dates » -------------------------------------------------- */
.carte-date{
  background:var(--craie);border-radius:22px;padding:22px 28px;
  box-shadow:0 10px 30px rgba(20,18,16,.09);display:inline-block;max-width:100%
}
.carte-date .mention{
  font-size:.72rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--violet);margin-bottom:8px
}
.carte-date .ligne{
  font-family:'Archivo',sans-serif;font-weight:900;text-transform:uppercase;
  font-size:clamp(1.1rem,3.2vw,1.75rem);line-height:1.12;letter-spacing:-.02em
}
.carte-date .ligne.rouge{color:var(--rouge)}

/* --- Pastille adresse ------------------------------------------------- */
.pastille-web{
  display:inline-block;background:var(--violet);color:#fff;border-radius:var(--rayon-pilule);
  padding:13px 34px;font-weight:700;font-size:.95rem;letter-spacing:.16em;text-transform:lowercase
}
.pastille-web:hover{background:var(--violet-fonce);color:#fff;text-decoration:none}

/* =====================================================================
   SLIDER D'ACCUEIL
   ===================================================================== */
.revo{position:relative;overflow:hidden}
.revo-piste{display:flex;transition:transform .55s cubic-bezier(.22,.7,.24,1);will-change:transform}
.revo-vue{min-width:100%;flex:0 0 100%}
.revo-slide{padding:52px 0 60px;position:relative}
.revo-slide .conteneur{position:relative;z-index:2}
.revo-slide.creme{
  background:
    radial-gradient(120% 90% at 8% -10%, rgba(247,216,194,.95), rgba(247,240,234,0) 62%),
    linear-gradient(180deg,#FBE7DA 0%, var(--creme) 58%);
}
.revo-slide.jaune{background:linear-gradient(180deg,#FFE066,#FACF00)}
.revo-slide.rouge{background:linear-gradient(180deg,#F2532F,var(--rouge));color:#fff}
.revo-slide.violet{background:linear-gradient(180deg,#8A47AC,var(--violet));color:#fff}
.revo-slide.encre{background:var(--encre);color:#fff}
.revo-slide.rouge .bloc-chiffre .intitule,
.revo-slide.violet .bloc-chiffre .intitule,
.revo-slide.encre .bloc-chiffre .intitule{color:#fff}
.revo-slide.rouge .bloc-chiffre .nombre,
.revo-slide.violet .bloc-chiffre .nombre,
.revo-slide.encre .bloc-chiffre .nombre{color:var(--jaune)}
.revo-slide.rouge .precision,.revo-slide.violet .precision,.revo-slide.encre .precision{color:rgba(255,255,255,.86)}
.revo-slide.rouge .ruban,.revo-slide.violet .ruban{background:var(--jaune);color:var(--encre)}
.revo-slide.rouge .btn,.revo-slide.violet .btn,.revo-slide.encre .btn{background:var(--jaune);color:var(--encre)}
.revo-slide.rouge .btn:hover,.revo-slide.violet .btn:hover,.revo-slide.encre .btn:hover{background:#fff}

.revo-grille{display:grid;grid-template-columns:1.15fr .85fr;gap:34px;align-items:center}
.revo-visuel{border-radius:24px;overflow:hidden;box-shadow:var(--ombre-forte);background:rgba(255,255,255,.4)}
.revo-visuel img{width:100%;height:100%;max-height:400px;object-fit:cover}
.revo-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}

.revo-fleche{
  position:absolute;top:50%;transform:translateY(-50%);z-index:5;
  width:46px;height:46px;border-radius:50%;border:0;cursor:pointer;
  background:rgba(255,255,255,.92);color:var(--encre);box-shadow:var(--ombre);
  font-size:1.3rem;line-height:1;display:grid;place-items:center
}
.revo-fleche:hover{background:var(--jaune)}
.revo-fleche.prec{left:14px}
.revo-fleche.suiv{right:14px}
.revo-points{
  position:absolute;bottom:16px;left:0;right:0;z-index:5;
  display:flex;gap:9px;justify-content:center
}
.revo-points button{
  width:10px;height:10px;padding:0;border:0;border-radius:50%;cursor:pointer;
  background:rgba(20,18,16,.22);transition:.2s
}
.revo-points button.actif{background:var(--rouge);width:30px;border-radius:20px}
.revo-slide.rouge~.revo-points button,.revo-slide.violet~.revo-points button{background:rgba(255,255,255,.4)}
.revo[data-solo="1"] .revo-fleche,.revo[data-solo="1"] .revo-points{display:none}

/* =====================================================================
   BANNIÈRES PUBLICITAIRES
   ===================================================================== */
.pub{margin:0 0 22px}
.pub-lot{display:grid;gap:14px}
.pub-lien{display:block;border-radius:var(--rayon);overflow:hidden;background:var(--craie);
  border:1px solid var(--trait);box-shadow:var(--ombre);transition:.18s ease}
.pub-lien:hover{transform:translateY(-2px);box-shadow:var(--ombre-forte);text-decoration:none}
.pub-lien img{width:100%;height:auto;display:block}
.pub-lien img.mobile{display:none}
.pub-mention{
  font-size:.66rem;text-transform:uppercase;letter-spacing:.14em;color:var(--gris-clair);
  font-weight:700;margin-bottom:6px
}
@media (max-width:640px){
  .pub-lien img.bureau{display:none}
  .pub-lien img.mobile{display:block}
}

/* =====================================================================
   AJUSTEMENTS PRODUITS / RÉPARTITION
   ===================================================================== */
.badge-remise{
  background:var(--rouge);color:#fff;border-radius:var(--rayon-pilule);
  font-family:'Archivo',sans-serif;font-weight:900;padding:8px 13px;
  box-shadow:0 6px 18px rgba(228,35,19,.32)
}
.badge-stock{background:rgba(20,18,16,.84)}
.mission:hover{border-color:var(--jaune)}
.gain .montant{color:var(--encre)}
.pastille-vert{background:#E4F3E8;color:#1F7A3A}
.pastille-attente{background:var(--jaune-voile);color:#8A6900}
.pastille-rouge{background:var(--rouge-voile);color:var(--rouge)}

/* Tableau de répartition (administration + marchand) */
.repartition{border:1px solid var(--trait);border-radius:var(--rayon);background:var(--craie);overflow:hidden}
.repartition .ligne{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:12px 16px;border-bottom:1px solid var(--trait);font-size:.9rem}
.repartition .ligne:last-child{border-bottom:0}
.repartition .ligne.total{background:var(--jaune-voile);font-weight:700}
.repartition .ligne .part{display:flex;align-items:center;gap:9px}
.repartition .puce{width:11px;height:11px;border-radius:50%;flex:0 0 11px}
.puce.marchand{background:var(--encre)}
.puce.commercial{background:var(--violet)}
.puce.plateforme{background:var(--jaune)}
.puce.remise{background:var(--rouge)}
.barre-parts{display:flex;height:16px;border-radius:var(--rayon-pilule);overflow:hidden;margin:14px 0 6px;background:var(--trait)}
.barre-parts span{display:block;height:100%}
.barre-parts .s-commercial{background:var(--violet)}
.barre-parts .s-plateforme{background:var(--jaune)}
.barre-parts .s-remise{background:var(--rouge)}
.legende-parts{display:flex;gap:16px;flex-wrap:wrap;font-size:.8rem;color:var(--gris)}

/* Curseurs de pourcentage */
input[type=range]{width:100%;accent-color:var(--violet)}
.reglage-pct{display:grid;grid-template-columns:1fr 92px;gap:12px;align-items:center;margin-bottom:14px}
.reglage-pct input[type=number]{text-align:right}
.somme-pct{font-family:'Archivo',sans-serif;font-weight:900;font-size:1.6rem}
.somme-pct.ok{color:#1F7A3A}
.somme-pct.ko{color:var(--rouge)}

/* --- Accueil : sections ---------------------------------------------- */
.heros{background:var(--encre)}
.surtitre-affiche{
  font-family:'Archivo',sans-serif;font-weight:900;text-transform:uppercase;
  letter-spacing:.14em;font-size:.74rem;color:var(--rouge)
}
.titre-page .surtitre{color:var(--violet)}

@media (max-width:900px){
  .revo-grille{grid-template-columns:1fr;gap:24px}
  .revo-visuel img{max-height:260px}
  .revo-slide{padding:36px 0 52px}
  .revo-fleche{width:38px;height:38px}
  .ruban{padding:11px 18px;margin:0 -6px 20px}
}
@media (max-width:640px){
  .pilules{gap:9px;margin:16px 0}
  .pilule{padding:10px 20px}
  .carte-date{padding:18px 20px;display:block}
  .bloc-chiffre{gap:14px}
  .revo-fleche{display:none}
}

/* =====================================================================
   PATCH 08 — SLIDES À IMAGES ET ENCARTS PUBLICITAIRES
   ===================================================================== */

/* --- Slide « image seule » : le visuel occupe toute la largeur -------
   L'image est affichée entière, sans recadrage : c'est le fichier
   téléversé qui décide de la hauteur du slide. ---------------------- */
.revo-slide.plein{padding:0;background:none}
.revo-plein{display:block;width:100%;line-height:0}
.revo-plein picture{display:block;width:100%}
.revo-plein img{width:100%;height:auto;display:block}
.revo-plein:hover{text-decoration:none}

/* Slide sans visuel : le texte prend toute la largeur */
.revo-grille.sans-visuel{grid-template-columns:1fr;max-width:820px}

/* Le visuel latéral peut lui aussi être cliquable */
.revo-visuel{display:block}
.revo-visuel:hover{text-decoration:none}
.revo-visuel picture{display:block;width:100%;height:100%}

/* --- Encarts publicitaires (format carte) ---------------------------- */
.pub-encarts{margin:26px 0}
.encart{
  display:flex;flex-direction:column;background:var(--craie);
  border:1px solid var(--trait);border-radius:var(--rayon);overflow:hidden;
  box-shadow:var(--ombre);transition:.18s ease;color:var(--encre)
}
.encart:hover{transform:translateY(-3px);box-shadow:var(--ombre-forte);
  border-color:var(--jaune);text-decoration:none;color:var(--encre)}
.encart-visuel{display:block;width:100%;aspect-ratio:4/3;overflow:hidden;
  background:linear-gradient(135deg,#F3EBE4,#E9DDD3)}
.encart-visuel img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .45s cubic-bezier(.2,.6,.2,1)}
.encart:hover .encart-visuel img{transform:scale(1.05)}
.encart-corps{display:flex;flex-direction:column;gap:4px;padding:14px 16px 16px}
.encart-titre{
  font-family:'Archivo',sans-serif;font-weight:800;font-size:1rem;
  line-height:1.2;color:var(--encre)
}
.encart-accroche{font-size:.85rem;color:var(--gris);line-height:1.45}
.encart-annonceur{
  font-size:.66rem;text-transform:uppercase;letter-spacing:.14em;
  font-weight:700;color:var(--violet);margin-top:4px
}

@media (max-width:640px){
  .encart-visuel{aspect-ratio:16/9}
}