/* ============================================================================
   SOCLE 2.1 — LA COUCHE CATALOGUE

   OU ELLE SE PLACE DANS LA PILE
     tokens.css      les couleurs, par ROLE          ← la charte de couleur
     palettes.css    les six palettes du dashboard
     styles.css      la mise en page du socle        ← ne pas modifier
     site-1.2.css    ce que la 1.2 a ajoute          ← ne pas modifier
     site-1.4.css    ce que la 1.4 a ajoute          ← ne pas modifier
     panier.css      le panier et sa pastille
     CE FICHIER      l'en-tete, le menu, la grille, la fiche, le compte
     marque.css      LA CHARTE DU MAGASIN            ← livree vide, a ecrire

   L'ordre compte : une feuille de surcharge placee avant celle qu'elle corrige
   ne corrige rien. marque.css passe EN DERNIER, toujours.

   AUCUNE COULEUR N'EST ECRITE ICI — regle n°3 du socle. Tout passe par les
   variables de tokens.css. Une seule exception, commentee sur place : les
   etiquettes de gamme, qui empruntent les couleurs de statut deja definies.

   CE QUI N'EST PAS ICI
   La grille des vignettes de la 1.4 (.carte-produit) : elle sert encore aux
   boutiques bâties sur le socle precedent, et la 2.1 dessine ses propres
   cartes (.carte-piece), parce qu'une piece montre son nom et sa gamme la ou
   un vetement ne montrait que son prix.
   ========================================================================== */

/* ===========================================================================
   1. L'EN-TETE
   =========================================================================== */

/* QUATRE ZONES SUR UNE LIGNE, ET LA RECHERCHE PREND LA PLACE QUI RESTE.
   `1fr` sur la seule recherche : le menu, le logo et les actions gardent
   exactement leur largeur, et c'est le champ qui s'etire. Un en-tete ou le
   champ aurait une largeur fixe se disloque a chaque langue. */
.entete-ligne{
  display:grid;
  grid-template-columns:auto auto 1fr auto;
  align-items:center;
  gap:14px;
  padding:10px 0;
}

.entete-logo{display:inline-flex;align-items:center;}
.entete-logo .logo-marque{max-height:26px;width:auto;}

.entete-actions{display:flex;align-items:center;gap:6px;}

/* Les boutons de l'en-tete : la meme boite pour le menu, le compte et le
   panier, pour que la ligne ne saute pas quand l'un d'eux disparait. */
.entete-icone{
  display:inline-flex;align-items:center;gap:7px;
  min-width:42px;min-height:42px;
  padding:0 10px;
  border:0;background:transparent;color:var(--texte-1);
  border-radius:var(--radius);
  cursor:pointer;text-decoration:none;
  font:inherit;font-size:.9rem;
  position:relative;
}
.entete-icone:hover{color:var(--orange);}
.entete-icone:focus-visible{outline:2px solid var(--orange);outline-offset:2px;}
.entete-icone svg{width:22px;height:22px;flex:none;}

.entete-nom{max-width:9ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

/* La remise se lit d'un coup d'oeil, et elle est le seul endroit du site ou
   un compte connecte se distingue a l'oeil nu. */
.entete-remise{
  font-weight:700;font-size:.78rem;
  padding:2px 6px;border-radius:999px;
  background:var(--voile-vert);color:var(--vert);
}
.compte-connecte{color:var(--texte-0);}

/* Le compteur du panier reprend .panier-compte de css/panier.css, qui le
   dessinait sur un bouton flottant. Ici il est pose sur l'icone de l'en-tete :
   on ne redefinit que ce qui change de place. */
.entete-panier{position:relative;}
.entete-panier .panier-compte{position:absolute;top:2px;inset-inline-end:2px;}

/* ===========================================================================
   2. LA RECHERCHE
   =========================================================================== */

.recherche{position:relative;display:flex;align-items:center;min-width:0;}

.recherche-champ{
  width:100%;
  padding:11px 44px 11px 14px;
  background:var(--fond-2);
  border:1px solid var(--ligne);
  border-radius:999px;
  color:var(--texte-1);font:inherit;font-size:.95rem;
}
.recherche-champ::placeholder{color:var(--texte-champ);}
.recherche-champ:focus{outline:2px solid var(--orange);outline-offset:1px;border-color:transparent;}

/* Le bouton est DANS le champ, pas a cote : une loupe separee coute 44 px de
   largeur sur un telephone, exactement ceux qui manquent au champ. */
.recherche-bouton{
  position:absolute;inset-inline-end:4px;
  display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;
  border:0;background:transparent;color:var(--texte-3);
  border-radius:50%;cursor:pointer;
}
.recherche-bouton:hover{color:var(--orange);}
.recherche-bouton svg{width:19px;height:19px;}

/* La liste des suggestions. Elle flotte au-dessus de la page : z-index
   au-dessus de l'en-tete, sinon elle passe dessous des la premiere lettre. */
.recherche-liste{
  position:absolute;top:calc(100% + 6px);inset-inline-start:0;
  width:100%;max-height:min(60vh,380px);overflow-y:auto;
  margin:0;padding:6px;list-style:none;
  background:var(--fond-1);
  border:1px solid var(--ligne);
  border-radius:var(--radius-bloc);
  box-shadow:var(--ombre-carte);
  z-index:60;
}
.recherche-liste li{
  display:flex;align-items:center;gap:10px;
  padding:10px 12px;border-radius:var(--radius);
  cursor:pointer;color:var(--texte-2);font-size:.94rem;
}
.recherche-liste li.actif,
.recherche-liste li:hover{background:var(--voile-accent-doux);color:var(--texte-0);}
.suggestion-icone{color:var(--texte-3);flex:none;}
.suggestion-texte{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.suggestion-marque{color:var(--texte-3);font-size:.82rem;flex:none;}

/* ===========================================================================
   3. LE PANNEAU DE NAVIGATION
   =========================================================================== */

.menu-fond{
  position:fixed;inset:0;z-index:70;
  background:rgba(0,0,0,.5);
}

.menu-panneau{
  position:fixed;inset-block:0;inset-inline-start:0;z-index:80;
  width:min(360px,88vw);
  overflow-y:auto;
  padding:14px 16px 40px;
  background:var(--fond-1);
  border-inline-end:1px solid var(--ligne);
  box-shadow:var(--shadow);
}

/* Le defilement de la page est bloque pendant que le panneau est ouvert :
   sans ca, on fait defiler l'arriere-plan en voulant parcourir le menu, et on
   perd sa place dans la grille en refermant. */
.menu-ouvert,.menu-ouvert body{overflow:hidden;}

.menu-tete{
  display:flex;align-items:center;justify-content:space-between;
  padding-bottom:10px;margin-bottom:8px;
  border-bottom:1px solid var(--ligne);
}
.menu-titre{font-weight:700;color:var(--texte-0);}

.menu-section{
  font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;
  color:var(--texte-3);text-align:start;
  margin:18px 0 6px;
}

.menu-liste{display:flex;flex-direction:column;}

.menu-lien{
  display:block;padding:10px 10px;
  color:var(--texte-2);text-decoration:none;
  border-radius:var(--radius);font-size:.95rem;
}
.menu-lien:hover{background:var(--voile-accent-doux);color:var(--texte-0);}

/* Les marques s'ouvrent une a la fois, avec le <details> du navigateur : il
   fait ce travail au clavier comme a la souris, sans une ligne de script. */
.menu-marque summary{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:10px;cursor:pointer;
  color:var(--texte-1);font-weight:600;font-size:.95rem;
  border-radius:var(--radius);list-style:none;
}
.menu-marque summary::-webkit-details-marker{display:none;}
.menu-marque summary:hover{background:var(--voile-accent-doux);}
.menu-marque[open] summary{color:var(--orange);}
.menu-compte{
  font-size:.75rem;font-weight:700;
  padding:1px 7px;border-radius:999px;
  background:var(--voile-accent-doux);color:var(--texte-3);
}
.menu-modeles{padding-inline-start:10px;border-inline-start:1px solid var(--ligne);margin:2px 0 8px 10px;}
.menu-lien-modele{font-size:.9rem;padding:8px 10px;}
.menu-lien-tous{color:var(--orange);font-size:.88rem;}

/* ===========================================================================
   4. LA VITRINE
   =========================================================================== */

.vitrine-tete{padding:34px 0 10px;text-align:center;}
.vitrine-tete h1{margin-bottom:.35em;}
.vitrine-sub{
  color:var(--texte-3);max-width:60ch;margin:0 auto;
  font-size:clamp(.95rem,2vw,1.05rem);
}

.section-titre{text-align:start;font-size:clamp(1.15rem,2.6vw,1.5rem);margin-bottom:.8em;}
.section-tete{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.section-tete .section-titre{margin-bottom:0;}
.section-mince{padding:14px 0;}

/* ---- Les tuiles des types de piece ---- */

/* auto-fill et une largeur MINIMALE : deux colonnes sur un telephone, six sur
   un ecran large, sans une seule requete media. Une tuile n'a pas de largeur
   a elle, elle a une largeur minimale en dessous de laquelle son nom ne tient
   plus sur une ligne. */
.grille-tuiles{
  display:grid;gap:10px;
  grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
}

.tuile{
  position:relative;overflow:hidden;
  display:flex;align-items:flex-end;
  min-height:96px;padding:12px;
  background:var(--fond-2);
  border:1px solid var(--ligne);
  border-radius:var(--radius-bloc);
  text-decoration:none;
  transition:border-color .16s ease,transform .16s ease;
}
.tuile:hover{border-color:var(--orange);transform:translateY(-2px);}
.tuile-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55;}
.tuile-nom{position:relative;color:var(--texte-0);font-weight:700;font-size:.98rem;line-height:1.2;}

/* LE FILIGRANE REMPLACE LA PHOTO MANQUANTE.
   Deux lettres, tres grandes, tres pales : la tuile a une matiere, elle ne
   ressemble pas a un carre gris, et on voit tout de suite qu'il manque une
   photo sans que ce soit laid. */
.tuile-filigrane{
  position:absolute;inset-inline-end:-6px;bottom:-18px;
  font-size:4.2rem;font-weight:800;line-height:1;
  color:var(--texte-1);opacity:.07;pointer-events:none;
}
.tuile-tout{background:var(--voile-orange-doux);border-color:var(--orange);}
.tuile-tout .tuile-nom{color:var(--orange);}

/* ---- Les rangees de modeles ---- */

/* DU DEFILEMENT NATIF, PAS UN DIAPORAMA.
   scroll-snap accroche chaque vignette : on pousse au doigt et ca s'arrete
   proprement. Rien n'avance tout seul — une rangee qui bouge pendant qu'on
   lit est la premiere cause d'un clic a cote. */
.rangee{
  display:flex;gap:10px;
  overflow-x:auto;scroll-snap-type:x mandatory;
  padding:4px 2px 12px;
  scrollbar-width:thin;
}
.rangee > *{scroll-snap-align:start;}

.rangee-fleches{display:flex;gap:6px;}
.fleche{
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;
  border:1px solid var(--ligne);border-radius:50%;
  background:var(--fond-2);color:var(--texte-2);cursor:pointer;
}
.fleche:hover:not(:disabled){border-color:var(--orange);color:var(--orange);}
.fleche:disabled{opacity:.35;cursor:default;}
.fleche svg{width:17px;height:17px;}

.vignette-modele{
  flex:0 0 auto;width:120px;
  display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:12px 8px;
  background:var(--fond-2);
  border:1px solid var(--ligne);
  border-radius:var(--radius-bloc);
  text-decoration:none;text-align:center;
}
.vignette-modele:hover{border-color:var(--orange);}
.vignette-image{
  display:flex;align-items:center;justify-content:center;
  width:64px;height:64px;color:var(--texte-3);
}
.vignette-image img{width:100%;height:100%;object-fit:contain;}
.vignette-image svg{width:40px;height:40px;}
.vignette-nom{
  color:var(--texte-1);font-size:.82rem;font-weight:600;line-height:1.25;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}

/* ---- Les marques ---- */

.grille-marques{
  display:grid;gap:10px;
  grid-template-columns:repeat(auto-fill,minmax(130px,1fr));
}
.tuile-marque{
  display:flex;align-items:center;justify-content:center;
  min-height:74px;padding:10px;
  background:var(--fond-2);
  border:1px solid var(--ligne);
  border-radius:var(--radius-bloc);
  text-decoration:none;
}
.tuile-marque:hover{border-color:var(--orange);}
.tuile-marque img{max-width:100%;max-height:40px;object-fit:contain;}
/* SANS LOGO, LE NOM — et il doit avoir l'air voulu, pas d'avoir rate son
   image. D'ou la graisse et l'espacement : c'est un lettrage, pas un texte. */
.tuile-marque-nom{
  color:var(--texte-1);font-weight:700;font-size:1rem;
  letter-spacing:.04em;text-transform:uppercase;
}

/* ---- Le bandeau du compte reparateur ---- */

.bandeau-pro{
  padding:14px 18px;
  background:var(--voile-orange-doux);
  border:1px solid var(--ligne);
  border-radius:var(--radius-bloc);
}
.bandeau-pro p{
  margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;
  color:var(--texte-2);font-size:.95rem;
}
.bandeau-pro-remise{color:var(--vert);font-size:1.3rem;font-weight:800;}

/* ===========================================================================
   5. LA GRILLE DU CATALOGUE
   =========================================================================== */

.fil{
  display:flex;flex-wrap:wrap;align-items:center;gap:6px;
  width:min(1120px,92vw);margin:14px auto 0;
  font-size:.84rem;color:var(--texte-3);
}
.fil a{color:var(--texte-3);text-decoration:none;}
.fil a:hover{color:var(--orange);}
/* Le chevron est pose par le CSS et non ecrit dans le HTML : il se retourne
   tout seul en arabe (voir la section RTL). */
.fil > * + *::before{content:"›";margin-inline-end:6px;color:var(--texte-4);}
.fil [aria-current]{color:var(--texte-1);}

.catalogue-tete{
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
  gap:8px 16px;margin-bottom:16px;
}
.catalogue-tete h1{
  font-size:clamp(1.4rem,3.4vw,2rem);margin:0;text-align:start;
}
.catalogue-compte{margin:0;color:var(--texte-3);font-size:.9rem;}

/* ---- Les filtres ---- */

.filtres{display:flex;flex-direction:column;gap:8px;margin-bottom:20px;}

/* Les puces defilent a l'horizontale plutot que de passer a la ligne : neuf
   types sur trois lignes repoussent la premiere vignette hors de l'ecran sur
   un telephone, et c'est la vignette qu'on est venu voir. */
.filtre-rangee{
  display:flex;gap:7px;overflow-x:auto;
  padding-bottom:4px;scrollbar-width:thin;
}

.puce{
  flex:0 0 auto;
  display:inline-flex;align-items:center;
  padding:7px 13px;
  background:var(--fond-2);
  border:1px solid var(--ligne);
  border-radius:999px;
  color:var(--texte-2);text-decoration:none;
  font-size:.86rem;white-space:nowrap;
}
.puce:hover{border-color:var(--orange);color:var(--texte-0);}
.puce-active{
  background:var(--orange);border-color:var(--orange);color:var(--sur-orange);font-weight:600;
}

/* ---- Les vignettes de piece ---- */

.grille-pieces{
  display:grid;gap:12px;
  grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
}

.carte-piece{
  display:flex;flex-direction:column;
  background:var(--fond-2);
  border:1px solid var(--ligne);
  border-radius:var(--radius-bloc);
  overflow:hidden;
  animation:carte-arrive .32s ease both;
  animation-delay:calc(var(--i,0) * 45ms);
}
@keyframes carte-arrive{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
/* Une animation d'arrivee n'a rien d'essentiel : qui demande moins de
   mouvement n'en a aucun. */
@media (prefers-reduced-motion:reduce){
  .carte-piece{animation:none;}
  .rangee{scroll-behavior:auto;}
}

.carte-piece:hover{border-color:var(--orange);}
.carte-piece-lien{display:block;text-decoration:none;color:inherit;}

.carte-image{
  position:relative;
  display:flex;align-items:center;justify-content:center;
  aspect-ratio:4/3;
  background:var(--fond-1);
  overflow:hidden;
}
.carte-image img{width:100%;height:100%;object-fit:cover;}
.carte-image-creux{
  font-size:2.4rem;font-weight:800;letter-spacing:.06em;
  color:var(--texte-1);opacity:.12;
}

.carte-corps{display:flex;flex-direction:column;gap:6px;padding:11px 12px 12px;}

.carte-nom{
  margin:0;font-size:.9rem;font-weight:600;line-height:1.3;color:var(--texte-1);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  /* DEUX LIGNES RESERVEES, TOUJOURS. Sans cette hauteur minimale, une carte a
     nom court et sa voisine a nom long alignent leurs prix a deux hauteurs
     differentes, et la grille a l'air cassee. */
  min-height:2.6em;
}

.carte-prix{
  margin:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:7px;
}
.carte-prix-val{font-size:1.05rem;font-weight:800;color:var(--texte-0);}
.carte-prix-ancien{color:var(--texte-4);font-size:.84rem;}
.carte-prix-pro{
  font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;
  padding:2px 6px;border-radius:999px;
  background:var(--voile-vert);color:var(--vert);
}
.carte-prix-rupture{color:var(--ambre);font-weight:600;font-size:.92rem;}
.carte-rupture .carte-image{opacity:.55;}

.carte-actions{display:flex;gap:7px;padding:0 12px 12px;margin-top:auto;}
.carte-actions .btn{padding:9px 10px;font-size:.84rem;}

/* ---- L'etat vide ---- */

.grille-vide{
  text-align:center;color:var(--texte-3);
  padding:40px 16px;
  border:1px dashed var(--ligne);
  border-radius:var(--radius-bloc);
}
.grille-vide p{margin:0 0 10px;}
.grille-vide-aide{font-size:.9rem;color:var(--texte-4);max-width:52ch;margin-inline:auto;}

.etat-vide{text-align:center;padding:50px 0;}
.etat-vide p{color:var(--texte-3);margin-bottom:22px;}

/* ---- La pagination ---- */

.pagination{
  display:flex;align-items:center;justify-content:center;gap:12px;
  margin-top:28px;
}
.pagination-pas{text-decoration:none;}
.pagination-morte{opacity:.4;cursor:default;}
.pagination-etat{color:var(--texte-3);font-size:.9rem;}

/* ===========================================================================
   6. LA FICHE D'UNE PIECE
   =========================================================================== */

.fiche-tete{padding-top:26px;}

.fiche-grille{display:grid;gap:22px;grid-template-columns:1fr;}
@media (min-width:860px){
  .fiche-grille{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start;}
}

.fiche-visuel{
  display:flex;align-items:center;justify-content:center;
  aspect-ratio:4/3;
  background:var(--fond-2);
  border:1px solid var(--ligne);
  border-radius:var(--radius-bloc);
  overflow:hidden;
}
.fiche-image{width:100%;height:100%;object-fit:cover;}
.fiche-image-creux{font-size:5rem;font-weight:800;color:var(--texte-1);opacity:.12;}

/* ---- LE DIAPORAMA — SOCLE 2.1 ------------------------------------------
   DU DEFILEMENT NATIF, ACCROCHE PHOTO PAR PHOTO.
   scroll-snap fait tout le travail : on glisse au doigt sur un telephone, la
   photo s'arrete pile, et la barre de defilement du navigateur reste
   utilisable. Rien n'avance tout seul — une photo qui bouge pendant qu'on
   l'examine est la raison pour laquelle on repart.

   LA PISTE N'A PAS DE BARRE VISIBLE : une barre grise en travers d'une photo
   de produit fait sale. Les pastilles en dessous disent ou l'on en est, et
   elles sont cliquables. */
.diaporama{position:absolute;inset:0;}

.diapo-piste{
  display:flex;
  height:100%;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
}
.diapo-piste::-webkit-scrollbar{display:none;}

.diapo{
  flex:0 0 100%;
  width:100%;height:100%;
  object-fit:cover;
  scroll-snap-align:center;
  /* Un glissement vertical dans la page ne doit pas etre capte par la piste :
     on ne lui laisse que l'horizontale. */
  touch-action:pan-x pinch-zoom;
}

.diapo-pastilles{
  position:absolute;
  inset-inline:0;bottom:12px;
  display:flex;justify-content:center;gap:7px;
  z-index:2;
}
.pastille{
  width:8px;height:8px;padding:0;
  border:0;border-radius:50%;
  background:rgba(255,255,255,.55);
  box-shadow:0 1px 3px rgba(21,22,26,.4);
  cursor:pointer;
  transition:width .18s ease,background .18s ease;
}
/* LA PASTILLE ACTIVE S'ALLONGE AU LIEU DE CHANGER DE COULEUR : sur une photo
   claire comme sur une photo sombre, une forme se voit toujours. */
.pastille.actif{width:22px;border-radius:4px;background:#FFFFFF;}

.fiche-infos{display:flex;flex-direction:column;gap:12px;}
.fiche-etiquettes{display:flex;flex-wrap:wrap;gap:7px;margin:0;}
.fiche-nom{font-size:clamp(1.3rem,3.2vw,1.9rem);margin:0;text-align:start;}
.fiche-detail{margin:0;color:var(--texte-3);}

.fiche-prix{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px;margin:0;}
.fiche-prix-val{font-size:1.8rem;font-weight:800;color:var(--texte-0);}
.fiche-prix-ancien{color:var(--texte-4);font-size:1rem;}

.fiche-rupture{
  margin:0;padding:11px 14px;
  background:var(--voile-ambre);color:var(--ambre);
  border-radius:var(--radius);font-size:.92rem;
}

.fiche-bloc{margin-top:4px;}
.fiche-bloc-titre{
  font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;
  color:var(--texte-3);margin:0 0 7px;text-align:start;
}
.fiche-modeles{display:flex;flex-wrap:wrap;gap:7px;}

.fiche-reference{
  margin:0;color:var(--texte-4);font-size:.84rem;
  display:flex;gap:7px;
}
.fiche-reference span:last-child{color:var(--texte-2);}

.fiche-panier{margin-top:6px;}

/* ===========================================================================
   7. LE COMPTE ET LES PAGES DE TEXTE
   =========================================================================== */

.compte-colonne,.texte-colonne{width:min(640px,92vw);margin-inline:auto;}
.compte-colonne h1,.texte-colonne h1{text-align:start;font-size:clamp(1.5rem,3.6vw,2.2rem);}
.texte-colonne h2{text-align:start;font-size:1.15rem;margin-top:1.6em;}
.texte-colonne p{color:var(--texte-2);line-height:1.7;}

.carte-compte{
  padding:20px;margin-bottom:24px;
  background:var(--fond-2);
  border:1px solid var(--ligne);
  border-radius:var(--radius-bloc);
}
.compte-bonjour{margin:0 0 6px;color:var(--texte-2);}
.compte-bonjour strong{color:var(--texte-0);}
.compte-remise{margin:0 0 10px;display:flex;align-items:baseline;gap:10px;color:var(--texte-3);}
.compte-remise strong{font-size:1.5rem;font-weight:800;color:var(--vert);}
.compte-etat{margin:0 0 16px;color:var(--texte-3);font-size:.92rem;}
.compte-etat-actif{color:var(--vert);}

/* Les deux formulaires de la page de compte sont separes par un vrai blanc :
   colles, on remplit le second en croyant se connecter. */
.compte-colonne .form-carte{margin-bottom:26px;}
.compte-colonne .form-carte h2{text-align:start;font-size:1.15rem;}

.form-erreur{
  margin:0 0 14px;padding:10px 12px;
  background:var(--voile-alerte);color:var(--alerte);
  border-radius:var(--radius);font-size:.9rem;
}
.form-merci{
  margin:0;padding:12px 14px;
  background:var(--voile-vert);color:var(--vert);
  border-radius:var(--radius);font-size:.95rem;
}
.field textarea{
  width:100%;padding:11px 12px;
  background:var(--fond-2);border:1px solid var(--ligne);border-radius:var(--radius);
  color:var(--texte-1);font:inherit;resize:vertical;
}
.field textarea:focus{outline:2px solid var(--orange);outline-offset:1px;border-color:transparent;}

/* ===========================================================================
   8. LES ETIQUETTES DE GAMME

   LA SEULE COULEUR « EN DUR » DU FICHIER, ET ELLE NE L'EST PAS VRAIMENT :
   chaque gamme emprunte une variable de statut deja definie dans tokens.css.
   Pourquoi des couleurs differentes : original et compatible vont du simple au
   quadruple, et deux etiquettes grises cote a cote dans une grille ne se
   distinguent pas du coin de l'oeil. Une gamme inventee par un magasin tombe
   sur le style par defaut, qui reste lisible. <<<
   =========================================================================== */

.etiquette-gamme{
  align-self:flex-start;
  display:inline-flex;align-items:center;
  padding:2px 8px;border-radius:999px;
  font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  background:var(--voile-accent-doux);color:var(--texte-3);
}
.etiquette-gamme[data-gamme="original"]{background:var(--voile-vert);color:var(--vert);}
.etiquette-gamme[data-gamme="service-pack"]{background:var(--voile-vert);color:var(--vert);}
.etiquette-gamme[data-gamme="oled"]{background:var(--voile-orange);color:var(--orange);}
.etiquette-gamme[data-gamme="incell"]{background:var(--voile-accent-moyen);color:var(--texte-2);}

/* ===========================================================================
   9. LE PIED DE PAGE
   =========================================================================== */

.pied{text-align:start;padding-bottom:60px;}
.pied-grille{
  display:grid;gap:26px;
  grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
}
.pied-colonne{display:flex;flex-direction:column;gap:8px;}
.pied-colonne h2{
  font-size:.82rem;text-transform:uppercase;letter-spacing:.08em;
  color:var(--texte-1);margin:0 0 4px;text-align:start;
}
.pied-colonne a{color:var(--texte-3);text-decoration:none;font-size:.9rem;}
.pied-colonne a:hover{color:var(--orange);}
.pied-colonne p{margin:0;}
.pied-etiquette{display:block;color:var(--texte-4);font-size:.78rem;}
.pied-marque .footer-logo{margin:0 0 8px;}
.pied .footer-contact{margin:0 0 10px;}

/* ===========================================================================
   10. L'ARABE

   Le site entier passe en RTL par l'attribut dir de <html> (js/boutique.js).
   Les proprietes logiques — inset-inline, padding-inline, text-align:start —
   se retournent toutes seules : il ne reste ici que ce qui ne le peut pas.
   =========================================================================== */

[dir="rtl"] .recherche-champ{padding:11px 14px 11px 44px;}
/* Le chevron du fil d'Ariane est un caractere : il pointe dans le mauvais sens
   une fois la page retournee. */
[dir="rtl"] .fil > * + *::before{content:"‹";}
/* Les fleches des rangees aussi : leur dessin SVG ne se retourne pas. */
[dir="rtl"] .fleche svg{transform:scaleX(-1);}

/* ===========================================================================
   11. LES PETITS ECRANS

   LA RECHERCHE PASSE SUR SA PROPRE LIGNE, ET ELLE NE SE REDUIT JAMAIS A UNE
   LOUPE. C'est l'outil principal du site : un reparateur arrive avec un nom de
   modele en tete, pas avec l'envie de parcourir. Une loupe qui ouvre un champ
   coute un geste de plus a chaque visite.
   =========================================================================== */

@media (max-width:700px){
  .entete-ligne{
    grid-template-columns:auto 1fr auto;
    grid-template-areas:"menu logo actions" "recherche recherche recherche";
    gap:10px;
  }
  #menuBouton{grid-area:menu;}
  .entete-logo{grid-area:logo;justify-content:center;}
  .entete-actions{grid-area:actions;}
  .recherche{grid-area:recherche;}

  /* Le nom du compte disparait, l'icone reste : trois libelles dans un
     en-tete de 360 px ne laissent plus de place au logo. */
  .entete-nom{display:none;}

  .grille-pieces{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:9px;}
  .carte-actions{flex-direction:column;}
  .section{padding:34px 0;}
  .catalogue-tete{margin-bottom:12px;}
}