/* ==========================================================================
   SOCLE 1.0 — mise en page et composants
   Les couleurs vivent dans css/tokens.css, charge juste avant celui-ci.
   Ne jamais ecrire de valeur hex ici : passer par une variable.
   ========================================================================== */
*{box-sizing:border-box;}
html,body{overflow-x:hidden;max-width:100%;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--noir);
  color:var(--argent);
  font-family:"Inter","Segoe UI",system-ui,-apple-system,sans-serif;
  font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
/* height:auto est indispensable : sans lui, une image qui porte les attributs
   width et height se retrouve bridee en largeur mais garde sa hauteur
   d'origine — elle s'etire verticalement. C'est ce qui deformait le hero. */
img{max-width:100%;height:auto;display:block;}
a{color:inherit;}

.container{width:min(1120px,92vw);margin-inline:auto;}
.section{padding:52px 0;position:relative;}
.section-sombre{background:var(--graphite);}

h1,h2,h3{color:var(--blanc-pur);line-height:1.15;margin:0 0 .5em;font-weight:700;letter-spacing:-.02em;}
h1{font-size:clamp(2rem,5.2vw,3.4rem);}
h2{font-size:clamp(1.5rem,3.4vw,2.3rem);text-align:center;}
h3{font-size:1.05rem;}
p{margin:0 0 1em;}
.lead{color:var(--gris);font-size:1.05rem;}

/* ----- En-tête ----- */
.site-header{
  position:sticky;top:0;z-index:50;
  background:var(--voile-entete);
  backdrop-filter:saturate(160%) blur(10px);
  border-bottom:1px solid var(--ligne);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 0;}
.logo{
  font-weight:800;font-size:1.35rem;letter-spacing:.14em;
  color:var(--blanc-pur);text-decoration:none;display:flex;align-items:center;gap:9px;
}
.logo-eclair{color:var(--orange);font-size:1.15em;line-height:1;display:inline-flex;align-items:center;}
.logo-sub{display:block;font-size:.56rem;letter-spacing:.28em;color:var(--gris);font-weight:600;}

/* ----- Boutons ----- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 30px;border:0;border-radius:999px;
  font:inherit;font-weight:700;text-decoration:none;cursor:pointer;
  transition:transform .14s ease-out,box-shadow .14s ease-out,background .14s;
}
.btn-primary{background:var(--orange);color:var(--sur-orange);box-shadow:var(--shadow-accent);}
.btn-primary:hover{background:var(--orange-vif);transform:translateY(-1px);}
.btn-ghost{background:transparent;color:var(--blanc);border:1px solid var(--ligne);padding:11px 22px;}
.btn-ghost:hover{border-color:var(--orange);color:var(--orange-vif);}
.btn-full{width:100%;}

/* ----- Hero ----- */
.hero{
  position:relative;overflow:hidden;
  padding:64px 0 56px;
  background:
    radial-gradient(120% 90% at 78% 22%,var(--voile-orange-fort) 0%,transparent 62%),
    linear-gradient(180deg,var(--noir) 0%,var(--graphite) 100%);
}
.hero-grid{display:grid;gap:30px;align-items:center;}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:.74rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--orange-vif);margin-bottom:16px;
}
.hero-sub{color:var(--gris);font-size:1.06rem;max-width:46ch;}
.hero-media{position:relative;}
.hero-media img{
  filter:drop-shadow(var(--ombre-image));
  margin-inline:auto;max-width:420px;
}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin:26px 0 14px;}
.prix{display:flex;align-items:baseline;gap:10px;}
.prix-val{font-size:2rem;font-weight:800;color:var(--blanc-pur);}
/* Sortie de .prix : dans ce conteneur flex elle se posait A COTE du
   montant. Sa place est au-dessus — l'argument prepare le prix, il ne
   l'accompagne pas. */
.prix-note{font-size:.9rem;color:var(--argent);margin:22px 0 -8px;}
.prix-todo{
  display:inline-block;padding:5px 12px;border-radius:999px;
  background:var(--voile-ambre);color:var(--ambre);
  font-size:.78rem;font-weight:700;letter-spacing:.04em;
}
.hero-points{display:flex;flex-wrap:wrap;gap:8px 22px;font-size:.9rem;color:var(--argent);padding:0;margin:18px 0 0;list-style:none;}
.hero-points li::before{content:"\2713";color:var(--orange);margin-inline-end:7px;font-variant-emoji:text;}

/* ----- Bandeau chiffres ----- */
.stats{background:var(--graphite-clair);border-block:1px solid var(--ligne);}
.stats-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--ligne);}
.stat{background:var(--graphite-clair);padding:24px 16px;text-align:center;}
.stat-num{display:block;font-size:1.7rem;font-weight:800;color:var(--orange-vif);line-height:1.1;}
.stat-lbl{font-size:.82rem;color:var(--gris);}

/* ----- Cartes ----- */
.grid{display:grid;gap:18px;}
.card{
  background:var(--graphite-clair);
  border:1px solid var(--ligne);border-radius:var(--radius);
  padding:24px;
}
.card h3{margin-bottom:.35em;}
.card p{margin:0;color:var(--gris);font-size:.95rem;}
.card-icone{font-size:1.5rem;margin-bottom:12px;display:block;}

/* ----- Comparatif ----- */
.compare{width:100%;border-collapse:collapse;font-size:.95rem;}
.compare th,.compare td{padding:14px 12px;border-bottom:1px solid var(--ligne);text-align:start;}
.compare th{color:var(--blanc-pur);font-weight:700;}
.compare td:last-child{color:var(--orange-vif);font-weight:600;}

/* ----- Galerie ----- */
.galerie{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;}
.galerie figure{
  margin:0;padding:14px;
  background:linear-gradient(160deg,var(--graphite-clair),var(--graphite));
  border:1px solid var(--ligne);border-radius:var(--radius);
}
.galerie img{filter:drop-shadow(var(--ombre-carte));}

/* ----- Formulaire ----- */
.commande{background:
  radial-gradient(100% 80% at 20% 0%,var(--voile-orange) 0%,transparent 60%),
  var(--graphite);}
.form-carte{
  background:var(--noir);border:1px solid var(--ligne);
  border-radius:18px;padding:28px;box-shadow:var(--shadow);
  max-width:620px;margin-inline:auto;
}
.field{margin-bottom:18px;}
.field label,.field-legend{display:block;font-weight:600;color:var(--blanc-pur);margin-bottom:8px;font-size:.94rem;}
.field input,.field select{
  width:100%;padding:14px 15px;
  background:var(--graphite-clair);color:var(--blanc);
  border:1px solid var(--ligne);border-radius:10px;
  font:inherit;
}
.field input:focus,.field select:focus{outline:2px solid var(--orange);outline-offset:1px;border-color:transparent;}
.field input::placeholder{color:var(--gris-champ);}
.qty{display:flex;align-items:center;gap:12px;}
.qty-btn{
  width:44px;height:44px;border-radius:10px;
  background:var(--graphite-clair);color:var(--blanc-pur);border:1px solid var(--ligne);
  font-size:1.3rem;cursor:pointer;
}
.qty input{width:70px;text-align:center;}
.choix{display:flex;gap:10px;flex-wrap:wrap;}
.choix label{
  flex:1;min-width:150px;cursor:pointer;
  padding:13px 16px;border-radius:10px;
  background:var(--graphite-clair);border:1px solid var(--ligne);
  color:var(--argent);font-weight:600;text-align:center;margin:0;
}
/* La case reste dans son etiquette : sans inset, un input en position
   absolue se pose hors de la page et cree un debordement horizontal. */
.choix label{position:relative;}
.choix input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer;}
.choix input:checked + span{color:var(--orange-vif);}
.choix label:has(input:checked){border-color:var(--orange);background:var(--voile-orange-doux);}
.recap{border-top:1px solid var(--ligne);margin-top:22px;padding-top:18px;}
.recap-ligne{display:flex;justify-content:space-between;padding:7px 0;color:var(--gris);}
.recap-total{display:flex;justify-content:space-between;padding-top:12px;margin-top:8px;border-top:1px solid var(--ligne);font-size:1.15rem;font-weight:800;color:var(--blanc-pur);}
.form-note{text-align:center;color:var(--gris);font-size:.86rem;margin-top:14px;}

/* ----- FAQ ----- */
.faq-item{border-bottom:1px solid var(--ligne);}
.faq-item summary{padding:18px 0;cursor:pointer;font-weight:600;color:var(--blanc-pur);list-style:none;}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{content:"+";float:inline-end;color:var(--orange);font-size:1.3rem;line-height:1;}
.faq-item[open] summary::after{content:"−";}
.faq-item p{color:var(--gris);padding-bottom:18px;margin:0;}

/* ----- Pied de page ----- */
.site-footer{background:var(--noir);border-top:1px solid var(--ligne);padding:40px 0 90px;text-align:center;color:var(--gris);font-size:.88rem;}
.revendeur{font-size:.8rem;color:var(--gris-sourd);max-width:60ch;margin:14px auto 0;}

/* ----- Barre fixe mobile ----- */
.sticky-cta{
  position:fixed;inset-inline:0;bottom:0;z-index:55;
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  background:var(--voile-barre);backdrop-filter:blur(8px);
  border-top:1px solid var(--ligne);
}
.sticky-cta[hidden]{display:none;}
.sticky-prix{font-weight:800;color:var(--blanc-pur);}
.sticky-note{font-size:.72rem;color:var(--gris);}

/* Comme .sticky-cta : sans cette regle, le display:flex ci-dessous l'emporte
   sur le [hidden] de la feuille du navigateur et le bouton reste visible meme
   quand main.js le masque faute de numero WhatsApp. */
.wa-float[hidden]{display:none;}
.wa-float{
  position:fixed;inset-inline-end:18px;bottom:86px;z-index:60;
  width:56px;height:56px;border-radius:50%;
  /* Le vert et le blanc du glyphe sont ceux de la marque : ils ne suivent pas
     le theme. --blanc-pur devenait #1A1A1A en clair et le combine virait au
     noir sur le rond vert — un logo WhatsApp ne se relit qu'en blanc. */
  background:#25D366;color:#FFFFFF;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 12px rgba(0,0,0,.15),0 8px 24px rgba(37,211,102,.35);
  text-decoration:none;
  transition:transform .14s ease-out,box-shadow .14s ease-out;
}
.wa-float:hover{
  transform:scale(1.06);
  box-shadow:0 6px 16px rgba(0,0,0,.18),0 10px 30px rgba(37,211,102,.45);
}
.wa-float svg{display:block;}

/* ----- Écrans larges ----- */
@media (min-width:760px){
  .hero-grid{grid-template-columns:1.05fr .95fr;}
  /* L'ordre d'avant : texte a gauche, photo a droite, bande en dessous. */
  .hero-texte{order:1;} .hero-media{order:2;} .hero-grid .marquee{order:3;}
  .stats-grid{grid-template-columns:repeat(4,1fr);}
  .grid-3{grid-template-columns:repeat(3,1fr);}
  .grid-2{grid-template-columns:repeat(2,1fr);}
  .galerie{grid-template-columns:repeat(4,1fr);}
  .sticky-cta{display:none;}
  .wa-float{bottom:18px;}
}

/* Prix barre : pilote depuis le dashboard. Vide en base = rien a l'ecran,
   aucun element vide ne subsiste dans la page. */
.prix-ancien{font-size:1.05rem;color:var(--gris);text-decoration:line-through;}
.prix-ancien[hidden],.prix-remise[hidden]{display:none;}
.prix-remise{
  font-size:.78rem;font-weight:800;padding:5px 11px;border-radius:999px;
  background:var(--voile-vert);color:var(--vert);
}

/* ==========================================================================
   Bande roulante — les arguments defilent en continu sous le hero.
   Le second groupe est un double exact du premier : c'est ce qui rend la
   boucle invisible.
   ========================================================================== */
/* DANS la grille du hero, mais toujours bord a bord : le conteneur la
   bornerait a 1 120 px. Le calcul ci-dessous la ressort aux deux bords,
   quelle que soit la largeur disponible. Le depassement du a la barre de
   defilement est absorbe par `.hero{overflow:hidden}`, deja en place :
   aucune barre horizontale n'apparait sur la page. */
.hero-grid .marquee{grid-column:1 / -1;width:100vw;margin-inline:calc(50% - 50vw);}

.marquee{
  overflow:hidden;background:var(--orange);
  padding:0;position:relative;z-index:1;
  /* Hauteur fixe des le premier pixel : la bande ne pousse plus le contenu
     quand la police arabe finit d'arriver du reseau. C'est ce sursaut qui
     donnait l'impression qu'elle "tardait a charger". */
  height:34px;display:flex;align-items:center;
  /* La MECANIQUE du defilement est en LTR, quel que soit le sens de lecture
     de la page. En RTL, un conteneur flex empile depuis la droite : une piste
     de 2500 px dans une bande de 520 px debordait donc vers la GAUCHE, et
     l'animation l'y enfoncait encore. Resultat, une bande orange vide.
     Le texte arabe, lui, reste en RTL span par span (voir plus bas) : c'est
     la disposition de la piste qu'on fige, pas la lecture. */
  direction:ltr;
}
.marquee-piste{display:flex;width:max-content;align-items:center;height:100%;animation:defile 30s linear infinite;will-change:transform;}
.marquee-groupe{display:flex;align-items:center;flex-shrink:0;}
.marquee-groupe span{
  font-size:.78rem;font-weight:700;color:var(--sur-orange);
  padding:0 18px;white-space:nowrap;display:flex;align-items:center;
  direction:rtl;   /* l'arabe se lit normalement dans chaque element */
}
.marquee-groupe span::after{
  content:"";width:4px;height:4px;border-radius:50%;
  background:var(--sur-orange);opacity:.55;margin-inline-start:22px;
}
@keyframes defile{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@media (prefers-reduced-motion:reduce){.marquee-piste{animation:none;}}

/* ==========================================================================
   Le produit en detail
   Les chiffres sont ecrits en HTML, pas incrustes dans une image : ils se
   traduiront avec le reste du site le jour ou on ajoute les langues.
   ========================================================================== */
.detail-grille{display:grid;gap:16px;margin-top:28px;}
.detail-photo{
  margin:0;padding:14px;border-radius:var(--radius);
  background:linear-gradient(160deg,var(--graphite-clair),var(--graphite));
  border:1px solid var(--ligne);
}
.detail-photo img{border-radius:10px;}
.detail-photo figcaption{
  margin-top:12px;color:var(--gris);font-size:.86rem;text-align:center;
}
.fiches{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:22px;}
.fiche{
  background:var(--graphite-clair);border:1px solid var(--ligne);
  border-radius:var(--radius);padding:18px;text-align:center;
}
.fiche-val{display:block;font-size:1.45rem;font-weight:800;color:var(--orange-vif);line-height:1.15;}
.fiche-lbl{font-size:.82rem;color:var(--gris);}
@media (min-width:760px){
  .detail-grille{grid-template-columns:1fr 1fr;}
  .fiches{grid-template-columns:repeat(3,1fr);}
}

/* Le visuel du hero reste carre et ne s'etire jamais. */
.hero-media img{max-width:min(380px,82vw);border-radius:16px;}

.header-actions{display:flex;align-items:center;gap:12px;}

/* ==========================================================================
   Arabe : le site entier est en RTL, il n'y a pas d'autre sens de lecture.
   La mise en page suit d'elle-meme grace aux proprietes logiques deja
   utilisees partout (margin-inline, inset-inline, padding-inline, text-align
   start/end) — aucune regle miroir a ecrire.
   ========================================================================== */
[dir="rtl"] .marquee-piste{animation-direction:reverse;}

/* L'arabe n'a pas de casse : les majuscules forcees ne produisent rien et
   ecrasent inutilement l'interlettrage. */
[dir="rtl"] .eyebrow{text-transform:none;letter-spacing:.06em;}

/* Les chiffres, prix et unites restent lus de gauche a droite. */
[dir="rtl"] [dir="ltr"]{unicode-bidi:isolate;}

/* Une police arabe lisible passe avant Inter, qui ne dessine pas l'arabe. */
body{font-family:"Cairo","Noto Kufi Arabic","Inter","Segoe UI",system-ui,sans-serif;}
h1,h2,h3{letter-spacing:0;}
.logo{letter-spacing:.10em;}

/* ==========================================================================
   Sections courtes : a qui ca s'adresse, bien demarrer
   ========================================================================== */
.liste-cible{list-style:none;padding:0;margin:28px 0 0;}
.liste-cible li{
  display:flex;gap:14px;align-items:flex-start;
  padding:16px 0;border-bottom:1px solid var(--ligne);
  color:var(--argent);
}
.liste-cible li:last-child{border-bottom:0;}
.liste-cible li::before{
  content:"\2713";color:var(--orange);flex-shrink:0;line-height:1.5;
  font-variant-emoji:text;font-weight:700;
}

.etapes{list-style:none;counter-reset:etape;padding:0;margin:28px 0 0;}
.etapes li{
  counter-increment:etape;position:relative;
  padding:18px 0 18px 56px;border-bottom:1px solid var(--ligne);
  color:var(--argent);
}
.etapes li:last-child{border-bottom:0;}
.etapes li::before{
  content:counter(etape);
  position:absolute;inset-inline-start:0;inset-block-start:14px;
  width:36px;height:36px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--graphite-clair);border:1px solid var(--ligne);
  color:var(--orange-vif);font-weight:800;font-size:.95rem;
}
/* En arabe la numerotation passe a droite : padding logique, pas de miroir. */
.etapes li{padding-inline-start:56px;padding-inline-end:0;}

/* ==========================================================================
   Logo : un nom de marque long passe sur deux lignes en petit ecran. Il
   passait sur deux lignes et donnait un en-tete de 83 px de haut. On reduit la
   taille et l'interlettrage sous 420 px plutot que de couper le nom.
   ========================================================================== */
@media (max-width:420px){
  .logo{font-size:1.02rem;letter-spacing:.06em;gap:7px;}
  .logo-sub{font-size:.48rem;letter-spacing:.2em;}
  .btn-ghost{padding:9px 16px;font-size:.9rem;}
}

/* ==========================================================================
   Image de fond — le salon flou des photos produit
   Le fichier n'est pas une photo de banque d'images : c'est l'arriere-plan
   deja flou des propres visuels de la boutique, agrandi et desature. Meme
   lumiere que les produits, aucune question de droits, et 9 ko.

   Il est pose sur ::before et non sur body : un background-attachment:fixed
   sur body casse le defilement sur iOS, et un pseudo-element en position
   fixed derriere tout le monde donne le meme resultat partout.
   ========================================================================== */
/* L'adresse passe par une variable : le dashboard la reecrit sur <html> pour
   changer le fond sans toucher a la feuille de style. Non redefinie, elle
   retombe sur le fichier livre avec le site. */
/* Le gabarit gris du socle portait ses propres dimensions ecrites dessus :
   a 30 %% d'opacite, on lisait "1920 x 1080" au travers de la page. */
:root{--fond-image:url("../images/fond-maison.webp");}
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:var(--fond-image) center/cover no-repeat;
  opacity:var(--opacite-fond);
  /* Un fond fixe plein ecran est repeint a chaque frame de la bande roulante
     si le navigateur ne le promeut pas sur sa propre couche. Avec translateZ
     il est compose une fois et l'animation ne le touche plus. */
  transform:translateZ(0);will-change:transform;
}
/* Les sections opaques masqueraient le fond : on les rend legerement
   translucides pour qu'il transparaisse au lieu de disparaitre. */
.section-sombre,.stats,.commande{background-color:color-mix(in srgb,var(--fond-1) 88%,transparent);}
body{background-color:var(--fond-0);}

/* ==========================================================================
   Bouton de bascule sombre / clair
   ========================================================================== */
.theme-toggle{
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 14px;border-radius:999px;
  background:var(--fond-2);border:1px solid var(--ligne);
  color:var(--texte-2);font:inherit;font-size:.82rem;font-weight:700;
  cursor:pointer;line-height:1;
  transition:border-color .15s,color .15s;
}
.theme-toggle:hover{border-color:var(--orange);color:var(--orange-vif);}
.theme-toggle svg{width:15px;height:15px;flex-shrink:0;}
/* Un seul bouton, deux icones : on montre celle du theme vers lequel on va. */
.theme-toggle .i-clair{display:none;}
:root[data-theme="light"] .theme-toggle .i-clair{display:block;}
:root[data-theme="light"] .theme-toggle .i-sombre{display:none;}
@media (max-width:560px){
  .theme-toggle span[data-theme-label]{display:none;}
  .theme-toggle{padding:9px 11px;}
}

/* ==========================================================================
   Avis clients — captures des commentaires de la page Facebook
   Une bande qui defile au doigt plutot qu'une grille : trois captures en
   colonne ajoutaient un ecran et demi a une page deja jugee trop longue.
   ========================================================================== */
.avis-bande{
  display:flex;gap:16px;overflow-x:auto;padding:6px 2px 18px;
  scroll-snap-type:x mandatory;
  scrollbar-width:thin;scrollbar-color:var(--ligne) transparent;
}
.avis-bande::-webkit-scrollbar{height:6px;}
.avis-bande::-webkit-scrollbar-thumb{background:var(--ligne);border-radius:999px;}
.avis-carte{
  flex:0 0 auto;width:min(260px,72vw);scroll-snap-align:center;
  margin:0;padding:10px;border-radius:var(--radius);
  background:var(--fond-2);border:1px solid var(--ligne);box-shadow:var(--ombre-douce);
}
/* Les captures sont hautes : on n'en montre que le haut, la ou sont les
   commentaires, et on laisse le lecteur ouvrir en grand s'il veut la suite. */
.avis-carte img{
  width:100%;height:300px;object-fit:cover;object-position:top;
  border-radius:9px;background:#fff;
}
.avis-source{
  display:flex;align-items:center;justify-content:center;gap:7px;
  margin:10px 0 0;font-size:.78rem;color:var(--texte-3);
}
.avis-source::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--vert);}

/* ==========================================================================
   Theme clair — les quelques regles qui ne se deduisent pas des variables
   ========================================================================== */
:root[data-theme="light"] .card,
:root[data-theme="light"] .fiche,
:root[data-theme="light"] .detail-photo,
:root[data-theme="light"] .form-carte{box-shadow:var(--ombre-douce);}
/* Sur fond blanc, un degrade gris-sur-gris ne se lit plus : aplat franc. */
:root[data-theme="light"] .detail-photo,
:root[data-theme="light"] .galerie figure{background:var(--fond-2);}
/* Le hero sombre etait un degrade noir ; en clair il devient un halo orange
   tres pale sur blanc, sinon la page demarre sur un aplat mort. */
:root[data-theme="light"] .hero{
  background:
    radial-gradient(120% 90% at 78% 22%,var(--voile-orange-fort) 0%,transparent 62%),
    linear-gradient(180deg,#FFFFFF 0%,#FBF8F4 100%);
}
:root[data-theme="light"] .commande{
  background:
    radial-gradient(100% 80% at 20% 0%,var(--voile-orange) 0%,transparent 60%),
    color-mix(in srgb,var(--fond-1) 88%,transparent);
}
:root[data-theme="light"] .site-footer{background:var(--fond-1);}
:root[data-theme="light"] .form-carte{background:var(--fond-2);}
:root[data-theme="light"] .field input,
:root[data-theme="light"] .field select,
:root[data-theme="light"] .qty-btn,
:root[data-theme="light"] .choix label{background:#FBFAF8;}
/* Le logo blanc du pied de page etait ecrit en dur : il disparaissait. */
.site-footer strong{color:var(--texte-0);}

/* ==========================================================================
   Photos produit — les visuels sont desormais des photos en situation, pas
   des rendus detoures. Un ratio fixe evite que les quatre cartes se decalent.
   ========================================================================== */
/* 3/4 : c'est le format natif des photos. Un cadre plus large les
   rognerait du haut et du bas — sur celle de la douche, c'est la barre
   elle-meme qui partirait. Le rapport est declare pour que le
   navigateur reserve la place avant meme d'avoir l'image : sans lui,
   le texte saute au moment ou elle arrive. */
.detail-photo img{aspect-ratio:3/4;object-fit:cover;width:100%;}
.hero-media img{aspect-ratio:3/4;object-fit:cover;}

/* Sur petits ecrans on resserre encore : c'est la que la longueur se paie. */
@media (max-width:640px){
  .section{padding:40px 0;}
  h2{font-size:clamp(1.35rem,5.4vw,1.8rem);}
}

/* ==========================================================================
   Longueur de la page — la moitie du probleme tenait dans une seule section
   Sur un ecran etroit, "ما الذي تجده في الصندوق" empilait ses quatre photos
   en une colonne : 2 921 px a lui seul, un tiers de la page. Deux colonnes
   des 430 px le ramenent a un peu plus de 1 400.
   ========================================================================== */
@media (min-width:430px){
  .detail-grille{grid-template-columns:1fr 1fr;gap:12px;}
  .detail-photo{padding:10px;}
  .detail-photo figcaption{font-size:.8rem;margin-top:9px;}
}
/* Les cartes d'argumentaire : moins de rembourrage, elles restent lisibles. */
@media (max-width:759px){
  /* LA PHOTO PRODUIT PASSE AU-DESSUS DU TEXTE.
     Sur telephone la grille du hero n'a qu'une colonne, et l'image
     arrivait derniere : il fallait passer le titre, le paragraphe, le
     bouton et le prix avant de voir ce qu'on achete. C'est l'ordre
     inverse de celui d'une fiche produit.

     `order` ne touche QUE l'affichage : dans le HTML le titre reste
     avant l'image, donc Google et les lecteurs d'ecran gardent le bon
     ordre de lecture. L'image n'etant pas focalisable, la navigation
     au clavier n'est pas affectee non plus.

     La photo est aussi resserree : a 82vw elle repoussait le titre
     entierement sous la ligne de flottaison. */
  .hero-texte{order:3;} .hero-media{order:1;} .hero-grid .marquee{order:2;}
  /* Plus etroite qu'a l'origine : en 3/4 une largeur de 72 vw poussait
     le titre entierement sous la ligne de flottaison. */
  .hero-media img{max-width:min(260px,62vw);}
  .hero-grid{gap:22px;}
  /* La bande ferme le hero. Sans cela le fond du hero reapparaissait
     sous elle sur la hauteur du padding, et elle ne collait plus a la
     section suivante comme avant le deplacement. */
  .hero{padding-bottom:0;}

  .card{padding:18px;}
  .card-icone{font-size:1.3rem;margin-bottom:8px;}
  .hero{padding:34px 0 40px;}
  .liste-cible li{padding:12px 0;}
  .fiche{padding:14px;}
  .form-carte{padding:20px;}
}

/* ==========================================================================
   Les quatre photos produit : quatre colonnes des 900 px
   En deux colonnes sur un ecran de 1 366 px, chaque photo montait a 550 px de
   large pour 310 px de pixels reels — un agrandissement de 1,8x, et une
   section de plus de mille pixels de haut pour quatre objets qui tiennent
   dans la main. Quatre colonnes rendent la photo a sa taille native.
   ========================================================================== */
@media (min-width:900px){
  .detail-grille{grid-template-columns:repeat(4,1fr);gap:14px;}
}
.detail-photo{max-width:420px;margin-inline:auto;width:100%;}

/* ==========================================================================
   Carrousel du visuel principal
   Le defilement est natif : scroll-snap fait tout le travail tactile, sans
   une ligne de JavaScript pour suivre le doigt. Le script ne sert qu'a
   allumer la bonne pastille et a repondre aux clics.
   ========================================================================== */
.carrousel{position:relative;}
.carrousel-piste{
  display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
  border-radius:16px;
  scrollbar-width:none;-ms-overflow-style:none;
}
.carrousel-piste::-webkit-scrollbar{display:none;}
.carrousel-piste img{
  flex:0 0 100%;width:100%;scroll-snap-align:center;
  border-radius:16px;object-fit:cover;
}
.carrousel-points{
  display:flex;justify-content:center;gap:8px;margin-top:12px;
}
.carrousel-points button{
  width:8px;height:8px;padding:0;border:0;border-radius:50%;
  background:var(--ligne);cursor:pointer;
  transition:background .18s,width .18s;
}
.carrousel-points button[aria-current]{background:var(--orange);width:22px;border-radius:999px;}

/* Le visuel principal ne doit jamais depasser la colonne qui l'accueille. */
.hero-media .carrousel{max-width:min(380px,82vw);margin-inline:auto;}


/* ==========================================================================
   Menu de langue
   Le site suit la langue du telephone au premier chargement ; ce menu sert a
   la personne dont le telephone dit une chose et qui prefere lire dans une
   autre. En Algerie, c'est frequent : un telephone en anglais, une lectrice
   qui lit plus vite en francais.
   ========================================================================== */
.langue-menu{position:relative;}
.langue-bouton{
  display:inline-flex;align-items:center;gap:7px;
  font:inherit;font-size:.82rem;font-weight:700;cursor:pointer;
  padding:7px 10px;border-radius:10px;
  background:var(--fond-2);color:var(--texte-1);border:1px solid var(--ligne);
}
.langue-bouton:hover{border-color:var(--orange);}
.langue-bouton:focus-visible{outline:2px solid var(--orange);outline-offset:1px;}
.langue-fleche{width:14px;height:14px;color:var(--texte-2);flex:none;}

/* Un drapeau dessine : 22 px de large, un liseré pour qu'il se détache aussi
   bien du fond clair que du fond sombre — un drapeau français sur fond blanc
   perd sa bande blanche sans lui. */
.drapeau{
  width:22px;height:15px;flex:none;border-radius:3px;
  box-shadow:0 0 0 1px rgba(128,128,128,.35);
}

.langue-liste{
  position:absolute;inset-inline-end:0;top:calc(100% + 6px);z-index:60;
  margin:0;padding:5px;list-style:none;min-width:170px;
  background:var(--fond-2);border:1px solid var(--ligne);
  border-radius:12px;box-shadow:0 14px 32px rgba(0,0,0,.28);
}
.langue-liste[hidden]{display:none;}
.langue-liste li{
  display:flex;align-items:center;gap:10px;
  padding:9px 10px;border-radius:8px;cursor:pointer;
  font-size:.9rem;color:var(--texte-1);
}
.langue-liste li:hover{background:var(--voile-accent-doux);}
.langue-liste li:focus-visible{outline:2px solid var(--orange);outline-offset:-2px;}
.langue-liste li.actif{font-weight:700;color:var(--orange-vif);}

/* Etiquette lue par les lecteurs d'ecran, invisible a l'oeil. */
.sr-only{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}