/* ==========================================================================
   SOCLE 1.2 — la page d'accueil et la page produit generique
   --------------------------------------------------------------------------
   Chargee APRES css/styles.css. Depuis le lot « logo et telephone », les
   TROIS pages la chargent : index.html en a besoin pour .logo-image et
   .btn-appel. Tout ce qui ne concerne que l'accueil ou la page produit
   generique ne s'applique de toute facon qu'a leurs classes.

   AUCUNE VALEUR HEX. Tout passe par les jetons de css/tokens.css : une
   boutique qui change de charte change aussi ces deux pages, sans y toucher.
   ========================================================================== */
/* ==========================================================================
   [hidden] DOIT GAGNER, TOUJOURS
   --------------------------------------------------------------------------
   Une regle de classe qui pose un display — .btn{display:inline-flex},
   img{display:block} — l'emporte sur le [hidden]{display:none} de la feuille
   du navigateur. Resultat : un element que le JavaScript croit cache reste a
   l'ecran. Ca s'est produit quatre fois dans ce socle (.sticky-cta,
   .wa-float, l'image de logo, l'apercu du logo et son bouton). Une regle
   suffit a fermer la porte.
   ========================================================================== */
[hidden]{display:none !important;}


/* ---------- Le lien « Accueil » de l'en-tete ---------- */

.lien-accueil{
  color:var(--texte-2);font-weight:700;font-size:.9rem;text-decoration:none;
  padding:8px 4px;
}
.lien-accueil:hover{color:var(--orange-vif);}
/* Sur un petit ecran, l'en-tete porte deja le logo, la langue et le bouton
   de commande : le lien s'efface, le logo mene deja a l'accueil. */
@media (max-width:420px){ .lien-accueil{display:none;} }

/* ==========================================================================
   Page d'accueil
   ========================================================================== */

.accueil-hero{text-align:center;}
.accueil-hero .hero-sub{margin-inline:auto;}
.accueil-hero .hero-cta{justify-content:center;}

.grille-produits{display:grid;gap:18px;margin-top:26px;}
@media (min-width:640px){ .grille-produits{grid-template-columns:repeat(2,1fr);} }
@media (min-width:980px){ .grille-produits{grid-template-columns:repeat(3,1fr);} }

.grille-vide{
  grid-column:1 / -1;
  margin:0;padding:22px;border-radius:var(--radius);
  border:1px dashed var(--ligne);
  color:var(--texte-3);text-align:center;
}
.grille-vide[hidden]{display:none;}

/* La carte entiere est un lien : sur un telephone, viser le seul bouton est
   penible ; toucher n'importe ou sur la carte doit mener au produit. */
.carte-produit{
  display:flex;flex-direction:column;
  border-radius:16px;overflow:hidden;
  background:var(--fond-2);border:1px solid var(--ligne);
  box-shadow:var(--ombre-douce);
  color:inherit;text-decoration:none;
  transition:border-color .15s,transform .15s,box-shadow .15s;
}
.carte-produit:hover{border-color:var(--orange);transform:translateY(-2px);box-shadow:var(--shadow-accent);}
.carte-produit:focus-visible{outline:2px solid var(--orange);outline-offset:3px;}

/* Le cadre de l'image a une proportion FIXE : sans elle, des photos de tailles
   differentes donneraient une grille en escalier, et chaque chargement
   d'image ferait sauter la page. */
.carte-image{aspect-ratio:480 / 450;background:var(--fond-1);}
.carte-image img{display:block;width:100%;height:100%;object-fit:cover;}

.carte-corps{display:flex;flex-direction:column;gap:8px;padding:16px;flex:1;}
.carte-corps h3{margin:0;font-size:1.06rem;color:var(--texte-0);}
.carte-accroche{margin:0;color:var(--texte-3);font-size:.9rem;line-height:1.5;}

/* Le prix est en dir="ltr" dans le HTML : « 6 500 DA » contient une espace,
   et l'algorithme bidirectionnel l'inverserait en contexte arabe. Le bloc est
   ensuite ramene au bord de lecture de la carte. */
.carte-prix{display:flex;align-items:baseline;gap:8px;margin:4px 0 0;flex-wrap:wrap;}
[dir="rtl"] .carte-prix{justify-content:flex-end;}
.carte-prix-val{font-weight:800;font-size:1.18rem;color:var(--texte-0);}
.carte-prix-ancien{color:var(--texte-3);font-size:.9rem;}
.carte-cta{margin-top:auto;}

/* ==========================================================================
   Page produit generique
   ========================================================================== */

.produit-nom{margin-bottom:.35em;}
.produit-image{
  display:block;width:100%;max-width:min(460px,86vw);height:auto;margin-inline:auto;
  aspect-ratio:500 / 468;object-fit:cover;
  border-radius:16px;box-shadow:var(--ombre-image);
}
.produit-image[hidden]{display:none;}

.produit-hero .prix{margin:18px 0 6px;}

.produit-points{list-style:none;padding:0;margin:20px 0 0;display:grid;gap:12px;}
.produit-points li{
  position:relative;padding-inline-start:30px;
  color:var(--texte-2);line-height:1.6;
}
.produit-points li::before{
  content:"\2713";position:absolute;inset-inline-start:0;inset-block-start:0;
  color:var(--vert);font-weight:800;font-variant-emoji:text;
}

.produit-description p{color:var(--texte-2);line-height:1.8;margin:0 0 1em;}
.produit-description p:last-child{margin-bottom:0;}

/* ---------- L'ORDRE DE LA FICHE, TEL QUE LE PROPRIETAIRE L'A DEMANDE ----------
   La bande roulante, la photo, le bouton d'achat, le prix, le formulaire, et la
   description tout en bas. C'est l'ordre d'une page qui vend : on voit
   l'article, on peut l'acheter, on apprend combien, on commande. Le texte se lit
   apres — par ceux qui hesitent encore, et par Google.

   UNE COLONNE ET PAS UNE GRILLE.
   .hero-grid posait la photo a cote du texte sur un ecran large. Ici il n'y a
   plus de texte a cote : il ne reste que le nom, la photo, le bouton et le prix,
   qui se suivent. Une colonne centree, la meme sur telephone et sur ordinateur,
   c'est ce que fait deja .produit-image avec sa largeur maximale.

   PAS DE text-align SUR LE BLOC ENTIER.
   Le nom d'un article est en dir="auto" : il peut etre arabe dans une page
   francaise. Centrer le bloc centre aussi son texte sans rien decider de son
   sens de lecture, alors qu'un alignement a gauche l'aurait force. */
.fiche-tete{padding:30px 0 34px;}
.fiche-colonne{max-width:560px;text-align:center;}
.fiche-colonne .produit-nom{
  margin:0 0 20px;
  font-size:clamp(1.3rem,1.05rem + 1.3vw,1.85rem);
}

/* Le bouton porte toute la largeur de la colonne : c'est le geste principal de
   la page, il ne se cherche pas. */
.fiche-achat{margin:24px 0 0;}
.fiche-achat .btn{width:100%;}

/* Le prix vient APRES le bouton, et il se centre avec la colonne. .prix est un
   flex : sans justify-content il resterait colle au bord de lecture, a gauche en
   francais et a droite en arabe, sous un bouton pleine largeur. */
.fiche-colonne .prix{justify-content:center;margin:18px 0 0;}

.introuvable{text-align:center;max-width:620px;}
.introuvable .btn{margin-top:18px;}


/* ==========================================================================
   Le logo envoye par le client, et le bouton d'appel
   --------------------------------------------------------------------------
   Aucune valeur de couleur ici : tout passe par les jetons de tokens.css.

   Ces deux regles servent aux trois pages : c'est la raison pour laquelle
   index.html charge desormais cette feuille.
   ========================================================================== */

/* L'image remplace le dessin : meme boite, pour que l'en-tete ne saute pas.

   LES DEUX REGLES [hidden] NE SONT PAS DECORATIVES. Un display: pose dans une
   classe l'emporte sur le [hidden] { display:none } du navigateur : sans
   elles, l'image de logo absente laissait une boite vide a gauche du logo
   dessine, et le bouton d'appel s'affichait vide sans numero. Le socle
   documente deja ce piege pour .sticky-cta et .wa-float ; on l'a refait. */
.logo-image[hidden]{display:none !important;}
.logo-image{
  display:block;width:30px;height:30px;flex-shrink:0;
  border-radius:8px;object-fit:cover;
}
@media (min-width:720px){ .logo-image{width:36px;height:36px;} }

/* Le bouton d'appel. Sur telephone, l'icone seule : la barre d'en-tete porte
   deja le menu de langue et le bouton de commande, et trois libelles a cote
   l'un de l'autre ne tiennent pas sous 380 px. */
.btn-appel[hidden]{display:none !important;}
.btn-appel{display:inline-flex;align-items:center;gap:8px;}
.btn-appel svg{width:18px;height:18px;flex-shrink:0;}
.btn-appel [data-tel-numero]{display:none;font-variant-numeric:tabular-nums;}
@media (min-width:900px){ .btn-appel [data-tel-numero]{display:inline;} }


/* ==========================================================================
   Les rayons de la page d'accueil
   --------------------------------------------------------------------------
   Un rayon = un titre et sa grille. C'est la forme d'accueil que la cliente
   connait : elle descend, elle lit « Bags », elle voit des sacs.

   Le titre est un <h2> : la page a un seul <h1>, celui de l'en-tete de page.
   Sauter un niveau ferait perdre le plan a un lecteur d'ecran, et a Google.
   ========================================================================== */

.rayon + .rayon{margin-top:52px;}

.rayon-titre{
  margin:0;
  font-size:clamp(1.25rem,1rem + 1.4vw,1.75rem);
  letter-spacing:.06em;text-transform:uppercase;
  color:var(--texte-0);
}

/* La grille suit deja son titre de 26 px : sans ce retrait, l'ecart entre le
   titre et ses produits serait le meme qu'entre deux rayons, et l'oeil ne
   saurait plus a quel titre appartient quelle rangee. */
.rayon .grille-produits{margin-top:18px;}

/* Le petit menu des rayons, sous l'en-tete. Il defile lateralement plutot que
   de passer a la ligne : sur un telephone, quatre rayons sur deux lignes
   repoussent les produits sous la ligne de flottaison. */
.nav-rayons{
  display:flex;gap:26px;
  overflow-x:auto;scrollbar-width:none;
  padding:12px 0;
  border-block-end:1px solid var(--ligne);
}
.nav-rayons::-webkit-scrollbar{display:none;}
.nav-rayons[hidden]{display:none !important;}

.lien-rayon{
  flex:0 0 auto;
  color:var(--texte-2);text-decoration:none;
  font-size:.82rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;
  padding-block:4px;
  border-block-end:1px solid transparent;
}
.lien-rayon:hover{color:var(--texte-0);border-block-end-color:var(--texte-0);}
.lien-rayon:focus-visible{outline:2px solid var(--orange-vif);outline-offset:3px;}


/* ==========================================================================
   LA VITRINE DES RAYONS — la page d'accueil du mode site
   --------------------------------------------------------------------------
   Une grande image par rayon et son nom, rien d'autre : la vignette entiere
   est le lien. Les rayons vont par deux ; quand il y en a un nombre impair,
   le dernier prend toute la largeur au lieu de rester seul a cote d'un trou.
   Cinq rayons donnent donc deux, deux, puis un large. L'ordre vient du
   dashboard.
   ========================================================================== */

.section-titre{margin:0;text-align:center;}
.section-sous-titre{
  margin:10px auto 0;max-width:46ch;
  text-align:center;color:var(--texte-3);font-size:.95rem;
}

.vitrine{display:grid;gap:16px;margin-top:34px;}
@media (min-width:640px){ .vitrine{grid-template-columns:repeat(2,1fr);} }

/* LA VITRINE DE L'ACCUEIL EST A DEUX COLONNES DES LE TELEPHONE.
   Elle s'empilait en une seule colonne sous 640 px : six rayons faisaient six
   ecrans a derouler avant le pied de page, et on ne voyait jamais deux rayons
   a la fois. Elle garde donc partout la meme lecture — un grand en tete, puis
   deux par ligne — et ce sont les proportions des vignettes qui changent, pas
   leur nombre par ligne.
   LA REGLE EST SUR #rayons, PAS SUR .vitrine, et c'est volontaire :
   /personnalise.html emploie la meme grille pour trois tuiles qui portent
   chacune trois lignes de texte. A deux par ligne sur un telephone, ce texte
   n'a plus la place de s'ecrire ; cette page-la garde sa colonne unique. */
#rayons{grid-template-columns:repeat(2,1fr);gap:10px;}
@media (min-width:640px){ #rayons{gap:16px;} }

.bloc-rayon{
  position:relative;display:block;overflow:hidden;
  aspect-ratio:16 / 9;
  background:var(--fond-1);
  color:inherit;text-decoration:none;
  /* Le reste du site a des angles nets (--radius:4px) ; les vignettes de
     rayon font exception a la demande de la cliente. overflow:hidden est
     deja la : c'est lui qui fait suivre l'arrondi a la photo. */
  border-radius:var(--radius-bloc);
}
/* Le bloc large prend la ligne entiere a toutes les tailles : sur une grille
   a une seule colonne, 1 / -1 ne change rien, et sur celle de l'accueil au
   telephone il fait la tete de vitrine. */
.bloc-rayon-large{grid-column:1 / -1;}
@media (min-width:640px){ .bloc-rayon-large{aspect-ratio:21 / 9;} }

/* SUR TELEPHONE, UNE VIGNETTE DE DEMI-LARGEUR EST UN PORTRAIT.
   A deux par ligne sur un ecran de 375 px, chaque vignette de l'accueil fait
   environ 170 px de large : en 16/9 elle serait haute de 96 px, une fente ou
   la photo ne se voit plus. Le format 4/5 lui rend de la hauteur, et c'est
   celui des photos de mode. La grande, elle, tient toute la largeur : 16/9
   lui suffit, 21/9 la rendrait trop basse sur un ecran etroit. */
@media (max-width:639px){
  #rayons .bloc-rayon-moyen{aspect-ratio:4 / 5;}
  #rayons .bloc-rayon-large{aspect-ratio:16 / 9;}
}

.bloc-rayon-image{position:absolute;inset:0;}
.bloc-rayon-image img{transition:transform .6s cubic-bezier(.2,.6,.2,1);}
.bloc-rayon:hover .bloc-rayon-image img{transform:scale(1.04);}

/* ---------- Allure 1 : une vraie banniere ----------
   Large, elle deborde du cadre et porte le nom en blanc. */
.bloc-rayon-photo .bloc-rayon-image img{width:100%;height:100%;object-fit:cover;}

/* ---------- Allure 2 : pas encore de banniere ----------
   La photo d'un article est en portrait et fait souvent 300 px de large :
   etiree sur un bandeau, elle devient une tache floue. On la pose donc
   ENTIERE, au milieu, sur le fond neutre — et le nom s'ecrit a l'encre, sans
   voile, parce qu'il n'y a rien de sombre sous lui.
   C'est ce qu'on voit tant qu'aucune banniere n'a ete envoyee depuis le
   dashboard : ca se tient, et ca dit qu'il manque une image. */
.bloc-rayon-vitrine{background:var(--fond-1);}
.bloc-rayon-vitrine .bloc-rayon-image{
  inset:0 0 52px;                      /* la place du nom, dessous */
  display:grid;place-items:center;padding:16px;
}
.bloc-rayon-vitrine .bloc-rayon-image img{
  width:auto;height:100%;max-width:100%;object-fit:contain;
}
.bloc-rayon-vitrine .bloc-rayon-image::after{content:none;}
.bloc-rayon-vitrine .bloc-rayon-corps{padding:12px 18px;}
.bloc-rayon-vitrine .bloc-rayon-titre{color:var(--texte-0);text-shadow:none;}

/* LE VOILE N'EST PAS UNE DECORATION.
   Les photos de mode sont souvent claires — un sac blanc sur fond blanc. Sans
   ce degrade, le nom du rayon et son bouton deviennent illisibles sur la
   moitie des images. Il ne monte qu'au bas du cadre : la photo reste nette la
   ou on la regarde. Sa couleur ne suit PAS le theme : le texte pose dessus est
   blanc dans les deux, parce qu'on ne sait pas ce que porte la photo. */
.bloc-rayon-photo .bloc-rayon-image::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(0,0,0,.62) 0%,rgba(0,0,0,.22) 42%,transparent 72%);
}

/* LE NOM, CENTRE EN BAS. Il etait cale en bas a gauche, sous un bouton. Seul,
   aligne a gauche, il pendait dans le coin d'une photo qui, elle, est centree ;
   au centre il se lit comme une legende, et la vignette tient debout aussi bien
   en francais qu'en arabe, ou le bord de depart change de cote. */
.bloc-rayon-corps{
  position:relative;z-index:1;height:100%;
  display:flex;flex-direction:column;justify-content:flex-end;align-items:center;
  text-align:center;
  padding:22px;
}
.bloc-rayon-photo .bloc-rayon-titre{color:#fff;}
.bloc-rayon-titre{
  margin:0;color:var(--texte-0);
  font-size:clamp(1.15rem,.9rem + 1.4vw,1.9rem);
  text-shadow:0 1px 14px rgba(0,0,0,.45);
}

/* A L'ECHELLE D'UNE DEMI-VIGNETTE DE TELEPHONE.
   22 px de marge et un nom de 18 px dans un bloc de 170 px de large : le nom
   passait a la ligne et le peu de photo qui restait disparaissait sous le
   texte. Seules les moyennes sont concernees — la grande occupe l'ecran
   entier, elle garde la mise en page d'origine. */
@media (max-width:639px){
  #rayons .bloc-rayon-moyen .bloc-rayon-corps{padding:12px 10px;}
  #rayons .bloc-rayon-moyen .bloc-rayon-titre{font-size:.98rem;}
  #rayons .bloc-rayon-moyen.bloc-rayon-vitrine .bloc-rayon-image{inset:0 0 42px;padding:10px;}
}
.bloc-rayon:focus-visible{outline:2px solid var(--orange-vif);outline-offset:3px;}

/* ---------- Un rayon annonce, pas encore ouvert ----------
   Il n'est pas cliquable (js/accueil.js en fait un <div>), donc il ne doit
   pas en avoir l'air : pas de zoom au survol, et la photo est retenue en
   arriere par un voile et un peu de gris. Ce qu'on lit dessus, c'est le nom
   du rayon puis la mention — l'ordre de la phrase « Vetements, prochainement ».
   Le curseur reste celui du texte : rien a viser ici. */
.bloc-rayon-bientot{cursor:default;}
.bloc-rayon-bientot:hover .bloc-rayon-image img{transform:none;}
.bloc-rayon-bientot .bloc-rayon-image img{filter:grayscale(.35) brightness(.92);}
.bloc-rayon-mention{
  margin:6px 0 0;
  font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  padding:5px 12px;border-radius:999px;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.55);
  color:#fff;
  backdrop-filter:blur(2px);
}
/* Sans banniere, le nom s'ecrit a l'encre sur le fond neutre : la pastille
   blanche y serait invisible. Elle reprend alors le trait du site. */
.bloc-rayon-vitrine .bloc-rayon-mention{
  background:transparent;border-color:var(--ligne);color:var(--texte-3);
}
:root[lang="ar"] .bloc-rayon-mention{letter-spacing:0;text-transform:none;font-size:.82rem;}
@media (max-width:639px){
  #rayons .bloc-rayon-moyen .bloc-rayon-mention{font-size:.62rem;padding:4px 9px;letter-spacing:.1em;}
}

/* Meme respiration que les cartes produit, decalee d'un bloc a l'autre. */
.bloc-rayon{animation:carte-arrive .5s both;animation-delay:calc(var(--i,0) * 70ms);}
@media (prefers-reduced-motion:reduce){
  .bloc-rayon{animation:none;}
  .bloc-rayon-image img,.bloc-rayon:hover .bloc-rayon-image img{transition:none;transform:none;}
}

/* ---------- Le retour vers la vitrine, en bas d'un rayon ---------- */
.retour-boutique{margin:38px 0 0;text-align:center;}