/* ==========================================================================
   ROC SECURITY — systemes d'alarme sans fil, Algerie
   Palette alignee sur IMOU : orange de marque, sur base graphite (sombre) ou
   sur blanc casse (clair).

   DEUX THEMES, UN SEUL JEU DE NOMS
   Les variables --fond-*, --texte-* et --ligne portent un ROLE, pas une
   couleur. Elles sont les seules a changer d'un theme a l'autre ; tout le
   reste de la feuille les consomme sans savoir lequel est actif.

   Les anciens noms (--noir, --graphite, --blanc, --argent...) sont conserves
   en alias : ils sont utilises a des centaines d'endroits et les renommer
   n'aurait rien apporte. Ils suivent le theme automatiquement.

   ATTENTION — une variable ne doit JAMAIS se referencer elle-meme
   (--vert:var(--vert)). C'est un cycle : CSS declare la propriete invalide et
   elle se resout a vide. Onze variables de ce fichier etaient dans ce cas,
   et quatorze de plus dans admin.css : le vert, l'ambre, le WhatsApp, les
   ombres, les six couleurs de statut du dashboard et le voile de l'en-tete
   ne s'affichaient tout simplement pas.
   ========================================================================== */
:root{
  color-scheme:dark;

  /* ---- Roles : fonds ---------------------------------------------------- */
  --fond-0:#0B0E13;                    /* la page */
  --fond-1:#151A22;                    /* les bandes, l'en-tete */
  --fond-2:#1E2530;                    /* les cartes, les champs */

  /* ---- Roles : textes --------------------------------------------------- */
  --texte-0:#FFFFFF;                   /* titres */
  --texte-1:#F5F7FA;                   /* texte fort */
  --texte-2:#C7D0DB;                   /* texte courant */
  --texte-3:#8B95A3;                   /* texte secondaire */
  --texte-4:#6B7482;                   /* mentions legales */
  --texte-champ:#7A8492;               /* placeholder */

  /* ---- Roles : traits et ombres ----------------------------------------- */
  --ligne:rgba(199,208,219,.14);
  --shadow:0 10px 30px rgba(0,0,0,.45);
  --ombre-carte:0 12px 24px rgba(0,0,0,.5);
  --ombre-flottant:0 6px 18px rgba(0,0,0,.4);
  --ombre-image:0 24px 46px rgba(0,0,0,.55);
  --ombre-douce:none;                  /* le relief des cartes en clair */
  --voile-entete:rgba(11,14,19,.82);
  --voile-barre:rgba(11,14,19,.92);
  --opacite-fond:.30;                  /* le salon flou derriere la page */

  /* ---- Accent : orange IMOU --------------------------------------------- *
   * #F18D03 n'est pas choisi a l'oeil : c'est la teinte dominante relevee au
   * pixel sur le bandeau du logo IMOU des visuels produit officiels. Elle est
   * a un cheveu du #FF8000 de rocsecurity.store — les deux sites lisent comme
   * une seule marque.
   *
   * --orange-vif est la seule a changer de valeur entre les themes : sur
   * fond sombre elle doit eclaircir (#FFA733), sur fond blanc elle doit
   * foncer (#B45F06), sinon le texte accentue tombe a 1,9:1 et devient
   * illisible. Le #F18D03 des aplats de bouton, lui, ne bouge pas.
   * ---------------------------------------------------------------------- */
  --orange:#F18D03;
  --orange-vif:#FFA733;
  --orange-sombre:#C2710A;
  --sur-orange:#1A1206;
  --voile-orange-fort:rgba(241,141,3,.20);
  --voile-orange:rgba(241,141,3,.16);
  --voile-orange-doux:rgba(241,141,3,.12);
  --shadow-accent:0 8px 28px rgba(241,141,3,.28);

  /* ---- Signalisation ----------------------------------------------------- *
   * Vert, ambre et WhatsApp ne suivent pas la marque : ce sont des codes que
   * tout le monde lit de la meme facon. Les repeindre en orange ferait
   * disparaitre l'information qu'ils portent.
   * ---------------------------------------------------------------------- */
  --vert:#34D399;
  --voile-vert:rgba(52,211,153,.14);
  --ambre:#F5A524;
  --voile-ambre:rgba(245,165,36,.14);
  --whatsapp:#25D366;

  --radius:14px;

  /* ---- Alias historiques : ne portent plus de couleur en propre ---------- */
  --noir:var(--fond-0);
  --graphite:var(--fond-1);
  --graphite-clair:var(--fond-2);
  --blanc-pur:var(--texte-0);
  --blanc:var(--texte-1);
  --argent:var(--texte-2);
  --gris:var(--texte-3);
  --gris-sourd:var(--texte-4);
  --gris-champ:var(--texte-champ);
}

/* ==========================================================================
   Theme clair — les valeurs viennent de rocsecurity.store, releves au pixel :
   fond #FFFFFF, texte #1A1A1A, texte secondaire #666666, trait #E5E5E5,
   bande creme #F9F7F5. Seuls les roles sont redefinis.
   ========================================================================== */
:root[data-theme="light"]{
  color-scheme:light;

  --fond-0:#FFFFFF;
  --fond-1:#F7F4F0;
  --fond-2:#FFFFFF;

  --texte-0:#1A1A1A;
  --texte-1:#242424;
  --texte-2:#3F3F3F;
  --texte-3:#666666;
  --texte-4:#8C8C8C;
  --texte-champ:#A3A3A3;

  --ligne:#E3DFD9;
  --shadow:0 10px 30px rgba(26,26,26,.10);
  --ombre-carte:0 10px 22px rgba(26,26,26,.08);
  --ombre-flottant:0 6px 18px rgba(26,26,26,.16);
  --ombre-image:0 18px 34px rgba(26,26,26,.16);
  --ombre-douce:0 1px 2px rgba(26,26,26,.04),0 6px 16px rgba(26,26,26,.05);
  --voile-entete:rgba(255,255,255,.88);
  --voile-barre:rgba(255,255,255,.94);
  --opacite-fond:.16;

  --orange-vif:#B45F06;
  --voile-orange-fort:rgba(241,141,3,.16);
  --voile-orange:rgba(241,141,3,.12);
  --voile-orange-doux:rgba(241,141,3,.10);
  --shadow-accent:0 8px 22px rgba(241,141,3,.30);

  --vert:#047857;
  --voile-vert:rgba(4,120,87,.10);
  --ambre:#B7791F;
  --voile-ambre:rgba(183,121,31,.12);
}

*{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);}
.prix-note{font-size:.85rem;color:var(--gris);}
.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;}
  .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.
   ========================================================================== */
.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 : "ROC SECURITY" est plus long que "BARQ". Sur les petits ecrans 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. */
:root{--fond-image:url("../images/fond-salon.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.
   ========================================================================== */
.detail-photo img{aspect-ratio:31/38;object-fit:cover;width:100%;}
.hero-media img{aspect-ratio:500/468;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){
  .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%;}