/* Programme d'affiliation des Stores (préfixe af-) : la page « Rejoignez
   notre programme d'affiliation », l'espace de l'affilié et le lien affilié
   sur la fiche produit. Polices et couleurs de la charte (voox.css). */

.af-sur{margin:0 0 12px;font:600 11.5px/1 var(--voox-font-title,Oxanium),sans-serif;letter-spacing:.24em;text-transform:uppercase;color:var(--voox-brand-ink,#B8286E)}
.af-centre{text-align:center}
.af-titre{margin:0 0 30px;text-align:center;font:600 clamp(26px,3vw,38px)/1.1 var(--voox-font-title,Oxanium),sans-serif;letter-spacing:-.015em;color:var(--voox-title,#0B0F14)}
.af-gauche{text-align:left;margin-bottom:0}
.af-section{padding:64px 0}
.af-gris{background:#F6F7FA}
.af-note{margin:14px 0 0;font-size:13.5px;line-height:1.5;color:var(--voox-text,#46536A)}
.af-ligne{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:26px}

/* ---------- L'en-tête ---------- */
.af-hero{position:relative;overflow:hidden;padding:46px 0 70px;background:linear-gradient(160deg,#FFF5F8 0%,#fff 55%,#F3F0FF 100%)}
.af-hero::after{content:"";position:absolute;right:-180px;top:-120px;width:560px;height:560px;border-radius:50%;background:radial-gradient(circle,rgba(184,40,110,.14),transparent 70%)}
.af-hero-grille{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:50px;align-items:center}
.af-hero .voox-breadcrumb ol{justify-content:flex-start}
.af-hero h1{margin:0;font:700 clamp(34px,4.4vw,56px)/1.05 var(--voox-font-title,Oxanium),sans-serif;letter-spacing:-.02em;color:var(--voox-title,#0B0F14)}
.af-hero h1 span{background:linear-gradient(90deg,#B8286E,#7C5CFF);-webkit-background-clip:text;background-clip:text;color:transparent}
.af-chapeau{margin:18px 0 28px;max-width:52ch;font-size:16.5px;line-height:1.6;color:var(--voox-text,#46536A)}
.af-hero-actions{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.af-hero-actions .voox-btn{padding:15px 30px;font-size:15px}
.af-lien{color:var(--voox-title,#0B0F14);font-weight:600;text-decoration:underline;text-underline-offset:4px}

/* Les produits en mosaïque, comme posés sur une table. */
.af-mosaique{position:relative;height:460px}
.af-mosaique-carte{position:absolute;margin:0;overflow:hidden;border-radius:22px;background:#fff;box-shadow:0 26px 50px rgba(11,15,20,.18);transition:transform .4s ease}
.af-mosaique-carte img{width:100%;height:100%;object-fit:cover}
.af-mosaique-carte figcaption{position:absolute;left:12px;bottom:12px;display:flex;align-items:center;gap:8px;padding:6px 10px;border-radius:999px;
  background:rgba(255,255,255,.92);font-size:12px;font-weight:600;color:var(--voox-title,#0B0F14)}
.af-mosaique-carte figcaption strong{padding:2px 8px;border-radius:999px;background:var(--voox-title,#0B0F14);color:#fff}
.af-m1{left:4%;top:0;width:52%;height:62%;transform:rotate(-4deg)}
.af-m2{right:2%;top:6%;width:40%;height:46%;transform:rotate(5deg)}
.af-m3{left:16%;bottom:0;width:38%;height:40%;transform:rotate(3deg)}
.af-m4{right:8%;bottom:4%;width:40%;height:44%;transform:rotate(-3deg)}
.af-mosaique:hover .af-m1{transform:rotate(-6deg) translate(-6px,-6px)}
.af-mosaique:hover .af-m2{transform:rotate(8deg) translate(6px,-4px)}
.af-mosaique-badge{position:absolute;left:50%;top:50%;z-index:2;padding:12px 18px;border-radius:999px;transform:translate(-50%,-50%) rotate(-6deg);
  background:linear-gradient(135deg,#B8286E,#7C5CFF);color:#fff;font:700 15px/1 var(--voox-font-title,Oxanium),sans-serif;box-shadow:0 14px 30px rgba(124,92,255,.35)}

/* ---------- Les chiffres ---------- */
.af-chiffres-bande{background:var(--voox-title,#0B0F14);color:#fff}
.af-chiffres{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin:0 auto;padding:0 20px;list-style:none}
.af-chiffres li{display:flex;flex-direction:column;gap:6px;padding:26px 22px;border-left:1px solid rgba(255,255,255,.12)}
.af-chiffres li:first-child{border-left:0}
.af-chiffres strong{font:700 28px/1 var(--voox-font-title,Oxanium),sans-serif}
.af-chiffres span{font-size:13.5px;color:rgba(255,255,255,.65)}

/* ---------- Comment ça marche ---------- */
.af-etapes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin:0;padding:0;list-style:none;counter-reset:none}
.af-etapes li{position:relative;padding:30px 26px;border:1px solid #E6E9EF;border-radius:24px;background:#fff}
.af-etape-num{display:grid;place-items:center;width:46px;height:46px;margin-bottom:18px;border-radius:14px;background:var(--voox-title,#0B0F14);color:#fff;font:700 20px/1 var(--voox-font-title,Oxanium),sans-serif}
.af-etapes li:nth-child(2) .af-etape-num{background:#B8286E}
.af-etapes li:nth-child(3) .af-etape-num{background:#7C5CFF}
.af-etapes h3,.af-profil h3{margin:0 0 8px;font:600 20px/1.2 var(--voox-font-title,Oxanium),sans-serif;color:var(--voox-title,#0B0F14)}
.af-etapes p,.af-profil p{margin:0;font-size:14.5px;line-height:1.55;color:var(--voox-text,#46536A)}

/* ---------- Les produits ---------- */
.af-produits{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.af-produit{display:flex;flex-direction:column;gap:5px;color:var(--voox-title,#0B0F14);text-decoration:none}
.af-produit-image{display:block;aspect-ratio:1;margin-bottom:8px;overflow:hidden;border-radius:20px;background:#fff;box-shadow:0 6px 20px rgba(0,0,0,.06)}
.af-produit-image img{width:100%;height:100%;object-fit:cover;transition:transform .45s ease}
.af-produit:hover .af-produit-image img{transform:scale(1.05)}
.af-produit-marque{font-size:11.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#7A8597}
.af-produit-titre{font-weight:600;font-size:15px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.af-produit-prix{font:700 16px/1.2 var(--voox-font-title,Oxanium),sans-serif}

/* ---------- Pour qui ---------- */
.af-profils{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.af-profil{padding:26px 22px;border-radius:24px;background:#F6F7FA}
.af-profil > span{display:grid;place-items:center;width:44px;height:44px;margin-bottom:16px;border-radius:50%;background:#fff;
  font:700 18px/1 var(--voox-font-title,Oxanium),sans-serif;color:#B8286E;box-shadow:0 6px 16px rgba(0,0,0,.06)}

/* ---------- Les marques ---------- */
.af-marques{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:16px}
.af-marque{display:flex;flex-direction:column;align-items:center;gap:6px;padding:20px 14px;border-radius:20px;background:#fff;text-align:center;
  color:var(--voox-title,#0B0F14);text-decoration:none;transition:transform .2s ease,box-shadow .2s ease}
.af-marque:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(11,15,20,.1)}
.af-marque img,.af-marque-lettre{width:64px;height:64px;margin-bottom:6px;border-radius:50%;object-fit:cover;background:#EEF1F6}
.af-marque-lettre{display:grid;place-items:center;font:700 26px/1 var(--voox-font-title,Oxanium),sans-serif}
.af-marque small{font-size:12px;line-height:1.35;color:#7A8597}

/* ---------- La candidature ---------- */
.af-inscription{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:50px;align-items:start}
.af-atouts{margin:24px 0 0;padding:0;list-style:none}
.af-atouts li{position:relative;padding:10px 0 10px 34px;border-bottom:1px solid #EEF1F6;font-size:15.5px}
.af-atouts li::before{content:"✓";position:absolute;left:0;top:9px;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;
  background:#E3F8EE;color:#0B7A4B;font-size:12px;font-weight:700}
.af-carte-form{padding:30px;border:1px solid #E6E9EF;border-radius:26px;background:#fff;box-shadow:0 24px 60px rgba(11,15,20,.08)}
.af-deux{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.af-piege{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.af-merci{text-align:center;padding:20px 0}
.af-merci > span{display:inline-grid;place-items:center;width:58px;height:58px;margin-bottom:14px;border-radius:50%;background:#E3F8EE;color:#0B7A4B;font-size:26px;font-weight:700}
.af-merci h3{margin:0 0 8px;font:600 22px/1.2 var(--voox-font-title,Oxanium),sans-serif}
.af-merci p{margin:0 auto 20px;max-width:40ch;color:var(--voox-text,#46536A);line-height:1.55}

/* ---------- Questions ---------- */
.af-faq{max-width:820px}
.af-faq details{border-bottom:1px solid #E1E5EC;background:transparent}
.af-faq summary{position:relative;padding:20px 40px 20px 0;cursor:pointer;list-style:none;font-weight:600;font-size:16px;color:var(--voox-title,#0B0F14)}
.af-faq summary::-webkit-details-marker{display:none}
.af-faq summary::after{content:"+";position:absolute;right:4px;top:50%;transform:translateY(-50%);font-size:22px;font-weight:400}
.af-faq details[open] summary::after{content:"–"}
.af-faq details p{margin:0 0 20px;color:var(--voox-text,#46536A);line-height:1.6}

/* ---------- Copier un lien ---------- */
.af-copie{display:flex;flex:1;min-width:0;border:1px solid #D8DDE5;border-radius:12px;overflow:hidden;background:#fff}
.af-copie input{flex:1;min-width:0;padding:11px 12px;border:0;background:transparent;font:13px/1.2 ui-monospace,Menlo,monospace;color:var(--voox-title,#0B0F14)}
.af-copie button{flex:none;padding:0 16px;border:0;background:var(--voox-title,#0B0F14);color:#fff;font-weight:600;font-size:13px;cursor:pointer}
.af-copie button.is-copie{background:#0B7A4B}
.af-copie-petite input{padding:8px 10px;font-size:11.5px}
.af-copie-petite button{padding:0 12px;font-size:12px}

/* Sur la fiche produit. */
.af-partage{margin-top:16px;padding:14px;border:1px dashed #B8286E;border-radius:16px;background:#FFF5F8}
.af-partage-titre{display:block;margin-bottom:8px;font:600 11.5px/1 var(--voox-font-title,Oxanium),sans-serif;letter-spacing:.18em;text-transform:uppercase;color:#B8286E}

/* ---------- L'espace de l'affilié ---------- */
.af-espace-tete{padding:36px 0 30px;background:linear-gradient(160deg,#FFF5F8 0%,#fff 60%,#F3F0FF 100%);border-bottom:1px solid #EEF1F6}
.af-espace-tete .voox-breadcrumb ol{justify-content:flex-start}
.af-espace-tete h1{margin:0;font:700 clamp(28px,3.6vw,42px)/1.1 var(--voox-font-title,Oxanium),sans-serif;color:var(--voox-title,#0B0F14)}
.af-statut{display:inline-block;margin:14px 0 0;padding:5px 12px;border-radius:999px;font-size:13px;font-weight:600;background:#EEF1F6;color:#46536A}
.af-statut-actif{background:#E3F8EE;color:#0B7A4B}
.af-statut-en_attente{background:#FFF4E0;color:#A15C00}
.af-statut-refuse{background:#FDE8EC;color:#B42346}
.af-attente{padding:30px;margin-bottom:40px;border-radius:24px;background:#F6F7FA}
.af-attente h2{margin:0 0 8px;font:600 22px/1.2 var(--voox-font-title,Oxanium),sans-serif}
.af-attente p{margin:0 0 18px;color:var(--voox-text,#46536A)}
.af-tableau{display:grid;grid-template-columns:1.4fr repeat(4,minmax(0,1fr)) 1.4fr;gap:12px;margin-bottom:40px}
.af-code,.af-kpi{display:flex;flex-direction:column;gap:6px;padding:20px;border-radius:20px;background:#F6F7FA}
.af-code{background:var(--voox-title,#0B0F14);color:#fff}
.af-code span,.af-kpi span{font-size:12.5px;color:inherit;opacity:.7}
.af-code strong{font:700 30px/1 ui-monospace,Menlo,monospace;letter-spacing:.12em}
.af-code small,.af-kpi small{font-size:12px;opacity:.65}
.af-kpi strong{font:700 26px/1 var(--voox-font-title,Oxanium),sans-serif;color:var(--voox-title,#0B0F14)}
.af-kpi-fort{background:linear-gradient(135deg,#FFF5F8,#F3F0FF)}
.af-liens{margin-bottom:40px}
.af-liens .af-titre{margin-bottom:16px}
.af-lien-ligne{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.af-lien-ligne > span,.af-lien-ligne select{flex:none;width:220px;font-weight:600}
.af-lien-ligne select{height:44px;padding:0 12px;border:1px solid #D8DDE5;border-radius:12px;background:#fff;font:inherit}
.af-meilleurs{margin-bottom:40px}
.af-meilleurs ul{margin:16px 0 0;padding:0;list-style:none}
.af-meilleurs li{display:flex;align-items:center;gap:14px;padding:10px 0;border-bottom:1px solid #EEF1F6}
.af-meilleurs img{width:44px;height:44px;border-radius:10px;object-fit:cover}
.af-meilleurs a{flex:1;color:var(--voox-title,#0B0F14);font-weight:600}
.af-ligne-espace{margin-top:10px}
.af-produit-kit .af-copie{margin-top:8px}
.af-telecharger{margin-top:6px;font-size:13px;font-weight:600;color:#B8286E}

@media (max-width:980px){
  .af-hero-grille,.af-inscription{grid-template-columns:1fr;gap:36px}
  .af-mosaique{height:360px;max-width:520px}
  .af-chiffres{grid-template-columns:repeat(2,minmax(0,1fr))}
  .af-chiffres li:nth-child(3){border-left:0}
  .af-etapes{grid-template-columns:1fr}
  .af-produits{grid-template-columns:repeat(3,minmax(0,1fr))}
  .af-profils{grid-template-columns:repeat(2,minmax(0,1fr))}
  .af-tableau{grid-template-columns:repeat(2,minmax(0,1fr))}
  .af-code,.af-kpi-fort{grid-column:1 / -1}
}
@media (max-width:560px){
  .af-section{padding:44px 0}
  .af-hero{padding:28px 0 46px}
  .af-mosaique{height:290px}
  .af-chiffres li{padding:18px 14px}
  .af-chiffres strong{font-size:22px}
  .af-produits{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .af-profils{grid-template-columns:1fr}
  .af-deux{grid-template-columns:1fr}
  .af-carte-form{padding:20px;border-radius:20px}
  .af-ligne{flex-direction:column;align-items:flex-start}
  .af-lien-ligne{flex-direction:column;align-items:stretch}
  .af-lien-ligne > span,.af-lien-ligne select{width:100%}
}