/* ==========================================================================
   EL MODE — la feuille de la marque
   --------------------------------------------------------------------------
   Chargée EN DERNIER, après tokens.css, palettes.css, styles.css et
   site-1.2.css. C'est une feuille de SURCHARGE : elle ne contient que ce qui
   distingue El Mode du socle, et rien qui puisse exister ailleurs.

   POURQUOI ELLE EXISTE PLUTÔT QU'UNE MODIFICATION DE styles.css
   styles.css est partagé avec les autres boutiques du socle : toute ligne
   ajoutée là-bas pour El Mode part chez les autres à la mise à jour suivante,
   et on la retrouve six mois plus tard sans savoir à qui elle sert.

   LA DIRECTION, EN UNE PHRASE
   Le logo d'El Mode est une ligne de capitales très fines et très espacées,
   dont le dernier E est dessiné en TROIS BARRES DÉTACHÉES, sans montant.
   C'est le seul geste graphique que la marque possède en propre. Tout le
   reste de la page se tait pour le laisser parler : pas de couleur, pas
   d'ombre, pas d'arrondi. Et ces trois barres reviennent comme filet sous les
   titres de rayon — la marque signe ses sections avec sa propre lettre.

   AUCUNE VALEUR HEX ICI. Tout passe par les jetons de css/tokens.css.
   ========================================================================== */

:root{
  /* Jost est un géométrique à la Futura : proportions larges, O circulaire,
     M à sommet plongeant — c'est la famille du logo. Elle ne sert qu'aux
     titres et aux libellés courts, en 300 et 400 : au-delà, l'interlettrage
     se referme et le mot perd sa respiration.
     Inter tient le texte courant et les formulaires, où la lisibilité à
     petite taille passe avant le caractère.
     Tajawal est l'arabe : géométrique lui aussi, il s'accorde à Jost. Son
     fichier n'est téléchargé que si de l'arabe s'affiche. */
  --police-titre:"Jost","Inter","Segoe UI",system-ui,sans-serif;
  --police-texte:"Inter","Segoe UI",system-ui,-apple-system,sans-serif;
  --police-arabe:"Tajawal","Noto Kufi Arabic","Segoe UI",sans-serif;

  /* Le socle pose une photo d'ambiance derrière toute la page, très atténuée :
     c'est ce qui donnait sa profondeur à une boutique de matériel. El Mode
     vend des photos de produits détourées sur blanc — une texture derrière
     elles les salit. La variable est vidée plutôt que la règle supprimée :
     l'Éditeur du dashboard peut toujours reposer une image. */
  --fond-image:none;
}

/* ==========================================================================
   La typographie
   ========================================================================== */

/* Le socle met "Cairo" en tête de la pile, police arabe qui passe devant tout
   le latin. On rend la main à Inter pour le français. */
body{font-family:var(--police-texte);}

h1,h2,h3,.logo,.btn,.eyebrow,.carte-corps h3,.lien-rayon,.marquee-groupe span,
.rayon-titre,.prix-val,.sticky-prix{font-family:var(--police-titre);}

/* Les titres s'écrivent comme le logo : capitales fines, très espacées. */
h1,h2,h3{font-weight:300;letter-spacing:.08em;}
h1,h2{text-transform:uppercase;}
h1{font-size:clamp(1.75rem,1.1rem + 2.6vw,3rem);line-height:1.12;}
h2{font-size:clamp(1.2rem,.95rem + 1.1vw,1.6rem);}
h3{font-weight:400;letter-spacing:.06em;}

.eyebrow{
  font-weight:400;font-size:.72rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--texte-3);
}

/* L'ARABE NE SE MET NI EN CAPITALES NI EN INTERLETTRAGE.
   C'est une écriture liée : espacer les lettres coupe les liaisons, et les
   capitales n'existent pas — la propriété ne fait qu'alourdir le rendu sans
   rien changer. Cette règle vaut pour tout ce qui est mis en capitales
   ailleurs dans cette feuille. */
:root[lang="ar"] body,
:root[lang="ar"] h1,:root[lang="ar"] h2,:root[lang="ar"] h3,
:root[lang="ar"] .btn,:root[lang="ar"] .eyebrow,
:root[lang="ar"] .carte-corps h3,:root[lang="ar"] .lien-rayon,
:root[lang="ar"] .rayon-titre,:root[lang="ar"] .marquee-groupe span{
  font-family:var(--police-arabe);
  text-transform:none;letter-spacing:0;
}
/* Le logo reste en lettres latines dans les deux langues : c'est un dessin,
   pas un mot à traduire. */
:root[lang="ar"] .logo{font-family:var(--police-titre);}

/* ==========================================================================
   LA SIGNATURE — les trois barres du E
   --------------------------------------------------------------------------
   Un dégradé répété plutôt que trois éléments : une seule pseudo-boîte, trois
   filets, et rien à poser dans le HTML de chaque page. La période est de 4 px
   et la hauteur de 9 : cela donne exactement trois barres, jamais deux ni
   quatre selon l'arrondi du navigateur.
   ========================================================================== */
.rayon-titre::after,
.accueil-hero h1::after{
  content:"";display:block;
  width:30px;height:9px;margin:16px auto 0;
  background-image:repeating-linear-gradient(to bottom,currentColor 0 1px,transparent 1px 4px);
  opacity:.45;
}

/* ==========================================================================
   Les formes
   --------------------------------------------------------------------------
   Le socle arrondit tout à 999 px. Le logo est fait de traits droits : les
   angles nets sont la marque, la pilule ne l'est pas.
   ========================================================================== */
.btn{
  border-radius:1px;
  font-weight:400;font-size:.76rem;
  letter-spacing:.16em;text-transform:uppercase;
  padding:15px 28px;
  /* Un libelle en capitales espacees casse mal : « LA BOUTIQUE » passait a la
     ligne des 470 px et le bouton devenait deux fois plus haut que son voisin,
     de travers dans l'en-tete. Les libelles sont courts, ils tiennent — sauf
     les trois exceptions juste dessous. */
  white-space:nowrap;
}

/* LES BOUTONS D'ACHAT, EUX, NE TIENNENT PLUS SUR UNE LIGNE.
   « Acheter maintenant » faisait deux mots ; « Remplir le formulaire pour
   confirmer la commande » en fait six, et en capitales espacees ca mesure
   plus de 500 px. Sur un telephone, le texte sortait de la pilule des deux
   cotes — on lisait « MPLIR LE FORMULAIRE POUR CONFIRMER LA COMMAND ». Ces
   trois boutons-la ont donc le droit de passer a la ligne, comme l'ont deja
   .pack-article-actions .btn et .carte-achat-acheter pour la meme raison.
   L'arabe, lui, tient sur une ligne : c'est une langue plus courte ici, et
   il n'a ni capitales ni interlettrage. */
.hero-cta .btn,
.fiche-achat .btn,
.sticky-cta .btn{
  white-space:normal;line-height:1.35;text-align:center;
}
/* La barre fixe partage sa ligne avec le prix : le bouton n'y a qu'un tiers
   de l'ecran. On y resserre le libelle plutot que d'empiler quatre lignes
   au-dessus du pouce. */
.sticky-cta .btn{font-size:.62rem;letter-spacing:.08em;padding:11px 14px;}
.btn-ghost{padding:11px 18px;}
.carte-produit,.carte-image,.produit-image{border-radius:0;}
.form-carte,.field input,.field select,.field textarea,.choix label,.qty-btn{border-radius:1px;}

/* ==========================================================================
   L'en-tête — le logo au centre, comme une devanture
   ========================================================================== */
.header-inner{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  gap:12px;padding:18px 0;
}
.header-avant{display:flex;align-items:center;gap:10px;justify-self:start;}
.header-actions{justify-self:end;}

.logo{display:block;gap:0;}
.logo-marque{
  /* L'HISTOIRE DE CETTE HAUTEUR, EN DEUX TEMPS.
     Elle avait ete BAISSEE (22 -> 19, et 26 -> 22 sur grand ecran) parce qu'a
     l'ancienne taille le trace tenait presque toute la hauteur de la barre et
     ecrasait le reste de la ligne. Cette raison a disparu le jour ou le panier
     est sorti de l'en-tete pour devenir un bouton flottant : la barre ne porte
     plus qu'un menu de langue a gauche et le logo au centre. Au telephone, la
     colonne de droite vide laissait le logo seul et minuscule dans une barre
     de 73 px — on ne lisait plus la devanture.
     On remonte donc d'un cran, sans revenir a l'ancienne valeur : 23 au lieu de
     19, 26 au lieu de 22. Si la cliente prefere l'ancien reglage, ce sont ces
     deux nombres, et eux seuls, qu'il faut rendre a 19 et 22. */
  display:block;width:auto;height:23px;
  /* Le fichier est un tracé NOIR sur transparent. Sur le thème sombre on
     l'inverse : du noir pur devient du blanc pur, sans halo ni contour gris.
     C'est plus fidèle que de servir deux fichiers, qui finiraient par
     diverger au premier changement de logo. */
  filter:none;
}
:root:not([data-theme="light"]) .logo-marque{filter:invert(1);}
@media (min-width:720px){ .logo-marque{height:26px;} }

/* Le menu de langue a change de cote : le socle le posait a droite de
   l'en-tete, et sa liste s'ouvrait donc alignee a DROITE. Ici il ouvre la
   ligne — alignee a droite, la liste sortait de l'ecran par la gauche et on ne
   lisait plus les noms de langues. Elle s'aligne desormais sur le bord de
   depart, qui suit le sens de lecture : a gauche en francais, a droite en
   arabe. */
.header-avant .langue-liste{inset-inline-end:auto;inset-inline-start:0;}

/* Le bouton de langue reprend les angles de la marque. */
.langue-bouton{border-radius:1px;font-weight:400;font-family:var(--police-titre);}
.langue-liste{border-radius:2px;box-shadow:var(--shadow);}
.langue-liste li{border-radius:1px;}
.langue-liste li.actif{font-weight:400;color:var(--texte-0);}

/* Le lien « Accueil » s'efface tôt : le logo mène déjà à l'accueil, et à
   450 px les quatre éléments de l'en-tête se disputaient la ligne. */
@media (max-width:560px){ .lien-accueil{display:none;} }
@media (max-width:420px){ .btn-ghost{padding:10px 12px;letter-spacing:.1em;} }

/* ==========================================================================
   Les hauts de page
   --------------------------------------------------------------------------
   Le socle pose un halo et un dégradé sur le hero : c'est ce qu'il faut pour
   vendre un pack d'alarmes, c'est exactement ce qu'il ne faut pas ici. Une
   photo de sac se détache sur du vide, pas sur un fond travaillé.
   ========================================================================== */
.hero,:root[data-theme="light"] .hero{background:var(--fond-0);}
.commande,:root[data-theme="light"] .commande{background:var(--fond-1);}
: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:var(--fond-2);}

/* La page d'accueil n'a pas d'article à montrer en grand : son en-tête de
   page est une ligne, pas un écran. */
.accueil-hero{padding:46px 0 30px;}
.accueil-hero h1{margin-bottom:0;}
.accueil-hero .hero-sub{
  max-width:46ch;margin:18px auto 0;
  color:var(--texte-3);font-size:.95rem;line-height:1.7;
}

/* Le bandeau défilant porte l'encre de la marque. */
.marquee{height:30px;}
.marquee-groupe span{
  font-size:.68rem;font-weight:400;letter-spacing:.2em;text-transform:uppercase;
  padding:0 16px;
}
.marquee-groupe span::after{width:3px;height:3px;margin-inline-start:18px;opacity:.5;}

/* ==========================================================================
   Les cartes de la grille
   --------------------------------------------------------------------------
   Pas de cadre, pas d'ombre : la photo tient la carte. Le seul mouvement de
   la grille est le très léger agrandissement de l'image au survol — c'est
   aussi ce qui dit que la carte entière est cliquable.
   ========================================================================== */
.carte-produit{
  background:transparent;border-color:transparent;box-shadow:none;
  transition:none;
}
.carte-produit:hover{transform:none;box-shadow:none;border-color:transparent;}

/* Le portrait 4:5 est le cadrage des boutiques de mode : un sac, une robe et
   une paire de chaussures y tiennent, un carré coupe les deux dernières. */
.carte-image{aspect-ratio:4 / 5;background:var(--fond-1);overflow:hidden;}
.carte-image img{transition:transform .5s cubic-bezier(.2,.6,.2,1);}
.carte-produit:hover .carte-image img{transform:scale(1.04);}
@media (prefers-reduced-motion:reduce){
  .carte-image img,.carte-produit:hover .carte-image img{transition:none;transform:none;}
}

.carte-corps{padding:14px 2px 0;gap:5px;}
.carte-corps h3{
  font-size:.82rem;font-weight:400;letter-spacing:.14em;text-transform:uppercase;
  color:var(--texte-1);
}
.carte-accroche{font-size:.82rem;color:var(--texte-3);}
.carte-prix-val{font-size:.95rem;font-weight:400;letter-spacing:.04em;}
.carte-prix-ancien{font-size:.82rem;}

/* Le bouton de la carte ne s'affiche pas : la carte entière est déjà un lien,
   et une grille de neuf boutons noirs mange les neuf photos. Il reste dans le
   HTML pour les lecteurs d'écran, qui annoncent alors l'action du lien. */
.carte-cta{
  position:absolute;width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;
}

/* L'arrivée des cartes : une seule respiration, décalée d'une carte à
   l'autre. js/accueil.js pose --i sur chacune, plafonné : sans plafond, la
   dernière carte d'un rayon de vingt arriverait une seconde après la
   première, et on croirait la page en panne. */
@keyframes carte-arrive{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
.carte-produit{animation:carte-arrive .5s both;animation-delay:calc(var(--i,0) * 45ms);}
@media (prefers-reduced-motion:reduce){ .carte-produit{animation:none;} }

/* ==========================================================================
   Les rayons
   ========================================================================== */
.rayon + .rayon{margin-top:64px;}
.rayon-titre{
  margin:0 0 22px;font-size:clamp(1.05rem,.9rem + .7vw,1.35rem);
  letter-spacing:.24em;
}
.rayon .grille-produits{margin-top:0;}

/* Les rayons sont centres comme le logo et les titres. justify-content ne
   gene pas le defilement : quand la liste deborde, le navigateur repasse au
   bord de depart tout seul. */
.nav-rayons{gap:30px;padding:14px 0;justify-content:center;}
.lien-rayon{font-weight:400;font-size:.74rem;letter-spacing:.2em;}

/* ==========================================================================
   La page d'un article
   ========================================================================== */
.produit-nom{letter-spacing:.06em;}
.prix-val{font-weight:400;letter-spacing:.03em;}

/* La coche des points reprend l'encre de la page. Le vert du socle est une
   couleur de STATUT : ici la liste ne dit pas qu'il s'est passé quelque
   chose, elle énumère ce qu'il y a dans la boîte. */
.produit-points li::before{color:var(--texte-0);font-weight:400;}
.produit-points li{color:var(--texte-2);}

/* ==========================================================================
   Le pied de page
   ========================================================================== */
.site-footer{padding:52px 0 90px;}
.site-footer strong{letter-spacing:.3em;font-weight:400;font-family:var(--police-titre);}

/* Le logo signe le bas de page. Un peu plus grand qu'en haut : ici il n'a pas
   de barre a partager, et c'est la derniere chose qu'on voit. La regle de
   hauteur de l'en-tete s'applique aussi a lui, on la reprend donc apres. */
.footer-logo{margin:0 0 16px;}
.footer-logo .logo-marque{height:28px;margin-inline:auto;}
@media (min-width:720px){ .footer-logo .logo-marque{height:32px;} }

/* LE NUMERO EST LA POUR ETRE COMPOSE, DONC IL SE LIT DE LOIN.
   Il sortait a la taille du texte de pied de page (.88rem) et se perdait entre
   deux lignes grises. Il passe devant, le reste de la ligne reste en retrait. */
.footer-contact{
  margin:18px 0 0;
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;
  gap:6px 18px;
}
.footer-tel{
  font-family:var(--police-titre);
  font-size:1.35rem;letter-spacing:.06em;
  color:var(--texte-0);text-decoration:none;
}
.footer-tel:hover{text-decoration:underline;}
@media (min-width:720px){ .footer-tel{font-size:1.5rem;} }

/* ==========================================================================
   Le téléphone
   --------------------------------------------------------------------------
   Deux colonnes dès 380 px. Le socle passe à une colonne sous 640 : c'est ce
   qu'il faut quand chaque carte porte un argumentaire. Ici une carte porte une
   photo, un nom et un prix — à une colonne, il faut huit écrans pour voir huit
   articles, et on n'en voit jamais huit.
   ========================================================================== */
@media (max-width:639px){
  .grille-produits{grid-template-columns:repeat(2,1fr);gap:22px 12px;}
  .carte-corps{padding-top:10px;}
  .carte-corps h3{font-size:.72rem;letter-spacing:.1em;}
  /* L'accroche saute : à 170 px de large elle prend trois lignes et repousse
     le prix, qui est ce qu'on vient chercher. Elle reste sur la page de
     l'article, où il y a la place de la lire. */
  .carte-accroche{display:none;}
  .carte-prix-val{font-size:.85rem;}
  .rayon + .rayon{margin-top:44px;}
  .accueil-hero{padding:32px 0 22px;}
}