/* ==========================================================================
   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;}

/* ==========================================================================
   LES PHOTOS D'UN ARTICLE — LA PRINCIPALE ET LA GALERIE, DANS UN CARROUSEL
   --------------------------------------------------------------------------
   CE QUI A CHANGÉ. Les photos de la colonne `galerie` s'alignaient en vignettes
   carrées, deux par ligne sur téléphone et quatre au-delà, dans une section à
   part. On y voyait quatre timbres-poste. Demande du propriétaire : qu'elles
   défilent au doigt avec la photo principale, chacune en pleine largeur — le
   geste qu'on fait sur n'importe quelle boutique depuis un téléphone.

   CE BLOC NE DESSINE RIEN DE NEUF. Le carrousel lui-même (.carrousel,
   .carrousel-piste, .carrousel-points) vit dans css/styles.css, partagé avec
   le visuel principal de /index.html. Ces trois règles-ci ne font que lui
   donner la largeur de .produit-image : c'est la photo qui donne sa taille à
   une fiche, et deux largeurs pour la même place se verraient au passage
   d'une diapositive à l'autre.

   LA LARGEUR EST SUR LA PISTE ET PAS SUR LE CADRE. Borner .carrousel suffirait
   à l'œil, mais les pastilles sont dans le même cadre : elles se seraient
   centrées sur la photo au lieu de la colonne. Elles restent larges, la piste
   se borne, et tout reste centré dans les deux sens de lecture.
   ========================================================================== */
.produit-media{margin:0;}
.produit-media .carrousel-piste{
  max-width:min(460px,86vw);margin-inline:auto;
}
/* PLUS DE LEGENDE SOUS LES PHOTOS. Elle nommait la piece du temps ou le bloc
   s'appelait « ce que contient ce produit » ; ce sont les autres photos du
   meme article, et il n'y a plus de nom a saisir nulle part. */

/* ==========================================================================
   LA COULEUR DE L'ARTICLE — sous la photo, dans la vitrine
   --------------------------------------------------------------------------
   Demande du proprietaire : un sac existe en noir et en beige, et la cliente
   doit dire lequel avant de commander. Les noms viennent de la colonne
   `couleurs` du produit, remplie dans le dashboard ; le bloc reste `hidden`
   tant qu'elle est vide, et aucune regle ici ne le montre.

   LA RANGEE A QUITTE LE FORMULAIRE POUR LA VITRINE, puis elle est descendue
   SOUS LE PRIX — deux demandes du proprietaire, et la meme raison : une
   couleur se choisit en REGARDANT l'article et ce qu'il coute, pas en
   remplissant un formulaire. Ce qui change ici : le bloc porte sa marge en
   HAUT et plus en bas — c'est du prix qu'il doit s'ecarter — et il a son
   propre titre, au lieu d'emprunter celui des blocs du formulaire
   (.pack-bloc-titre, css/pack.css).

   CE SONT LES BOUTONS DE .perso-taille, A L'IDENTIQUE — meme cible de 38 px de
   haut, meme fond plein pour le choix, meme inversion du texte. Les deux font
   le meme geste, « choisir une variante avant d'envoyer », et le site n'en a
   qu'un seul dessin. Les regles ne sont pas partagees parce que css/perso.css
   n'est charge que sur les trois pages personnalisees, et /produit.html n'en
   est pas : les reunir aurait demande de charger une feuille entiere pour
   quinze lignes.

   LE ROND PORTE LE CHOIX, LE MOT NE SERT PLUS QU'A CEUX QUI NE LE VOIENT PAS.
   Demande du proprietaire : « des petits ronds avec la couleur voulue », sans
   le nom ecrit a cote. Le nom reste en infobulle et en aria-label, dans la
   langue de la page (js/nuancier.js), et c'est toujours lui qui part dans la
   commande — deux beiges voisins a l'ecran se disent beige tous les deux au
   colisage.
   ========================================================================== */
.fiche-couleurs{margin:22px 0 0;}

/* LE TITRE EST UNE ETIQUETTE, PAS UN TITRE DE SECTION.
   C'est un <h2> dans le plan du document — il annonce un choix — mais il se
   lit comme le label d'un champ : le geste est juste en dessous, et un titre
   de 2 rem au-dessus de trois pastilles aurait pese plus lourd que ce qu'il
   annonce. D'ou le dessin de .pack-bloc-titre, repris ici a l'identique pour
   que le formulaire et la vitrine nomment leurs choix de la meme facon.
   SANS LUI, UNE RANGEE DE RONDS NE DIT PAS CE QU'ELLE ATTEND : c'est la seule
   phrase qui reste pour annoncer qu'il faut choisir. */
.fiche-couleurs-titre{
  margin:0 0 10px;font-size:.72rem;font-weight:400;
  letter-spacing:.2em;text-transform:uppercase;color:var(--texte-3);
}
:root[lang="ar"] .fiche-couleurs-titre{letter-spacing:0;text-transform:none;font-size:.86rem;}

.fiche-couleurs-choix{
  display:flex;flex-wrap:wrap;gap:12px;
  margin-top:12px;
}

/* DANS LA VITRINE, LA RANGEE SE CENTRE AVEC SA COLONNE.
   .fiche-colonne est centree : sans justify-content, les pastilles restaient
   collees au bord de lecture — a gauche en francais, a droite en arabe — sous
   une photo et un prix centres. Meme correction que pour le prix. */
.fiche-colonne .fiche-couleurs-choix{justify-content:center;}

/* 38 px : c'est la cible tactile tenable, et elle n'a pas bouge en devenant
   ronde. En dessous, on choisit beige en voulant noir, et la commande part
   fausse. */
.fiche-couleur{
  display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;min-height:38px;padding:0;
  background:var(--fond-2);color:var(--texte-1);
  border:1px solid var(--ligne);border-radius:50%;
  font:inherit;font-size:.86rem;
  cursor:pointer;
  transition:transform .14s,box-shadow .14s,border-color .18s;
}
.fiche-couleur:hover{transform:scale(1.08);}
.fiche-couleur:focus-visible{outline:2px solid var(--orange-vif);outline-offset:3px;}

/* LE CHOIX SE VOIT SANS LIRE, ET SANS CACHER LA COULEUR. Le fond plein des
   boutons d'avant recouvrait la teinte qu'on venait de choisir : c'est un
   anneau qui l'entoure, pose a distance pour tenir aussi sur un rond noir. */
.fiche-couleur-choisie,
.fiche-couleur-choisie:hover{
  box-shadow:0 0 0 2px var(--fond-0),0 0 0 4px var(--orange-vif);
}

/* UNE PASTILLE BLANCHE SUR FOND BLANC EST UNE PASTILLE INVISIBLE — et le blanc
   est une des deux couleurs qu'une boutique de mode vend le plus. Le contour
   marque ne va qu'aux teintes tres claires : js/nuancier.js les reconnait a
   leur clarte, pas a leur code. */
.fiche-couleur-claire{border-color:var(--texte-3);}

/* UNE COULEUR SANS CODE GARDE SON MOT : elle ne vient pas du nuancier mais
   d'une saisie a la main dans Supabase, et un rond vide ne se choisit pas des
   yeux. Le bouton reprend alors sa forme de pilule. */
.fiche-couleur-mot{
  width:auto;padding:0 12px;border-radius:var(--radius);
  letter-spacing:.04em;
}
.fiche-couleur-mot.fiche-couleur-choisie{
  background:var(--orange-vif);color:var(--sur-orange);
  border-color:var(--orange-vif);font-weight:600;box-shadow:none;
}

/* L'arabe ne prend pas d'interlettrage : espacer une ecriture liee coupe ses
   liaisons. Meme regle que .perso-taille. */
:root[lang="ar"] .fiche-couleur-mot{letter-spacing:0;font-size:.92rem;}

/* ---------- LA TAILLE ET LA POINTURE ----------
   LES MÊMES BOUTONS QUE .fiche-couleur-mot — la forme pilule d'une couleur
   sans code —, et c'est voulu : un seul dessin de « choisir une variante »
   dans tout le site, celui de .perso-taille.
   ON NE RÉUTILISE PAS LA CLASSE TELLE QUELLE parce que .fiche-couleur impose
   38 px de large et un rond : une pointure « 42 » y tiendrait, « XXL » non.
   Elle déborderait du cercle sans que rien ne le signale. */
.fiche-variantes-choix{
  display:flex;flex-wrap:wrap;gap:10px;
  margin-top:12px;
}

/* Dans la vitrine, la rangée se centre avec sa colonne — même correction que
   pour les pastilles et pour le prix. */
.fiche-colonne .fiche-variantes-choix{justify-content:center;}

/* 38 px de haut : la même cible tactile que les pastilles. En dessous, on
   choisit du L en voulant du M, et le colis part faux. */
.fiche-variante{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:48px;min-height:38px;padding:0 14px;
  background:var(--fond-2);color:var(--texte-1);
  border:1px solid var(--ligne);border-radius:var(--radius);
  font:inherit;font-size:.86rem;letter-spacing:.04em;
  cursor:pointer;
  transition:background .14s,color .14s,border-color .18s;
}
.fiche-variante:hover{border-color:var(--texte-3);}
.fiche-variante:focus-visible{outline:2px solid var(--orange-vif);outline-offset:3px;}

/* LE CHOIX SE VOIT SANS LIRE : fond plein, comme une couleur-mot choisie. Un
   anneau comme celui des pastilles n'aurait aucun sens ici — il n'y a aucune
   teinte à ne pas recouvrir. */
.fiche-variante-choisie,
.fiche-variante-choisie:hover{
  background:var(--orange-vif);color:var(--sur-orange);
  border-color:var(--orange-vif);font-weight:600;
}

/* L'arabe ne prend pas d'interlettrage : espacer une écriture liée coupe ses
   liaisons. Même règle que .fiche-couleur-mot et .perso-taille. */
:root[lang="ar"] .fiche-variante{letter-spacing:0;font-size:.92rem;}