/* client.css — l'habillage propre a l'application CLIENT.
   Les jetons (couleurs, polices, rayons, tailles de doigt) viennent de
   ../commun/charte.css, theme clair « salon » : on ne les redefinit pas, on
   s'en sert. Concu pour 375 px de large, une main, sans jamais de defilement
   horizontal de la page. */

/* Aucun jeton ajoute ici, et c'est volontaire. La charte a deja tranche la
   question : --or-sombre (#8E6F3E) donne 4,15:1 sur la craie et reste aux
   aplats et aux filets ; le petit texte dore prend --or-txt (#826334, 4,93:1).
   Se donner une troisieme nuance d'or dans un coin, c'est exactement ce que la
   charte appelle un bug : un composant se peint avec les jetons du theme. */

html{ -webkit-text-size-adjust:100%; }
body{ overflow-x:hidden; }
/* Beaucoup de liens sont ici des surfaces tactiles (vignette, carte de
   commande, onglet) et non des mots dans une phrase : le souligne et le bleu
   du navigateur n'y ont rien a faire. Les vrais liens de texte reprennent
   l'un et l'autre plus bas, un par un. */
a{ color:inherit; text-decoration:none; }

/* ---------- coquille ---------- */
/* Une seule barre haute, une seule navigation, une scene ou les ecrans se
   relaient : le cadre ne se repeint jamais, seul son contenu change. */
#app{
  position:fixed; inset:0; display:flex; flex-direction:column;
  max-width:560px; margin:0 auto; background:var(--fond); overflow:hidden;
}
.scene{ position:relative; flex:1 1 auto; overflow:hidden; }
.ecran{ position:absolute; inset:0; display:none; flex-direction:column; background:var(--fond); }
.ecran.actif{ display:flex; }

/* barre haute : sobre, une hairline, rien qui bouge */
.entete{
  flex:0 0 auto; display:flex; align-items:center; gap:6px;
  padding:calc(10px + env(safe-area-inset-top)) 8px 10px;
  border-bottom:1px solid var(--filet); background:var(--fond-2);
}
.entete .marque{ flex:1 1 auto; min-width:0; padding-left:10px; }
.entete .marque b{ display:block; font-family:var(--serif); font-weight:400; font-size:19px;
                   line-height:1.05; letter-spacing:-.01em; }
.entete .marque i{ display:block; font-style:normal; font-size:9.5px; letter-spacing:.34em;
                   text-transform:uppercase; color:var(--texte-2); margin-top:3px; }
/* la barre haute garde la meme hauteur avec la marque (deux lignes) et avec un
   titre d'ecran (une seule) : sans cela le contenu sautait d'un ecran a l'autre */
.entete .titre{ flex:1 1 auto; min-width:0; min-height:33px; display:flex; align-items:center;
                font-family:var(--serif); font-size:19px; line-height:1.15;
                padding:0 6px 0 10px;
                overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* Elle s'appelait « .retour » ; c'est aussi le nom de la cinquieme famille
   d'etats de la charte (.etat.retour), et la fleche de la barre haute
   transformait toute pastille « Rapport de retour » en carre de 44 px avec le
   libelle plie en trois lignes. Un nom de composant ne se partage pas avec un
   nom de famille : celui-ci dit ce qu'il est. */
.fleche-retour{ width:var(--doigt); height:var(--doigt); flex:0 0 auto; display:grid;
                place-items:center; border-radius:12px; color:var(--texte); }
.fleche-retour:active{ background:var(--craie-2); }
.entete .creux{ width:var(--doigt); flex:0 0 auto; }

/* corps defilant : la marge basse laisse passer la navigation et l'encoche */
.corps{ flex:1 1 auto; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch;
        padding:18px 16px calc(26px + env(safe-area-inset-bottom)); }

/* ---------- navigation basse, quatre entrees ---------- */
.nav{
  flex:0 0 auto; display:grid; grid-template-columns:repeat(4,1fr);
  background:var(--fond-2); border-top:1px solid var(--filet);
  padding-bottom:env(safe-area-inset-bottom);
}
#app.sans-nav .nav{ display:none; }
#app.sans-nav .barre-panier, #app.sur-panier .barre-panier{ display:none; }

/* Charte 9.2 : le rappel du panier, au-dessus des onglets. Il dit de QUOI il
   parle — « 3 références », jamais « 3 » (regle de la maison, 5.9). */
.barre-panier{ flex:0 0 auto; background:var(--encre); }
.barre-panier a{ display:flex; align-items:center; justify-content:center; gap:6px;
                 min-height:var(--doigt); padding:10px 16px; color:var(--craie);
                 font-size:14px; }
.barre-panier b{ font-family:var(--mono); font-weight:600; font-variant-numeric:tabular-nums; }
.nav a{
  min-height:56px; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:3px; text-decoration:none; color:var(--texte-2); font-size:11px; font-weight:600;
  letter-spacing:.02em; padding:6px 2px 8px; position:relative;
}
.nav a svg{ width:23px; height:23px; stroke:currentColor; fill:none;
            stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.nav a.vise{ color:var(--texte); }
.nav a.vise svg{ stroke:var(--or-sombre); }
.nav .pastille-nb{
  position:absolute; top:5px; left:calc(50% + 7px); min-width:18px; height:18px; padding:0 5px;
  border-radius:9px; background:var(--or-sombre); color:var(--craie);
  font-family:var(--mono); font-size:11px; font-weight:600; display:grid; place-items:center;
}

/* ---------- bandeaux (demonstration, hors ligne, installation) ---------- */
/* La bande de bandeaux vit SOUS la barre de titre, jamais en flottant
   par-dessus le contenu (charte 5.7). Les couleurs viennent de la charte ; ici
   on ne fait que la mise en page : pleine largeur, pas de coins arrondis
   puisqu'elle touche les deux bords. */
.bandeaux{ flex:0 0 auto; }
.bandeaux .bandeau{ display:flex; align-items:center; gap:10px; padding:9px 16px;
                    font-size:12.5px; line-height:1.35; border-radius:0;
                    border:0; border-bottom:1px solid var(--filet); }
.bandeau b{ font-weight:600; }
/* Les trois bandeaux de la charte 5.7, et leurs jetons : neutre, ce qui se
   rattrape (--souci-txt), ce qui a echoue (--casse-txt). Aucune couleur ecrite
   a la main : un composant peint en dur ne survit pas a un changement de
   theme, et la valeur choisie au jugé ne passe pas forcement AA. */
.bandeau{ background:var(--fond-2); color:var(--texte-2); }
.bandeau-souci{ color:var(--souci-txt);
                background:color-mix(in srgb, var(--souci) 9%, var(--fond-2)); }
.bandeau-alerte{ color:var(--casse-txt); font-weight:600;
                 background:color-mix(in srgb, var(--casse) 9%, var(--fond-2)); }
/* Une croix de fermeture est une cible comme une autre : 44 pt, sans exception
   (P2, revue point 1). Elle faisait 32 px, c'etait un refus. */
.bandeau .fermer{ margin-left:auto; width:var(--doigt); height:var(--doigt); flex:0 0 auto;
                  display:grid; place-items:center; border-radius:10px; font-size:19px;
                  color:inherit; opacity:.7; margin-right:-8px; }
.bandeau a{ color:inherit; font-weight:600; text-decoration:underline; }

/* ---------- pieces communes ---------- */
/* Les intertitres sont en capitales espacees : 12 px y valent bien 15 px de bas
   de casse, et c'est la seule entorse — tout ce qui se LIT est a 15 px ou plus. */
.sur{ font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--texte-2);
      font-weight:600; }
.section-titre{ font-size:12px; letter-spacing:.22em; text-transform:uppercase;
                color:var(--or-txt); font-weight:700; padding:26px 2px 12px; }
/* sous le chercheur colle en haut, le premier titre de famille a besoin d'air :
   sans cela il se retrouve au ras des rubans de categories */
.section-titre:first-child{ padding-top:16px; }
.vide{ text-align:center; color:var(--texte-2); font-size:15px; padding:56px 20px 24px;
       line-height:1.5; }
.vide b{ display:block; font-family:var(--serif); font-size:21px; color:var(--texte);
         font-weight:400; margin-bottom:8px; }
.filet{ height:1px; background:var(--filet); margin:20px 0; border:0; }
.mono{ font-family:var(--mono); font-variant-numeric:tabular-nums; }
.discret{ color:var(--texte-2); font-size:13.5px; line-height:1.45; }
/* Ce qu'un lecteur d'ecran doit entendre et qu'un oeil n'a pas besoin de lire.
   Pas de display:none : ce qui est masque ainsi n'est pas annonce du tout. */
.hors-ecran{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden;
             clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; }

/* ---------- le chargement montre la forme de l'ecran (charte 7.3) ----------
   Des blocs gris aux bonnes dimensions, pas une roue au milieu d'un vide : ce
   qui arrive ensuite se pose exactement la ou le gris etait, et l'ecran ne
   clignote pas. Le battement est doux et disparait sous prefers-reduced-motion
   (la charte coupe deja toute animation). */
.sq-photo, .sq-ligne{ background:var(--craie-2); border-radius:8px; animation:respire 1.6s ease-in-out infinite; }
.sq-grille{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.sq-carte{ background:var(--fond-2); border:1px solid var(--filet); border-radius:var(--rayon);
           padding:10px 12px 14px; }
.sq-carte .sq-photo{ width:100%; aspect-ratio:1/1; margin-bottom:12px; }
.sq-bloc{ background:var(--fond-2); border:1px solid var(--filet); border-radius:var(--rayon);
          padding:15px 16px; margin-bottom:11px; }
.sq-ligne{ height:12px; margin-bottom:8px; }
.sq-ligne.court{ width:42%; }
.sq-ligne.haut{ height:20px; width:78%; margin-bottom:12px; }
.sq-photo.grande{ width:100%; aspect-ratio:1/1; margin-bottom:18px; }
@keyframes respire{ 0%,100%{ opacity:1 } 50%{ opacity:.55 } }

/* .btn, .btn-or et .btn-fant viennent de la charte : on ne repeint rien, on
   elargit seulement — sur un telephone, un bouton de decision prend la largeur. */
.btn{ width:100%; }
/* le filet de la charte est fait pour separer, pas pour dessiner un bouton :
   le contour du bouton fantome se detache un peu plus, sans quitter l'encre */
.btn-fant{ border-color:color-mix(in srgb, var(--texte) 22%, transparent); }
.btn[disabled]{ opacity:1; background:transparent; color:var(--texte-2);
                border:1.5px solid var(--filet); cursor:default; }
.btn[disabled]:active{ transform:none; }
.raison{ margin:9px 2px 0; font-size:13px; line-height:1.45; color:var(--texte-2); text-align:center; }

/* champs : hauteur de doigt, 16 px de police (sinon iOS zoome au focus) */
.champ{ display:block; margin-bottom:14px; }
.champ span{ display:block; font-size:12px; letter-spacing:.1em; text-transform:uppercase;
             color:var(--texte-2); font-weight:600; margin-bottom:6px; }
/* 54 px et 16 px de corps : les deux valeurs de la charte 5.8. Sous 16 px,
   iOS Safari zoome tout seul a la mise au point et l'ecran saute. */
.champ input, .champ textarea, .champ select{
  width:100%; min-height:54px; padding:14px; font:inherit; font-size:16px;
  color:var(--texte); background:var(--fond-2); border:1.5px solid var(--filet);
  border-radius:12px; -webkit-appearance:none; appearance:none;
}
.champ textarea{ min-height:92px; resize:vertical; line-height:1.45; }
/* La charte 8.4 interdit outline:none, nulle part, pour aucune raison — et la
   revue en fait un refus. La bordure d'accent MARQUE la mise au point ; le
   contour du systeme reste par-dessus pour qui navigue au clavier.

   MESURE, pas precaution : ../commun/charte.css pose elle-meme
   « .champ input:focus{ ...; outline:none } », et cette regle (0,2,1) l'emporte
   sur son propre « :focus-visible » (0,1,0). Au clavier, la tabulation traverse
   donc tout un formulaire d'adresse sans qu'aucun champ ne se signale : verifie
   a la touche Tab sur le panier, outline-style « none » sur un element qui
   repond pourtant a :focus-visible. La charte n'est pas a nous ; on retablit ce
   qu'elle demande, depuis chez nous, a une specificite qui gagne. */
.champ input:focus, .champ textarea:focus{ border-color:var(--accent); }
.champ input:focus-visible, .champ textarea:focus-visible, .champ select:focus-visible,
.chercheur input:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
.duo{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.erreur{ margin:0 0 14px; padding:11px 14px; border-radius:12px;
         background:color-mix(in srgb, var(--casse) 9%, var(--fond-2));
         border:1px solid var(--casse); color:var(--casse-txt); font-size:14px; line-height:1.4; }

/* ---------- connexion ---------- */
#ec-connexion .corps{ display:flex; flex-direction:column; justify-content:center;
                      padding:32px 24px calc(32px + env(safe-area-inset-bottom)); }
.monogramme{ width:64px; height:64px; border-radius:16px; background:var(--encre); color:var(--craie);
             display:grid; place-items:center; font-family:var(--serif); font-size:23px;
             letter-spacing:.02em; margin:0 auto 26px; }
/* Charte 9.1 : en haut le monogramme et le nom de la maison, « rien d'autre :
   pas de photo de mariage, pas de slogan ». */
.marque-sous{ text-align:center; margin:0 0 10px; }
#ec-connexion h1{ text-align:center; font-size:27px; margin:0 0 26px; }
/* Un lien seul dans un formulaire reste une cible de 44 pt (P2), aligne a
   droite pour ne pas se confondre avec le libelle du champ au-dessus. */
.lien-oubli{ display:block; text-align:right; min-height:var(--doigt); padding:11px 2px;
             margin:-6px 0 8px; font-size:14px; font-weight:600; color:var(--or-txt);
             text-decoration:underline; }
.sous-bouton{ margin:12px 2px 0; text-align:center; font-size:14px; line-height:1.45;
              color:var(--texte-2); }
.lien-bas{ display:block; text-align:center; margin-top:22px; font-size:14.5px; font-weight:600;
           color:var(--or-txt); text-decoration:none; padding:12px; min-height:var(--doigt); }

/* ---------- catalogue ---------- */
.chercheur{ position:sticky; top:0; z-index:6; margin:-18px -16px 0; padding:12px 16px 10px;
            background:var(--fond); border-bottom:1px solid var(--filet); }
.chercheur input{
  width:100%; min-height:46px; padding:10px 14px; font:inherit; font-size:16px;
  background:var(--fond-2); border:1.5px solid var(--filet); border-radius:23px; color:var(--texte);
  -webkit-appearance:none; appearance:none;
}
.chercheur input:focus{ border-color:var(--accent); }
/* la rangee de categories defile dans sa propre boite : la page, elle, ne
   defile jamais lateralement */
.rubans{ display:flex; gap:8px; overflow-x:auto; scrollbar-width:none;
         margin:10px -16px 0; padding:0 16px 2px; }
.rubans::-webkit-scrollbar{ display:none; }
/* 44 px de haut comme tout le reste : un ruban de categorie se tape au pouce,
   en marchant, d'une seule main */
.ruban{ flex:0 0 auto; min-height:var(--doigt); padding:8px 16px; border-radius:22px;
        font-size:14px; font-weight:600; white-space:nowrap; background:var(--fond-2);
        border:1.5px solid var(--filet); color:var(--texte-2); }
.ruban.vise{ background:var(--encre); border-color:var(--encre); color:var(--craie); }

 /* ---------- packshot et son repli (charte 5.3) ----------
   Le cadre occupe la place de l'image AVANT qu'elle arrive : une vignette ne
   saute jamais, qu'il y ait une photo ou non. Quand elle manque, .sans-photo
   revele le monogramme dessine dessous. Fond blanc dans les deux cas : les
   packshots sont detoures sur blanc, c'est l'exception assumee de la charte 4. */
/* Une grille avec place-items:center ne donne PAS de hauteur a son enfant : sur
   un cadre dont la hauteur vient d'un aspect-ratio, l'image en height:100% se
   resolvait a zero et toutes les vignettes du catalogue sortaient blanches.
   Un centrage en flex, et l'image bornee par max-*, tient dans les deux cas :
   cadre a hauteur fixe (panier) comme cadre a ratio (catalogue, fiche). */
.cadre-photo{ position:relative; display:flex; align-items:center; justify-content:center;
              background:#FFFFFF; overflow:hidden; }
.cadre-photo img{ display:block; max-width:100%; max-height:100%; object-fit:contain; }
.cadre-photo i{ display:none; font-family:var(--serif); font-style:normal; color:var(--texte-2);
                letter-spacing:.06em; line-height:1; }
.cadre-photo.sans-photo{ background:var(--craie-2); }
.cadre-photo.sans-photo i{ display:block; }

/* Les filtres encore actifs quand une recherche ne rend rien : chacun avec de
   quoi l'enlever, 44 pt comme tout le reste (charte 9.2). */
.filtres-actifs{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; }
.filtre-actif{ display:inline-flex; align-items:center; gap:8px; min-height:var(--doigt);
               padding:8px 14px; border-radius:22px; background:var(--fond-2);
               border:1.5px solid var(--filet); color:var(--texte); font-size:14px;
               font-weight:600; }
.filtre-actif span{ font-size:17px; color:var(--texte-2); }

.grille{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.vignette{ display:block; text-align:left; width:100%; background:var(--fond-2);
           border:1px solid var(--filet); border-radius:var(--rayon); overflow:hidden;
           padding:0; transition:transform .08s ease; }
.vignette:active{ transform:scale(.985); }
.vignette .cadre-photo{ width:100%; aspect-ratio:1/1; padding:10px; }
.vignette .cadre-photo i{ font-size:26px; }
.vignette .txt{ padding:10px 12px 13px; }
.vignette .nom{ font-size:14px; font-weight:600; line-height:1.28; min-height:2.56em;
                display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
                overflow:hidden; }
/* pas de chiffres tabulaires ici : rien ne s'aligne d'une carte a l'autre,
   et l'espacement fixe rend la virgule flottante */
.vignette .prix{ margin-top:7px; font-family:var(--mono); font-size:14px; font-weight:600; }
.vignette .prix small{ font-family:var(--sans); font-size:11px; font-weight:500;
                       color:var(--texte-2); margin-left:4px; }
/* Un prix absent n'est pas 0,00 € et n'est pas un blanc : c'est « Sur devis ».
   Il s'ecrit dans la police du texte, pas dans celle des chiffres — ce n'en est
   pas un — et dans l'or de texte, qui passe AA sur la craie. */
.sur-devis{ font-family:var(--sans) !important; color:var(--or-txt); font-weight:700; }

/* ---------- fiche article ---------- */
.cadre-photo.fiche-photo{ width:100%; aspect-ratio:1/1; border:1px solid var(--filet);
              border-radius:var(--rayon); padding:18px; }
.cadre-photo.fiche-photo i{ font-size:56px; }
.fiche h1{ margin:16px 0 10px; font-size:27px; }
/* comme sur les vignettes : un prix seul ne s'aligne sur rien, les chiffres
   tabulaires ne feraient qu'ecarter la virgule */
.fiche .prix-gros{ font-family:var(--mono); font-size:26px; font-weight:600; }
.fiche .prix-gros small{ font-family:var(--sans); font-size:13px; font-weight:500;
                         color:var(--texte-2); margin-left:6px; }
.reperes{ margin:18px 0; border-top:1px solid var(--filet); }
.repere{ display:flex; justify-content:space-between; gap:14px; padding:11px 2px;
         border-bottom:1px solid var(--filet); font-size:14.5px; }
.repere span{ color:var(--texte-2); }
.repere b{ font-family:var(--mono); font-weight:600; font-variant-numeric:tabular-nums; }
.compteur-qte{ display:flex; align-items:center; gap:14px; justify-content:space-between;
               background:var(--fond-2); border:1.5px solid var(--filet); border-radius:var(--rayon);
               padding:6px; margin:18px 0 14px; }
.compteur-qte button{ width:52px; height:52px; flex:0 0 auto; border-radius:11px; font-size:26px;
                      font-weight:400; display:grid; place-items:center; background:var(--craie-2); }
/* meme couple que .btn-or de la charte : de l'or, et l'encre chaude dessus */
.compteur-qte button:active{ background:var(--or); color:var(--encre); }
.compteur-qte button:disabled{ opacity:.3; }
.compteur-qte b{ font-family:var(--mono); font-size:24px; font-weight:600;
                 font-variant-numeric:tabular-nums; }
/* la navigation basse porte deja l'encoche : ce pied la surplombe, il n'a
   pas a la reprendre */
.pied-collant{ position:sticky; bottom:0; margin:0 -16px; padding:14px 16px;
               background:var(--fond); border-top:1px solid var(--filet); }

/* ---------- panier ---------- */
/* Charte 9.4 : « Votre demande », et le nombre de references dessous. Le mot
   « demande » plutot que « panier » n'est pas un detail : D17 dit que le chemin
   normal est le devis, et l'ecran doit parler comme la maison. */
.compte-refs{ margin:0 0 6px; font-size:14px; color:var(--texte-2); }
.ligne-panier{ display:flex; gap:12px; padding:14px 0; border-bottom:1px solid var(--filet); }
.ligne-panier .cadre-photo{ width:62px; height:62px; flex:0 0 auto;
                   border:1px solid var(--filet); border-radius:10px; padding:5px; }
.ligne-panier .cadre-photo i{ font-size:17px; }
.ligne-panier .txt{ flex:1 1 auto; min-width:0; }
.ligne-panier .nom{ font-size:14.5px; font-weight:600; line-height:1.3; }
.ligne-panier .pu{ font-size:12.5px; color:var(--texte-2); margin-top:3px; }
.ligne-panier .bas{ display:flex; align-items:center; gap:10px; margin-top:9px; }
.pas{ display:flex; align-items:center; gap:2px; background:var(--fond-2);
      border:1.5px solid var(--filet); border-radius:11px; }
.pas button{ width:var(--doigt); height:var(--doigt); display:grid; place-items:center; font-size:20px; }
.pas b{ min-width:34px; text-align:center; font-family:var(--mono); font-size:16px; font-weight:600;
        font-variant-numeric:tabular-nums; }
.ligne-panier .total{ margin-left:auto; font-family:var(--mono); font-size:15px; font-weight:600;
                      font-variant-numeric:tabular-nums; }
/* --casse en couleur de texte donne 4,11:1 sur la craie : sous le seuil AA.
   Regle de la charte 3.4 (b) : background -> jeton nu, color -> jeton -txt. */
.oter{ min-height:var(--doigt); padding:0 8px; font-size:13px; color:var(--casse-txt);
       font-weight:600; }

.somme{ margin-top:22px; background:var(--fond-2); border:1px solid var(--filet);
        border-radius:var(--rayon); padding:6px 16px 14px; }
.somme-l{ display:flex; justify-content:space-between; align-items:baseline; gap:14px;
          padding:10px 0; border-bottom:1px solid var(--filet); font-size:14.5px; }
.somme-l:last-child{ border-bottom:0; }
.somme-l span{ color:var(--texte-2); }
.somme-l b{ font-family:var(--mono); font-size:17px; font-weight:600; font-variant-numeric:tabular-nums; }
/* « Chiffrée séparément » et « — » ne sont pas des montants : ni chiffres
   tabulaires, ni graisse de montant. On voit du premier coup d'oeil que la
   ligne ne porte pas d'argent (revue, point 19). */
.somme-l.a-part b{ font-family:var(--sans); font-size:14px; font-weight:600; color:var(--texte-2); }
.somme-l.gros{ padding-top:14px; }
.somme-l.gros span{ color:var(--texte); font-weight:600; }
.somme-l.gros b{ font-size:23px; }
.deux-portes{ display:flex; flex-direction:column; gap:10px; margin-top:22px; }

/* ---------- liste des commandes ---------- */
/* Charte 9.5 : deux onglets, En cours / Passées. Le compte de chacun porte son
   type par le mot de l'onglet — « En cours 4 » se lit sans ambiguite. 44 pt. */
.onglets{ display:flex; gap:8px; margin:0 0 16px; }
.onglet{ flex:1 1 0; min-height:var(--doigt); display:flex; align-items:center;
         justify-content:center; gap:7px; border-radius:22px; background:var(--fond-2);
         border:1.5px solid var(--filet); color:var(--texte-2); font-size:14.5px;
         font-weight:600; padding:8px 12px; }
.onglet .mono{ font-family:var(--mono); font-size:13px; font-variant-numeric:tabular-nums;
               opacity:.75; }
.onglet.vise{ background:var(--encre); border-color:var(--encre); color:var(--craie); }

/* Le camion roule : la commande le dit en tete de sa carte, en couleur de
   famille route (charte 9.5). C'est un liseré et un MOT, jamais une couleur
   seule (charte 8.2). */
.bandeau-route{ margin:0 0 10px; padding:8px 11px; border-radius:var(--rayon-2);
                border-left:3px solid var(--etat-route);
                background:color-mix(in srgb, var(--etat-route) 8%, var(--fond-2));
                color:var(--etat-route); font-size:13px; font-weight:600; line-height:1.35; }
.carte-commande{ display:block; width:100%; text-align:left; background:var(--fond-2);
                 border:1px solid var(--filet); border-radius:var(--rayon); padding:15px 16px;
                 margin-bottom:11px; transition:transform .08s ease; }
.carte-commande:active{ transform:scale(.99); }
.carte-commande .quand{ font-family:var(--mono); font-size:12px; color:var(--texte-2);
                        letter-spacing:.02em; }
.carte-commande h3{ margin:5px 0 3px; font-family:var(--serif); font-weight:400; font-size:20px;
                    line-height:1.2; }
.carte-commande .ou{ font-size:13.5px; color:var(--texte-2); }
.carte-commande .bas{ display:flex; align-items:center; gap:10px; margin-top:12px; }
/* La charte 9.5 range le total en euros dans les « absents volontairement » :
   une liste de prix n'aide pas a savoir ou en est une livraison. A sa place, la
   prochaine etape attendue — c'est la question que le client vient poser. */
.carte-commande .bas{ flex-wrap:wrap; }
.carte-commande .suite{ flex:1 1 100%; font-size:13.5px; line-height:1.4; color:var(--texte-2); }
.carte-commande .suite:empty{ display:none; }
/* Les cinq familles d'etats se peignent dans ../commun/charte.css, avec les
   jetons --etat-*. Rien ici : la couleur d'un etat ne se choisit pas deux fois,
   et la route ne doit pas etre orange — l'orange est au retard seul (charte 3.4 a). */

/* ---------- une commande : entete, frise, documents ---------- */
.entete-commande h2{ font-size:26px; margin-bottom:6px; }
.entete-commande .ou{ color:var(--texte-2); font-size:15px; line-height:1.45; }
.entete-commande .etat{ margin-top:14px; }

/* La frise D20 est un composant de la charte (5.4) : puce, rail, formes et
   couleurs de famille vivent dans ../commun/charte.css. L'application en
   redessinait une seconde par-dessus — un rail en ::before, une puce en
   element reel, une coche — pendant que celle de la charte continuait de
   dessiner ses propres pseudo-elements dessous. Ce qu'on voyait a l'ecran
   etait la superposition des deux, et elle tenait par hasard. Il n'en reste
   qu'un reglage de marge : le reste se lit dans la charte. */
.frise{ margin-top:6px; }

.bloc{ background:var(--fond-2); border:1px solid var(--filet); border-radius:var(--rayon);
       padding:16px; margin-top:18px; }
.bloc h2{ font-size:19px; margin-bottom:4px; }
.bloc.camion{ border-color:var(--or-sombre); }
.bloc.camion .eta{ font-family:var(--serif); font-size:30px; line-height:1.15; margin:10px 0 4px;
                   letter-spacing:-.01em; }
.bloc.camion .btn{ margin-top:14px; }
.bloc.camion .eta b{ font-family:var(--mono); font-weight:600; font-variant-numeric:tabular-nums; }
.bloc.camion .prevue{ font-size:14px; color:var(--texte-2); }
/* Charte R5 : le retard est la SEULE chose orange de l'ecran de carte — d'ou
   l'ardoise de la famille route. Il se dit dans un .bandeau-souci, comme tout
   ce qui se rattrape, et jamais a la place de l'heure d'arrivee. */
.retard{ margin-top:10px; }
/* Le bas de l'ecran porte l'action, comme partout ailleurs (P1). Sur un devis
   en attente, deux boutons : l'accord en or, la question en fantome. */
.pied-actions{ display:flex; flex-direction:column; gap:10px; margin-top:26px; }
.ref-commande{ margin-top:14px; text-align:center; }

.docs{ list-style:none; margin:0; padding:0; }
.docs li{ border-bottom:1px solid var(--filet); }
.docs li:last-child{ border-bottom:0; }
.docs a, .docs button{ display:flex; align-items:center; gap:12px; width:100%; text-align:left;
                       min-height:54px; padding:12px 0; color:var(--texte); text-decoration:none;
                       font-size:15px; }
.docs .quand{ margin-left:auto; font-family:var(--mono); font-size:12px; color:var(--texte-2);
              flex:0 0 auto; }
.docs svg{ width:19px; height:19px; flex:0 0 auto; stroke:var(--or-sombre); fill:none;
           stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }

.lignes-cmd{ list-style:none; margin:0; padding:0; }
.lignes-cmd li{ display:flex; gap:12px; align-items:baseline; padding:10px 0;
                border-bottom:1px solid var(--filet); font-size:14.5px; }
.lignes-cmd li:last-child{ border-bottom:0; }
.lignes-cmd .q{ font-family:var(--mono); font-weight:600; min-width:44px; flex:0 0 auto;
                font-variant-numeric:tabular-nums; }
.lignes-cmd .n{ flex:1 1 auto; min-width:0; line-height:1.3; }
/* Jamais un nombre nu : la colonne de gauche aligne les chiffres a l'oeil, le
   type se lit sous le nom de la piece (« 120 pièces »). */
.lignes-cmd .combien{ display:block; margin-top:2px; font-family:var(--mono); font-size:12px;
                      color:var(--texte-2); font-variant-numeric:tabular-nums; }

/* ---------- carte du camion ---------- */
/* L'ecran ne defile pas : la bande d'heure d'arrivee en haut, la carte prend
   toute la hauteur restante, le pied reste en bas. Charte R4 : « une bande fixe
   AU-DESSUS de la carte », parce que l'heure d'arrivee est l'information et que
   la carte, elle, ne l'est pas. Leaflet rend sa toile focalisable : elle garde
   son contour de mise au point, comme tout le reste (charte 8.4). */
#ec-carte .corps{ padding:0; display:flex; flex-direction:column; overflow:hidden; }
.carte-tete{ flex:0 0 auto; background:var(--fond-2); border-bottom:1px solid var(--filet);
             padding:14px 16px 16px; }
.carte-tete .sur{ display:block; }
/* --t-6 en mono tabulaire : le compte a rebours descend sans que rien bouge. */
.carte-tete .eta{ font-family:var(--mono); font-size:var(--t-6); line-height:1.12;
                  font-weight:600; font-variant-numeric:tabular-nums; margin:4px 0 2px; }
.carte-tete .prevue{ margin:0; font-size:var(--t-2); color:var(--texte-2); }
/* R4 : un temps d'arrivee qui repart en arriere se lit comme un bug — sauf si
   on dit qu'il vient d'etre recalcule. */
.maj-eta{ display:inline-block; margin-left:6px; padding:1px 7px; border-radius:9px;
          background:var(--craie-2); font-size:var(--t-1); font-weight:600; color:var(--texte-2); }
.carte-tete .bandeau{ margin-bottom:12px; }
.carte-tete .retard{ margin-top:12px; }
#toile-carte{ flex:1 1 auto; min-height:200px; background:var(--craie-2); }
.carte-pied{ flex:0 0 auto; background:var(--fond-2); border-top:1px solid var(--filet);
             padding:14px 16px calc(16px + env(safe-area-inset-bottom)); }
.carte-pied .ou{ margin:0; font-size:14.5px; line-height:1.4; }
.carte-pied .maj{ margin:8px 0 12px; font-size:11.5px; letter-spacing:.02em; color:var(--texte-2); }
.carte-absente{ margin:auto; text-align:center; padding:40px 26px; color:var(--texte-2);
                font-size:15px; line-height:1.5; }
/* Leaflet pose ses propres polices : on les ramene a la charte */
.leaflet-container{ font-family:var(--sans); background:var(--craie-2); }
.leaflet-control-attribution{ font-size:10px; background:rgba(245,241,234,.86); }
.marqueur-camion, .marqueur-adresse{ background:none; border:0; }
.marqueur-camion i{ display:block; width:34px; height:34px; border-radius:50%; background:var(--encre);
                    border:2.5px solid var(--or); box-shadow:0 3px 10px rgba(20,18,15,.35);
                    color:var(--or); font-style:normal; display:grid; place-items:center; }
.marqueur-camion svg{ width:19px; height:19px; stroke:currentColor; fill:none; stroke-width:1.6;
                      stroke-linecap:round; stroke-linejoin:round; }
/* L'epingle du client est en couleur « chez le client » (charte R3), plus
   petite que le camion : c'est le camion qu'on regarde. */
.marqueur-adresse i{ display:block; width:16px; height:16px; border-radius:50%;
                     background:var(--etat-client); border:3px solid var(--craie);
                     box-shadow:0 2px 7px rgba(20,18,15,.3); }
/* R6 : sans relevé depuis deux minutes, le camion s'estompe — il ne s'efface
   pas. Un marqueur efface dirait que le camion n'existe plus ; estompe, il dit
   qu'on ne sait plus ou il est, ce qui est la verite. */
.marqueur-camion.perdue{ opacity:.5; }

/* ---------- compte ---------- */
.fiche-compte{ margin-bottom:6px; }
/* D28 : « Partenaire agréé » se lit sous le nom. C'est une pastille de la
   famille commerciale — le drapeau ouvre ce que les regles commerciales
   reservent aux partenaires, et rien d'autre. */
.partenaire{ margin-top:10px; }
.carte .reperes{ margin:0 0 10px; border-top:0; }
.carte .repere:last-child{ border-bottom:0; }
.dit{ list-style:none; margin:0; padding:0; }
.dit li{ padding:11px 0; border-bottom:1px solid var(--filet); font-size:14px; line-height:1.45;
         color:var(--texte-2); }
.dit li:last-child{ border-bottom:0; }
.dit b{ color:var(--texte); font-weight:600; }
.carte .mention{ margin:0; }
.carte .mention + .mention{ margin-top:12px; }
.fiche-compte .nom{ font-family:var(--serif); font-size:26px; line-height:1.15; }
.fiche-compte .mail{ margin-top:5px; color:var(--texte-2); font-size:15px; word-break:break-all; }
.mention{ margin-top:22px; font-size:12.5px; line-height:1.55; color:var(--texte-2); }
.mention b{ color:var(--texte); font-weight:600; }
.mention a{ color:var(--or-txt); text-decoration:underline; }

/* ---------- mouvement ---------- */
/* La charte coupe deja transitions et animations sous prefers-reduced-motion ;
   on y ajoute ce que la carte anime elle-meme. */
@media (prefers-reduced-motion:reduce){
  .leaflet-marker-icon{ transition:none !important; }
  .vignette, .carte-commande, .btn{ transition:none !important; }
}

/* ---------- la marque : le vrai logo de la maison (08/09), jamais un monogramme dessine ---------- */
/* le monogramme seul dans la barre : le logo complet (presque carre) serait illisible a cette hauteur */
.entete .marque .logo-entete{ display:block; height:34px; width:auto; max-width:100%; }
.logo-connexion{ display:block; width:220px; max-width:64%; height:auto; margin:0 auto 18px; }
#bandeau-install img{ width:28px; height:28px; object-fit:contain; }
/* le repere « photo manquante » : le monogramme, discret, seulement quand l'image a echoue */
.cadre-photo i img{ display:block; width:38%; max-width:110px; height:auto; margin:auto; opacity:.5; }

/* ============================================================================
   Notez votre prestation (D47) — L'ECRAN QUI DOIT TENIR
   ----------------------------------------------------------------------------
   Cinq rangees, un lien, un bouton, sur 375 x 812 sans defilement. Les trois
   hauteurs qui decident de tout viennent de LOGIQUE.NOTATION et sont posees en
   variables par app.js (poserDimensionsNotation) : elles ne s'ecrivent PAS ici
   en dur, sinon le test sous jsc mesurerait un ecran et le telephone en
   afficherait un autre. Les valeurs de repli sont celles du meme tableau — un
   ecran ouvert avant que le script ne tourne reste juste.
   Le corps garde `overflow-y:auto` : sur un telephone plus court (375 x 667),
   on prefere qu'il defile plutot que de cacher le bouton « Envoyer ».
   ========================================================================= */
.noter{ display:flex; flex-direction:column; }
.noter h2{ margin-top:2px; }
/* La legende de l'echelle : sans elle, « 1 » se lit aussi bien « le meilleur »
   que « le pire », et la moitie des avis serait a l'envers. */
.noter .echelle{ margin:6px 0 0; font-size:13.5px; color:var(--texte-2); }
.noter .echelle b{ font-family:var(--mono); font-weight:600; color:var(--texte); }
.notes{ margin-top:var(--notation-ecart, 12px); }
.rangee-note{ min-height:var(--notation-rangee, 74px); display:flex; flex-direction:column;
              justify-content:flex-start; }
.libelle-note{ font-size:15px; font-weight:600; line-height:26px; }
/* Les cinq jetons : 44 pt de cible, sans exception (charte P2), et 8 pt entre
   deux voisins. `space-between` plutot qu'un `gap` fixe : la rangee occupe la
   largeur, du pouce gauche au pouce droit. */
.jetons{ display:flex; justify-content:space-between; align-items:center; }
.jeton{
  width:var(--notation-jeton, 44px); height:var(--notation-jeton, 44px);
  border-radius:50%; border:1.5px solid var(--filet); background:var(--fond-2);
  font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:16px; font-weight:600;
  color:var(--texte-2); display:grid; place-items:center; transition:transform .08s ease;
}
.jeton:active{ transform:scale(.94); }
/* La selection est NETTE : un aplat d'or, pas une nuance de gris qu'on cherche
   sous une lampe. Pas d'etoiles jaunes — la maison n'a qu'un accent (charte 3.1). */
.jeton.pris{ background:var(--or-sombre); border-color:var(--or-sombre); color:var(--craie);
             font-weight:600; }
/* « Ecrire un mot » : un lien a l'oeil, une cible de 44 pt sous le doigt. */
.lien-mot{ min-height:var(--doigt); display:flex; align-items:center; justify-content:center;
           font-size:14px; font-weight:600; color:var(--or-txt); text-decoration:underline;
           margin-top:var(--notation-ecart, 12px); }
.mot-boite{ margin:0 0 var(--notation-ecart, 12px); }
.mot-boite label{ display:block; font-size:var(--t-1); letter-spacing:.16em;
                  text-transform:uppercase; color:var(--texte-2); margin-bottom:7px;
                  font-weight:600; }
.mot-boite textarea{ width:100%; min-height:76px; border-radius:var(--rayon-2);
                     background:var(--fond-2); color:var(--texte);
                     border:1.5px solid var(--filet); padding:12px 14px; font:inherit;
                     font-size:17px; line-height:1.4; }
.mot-boite textarea:focus{ border-color:var(--accent); }
.noter .btn-large{ margin-top:var(--notation-ecart, 12px); }
/* L'ecran « Merci » : une phrase, et le chemin du retour. Il respire — c'est
   le seul ecran de l'application ou l'on n'a plus rien a faire. */
.noter.merci{ justify-content:center; min-height:60vh; text-align:center; }
.noter.merci .sur{ margin-bottom:6px; }
.noter.merci .phrase{ margin:12px 0 26px; font-size:15px; line-height:1.5; color:var(--texte-2); }

/* ---------- l'avis dans la fiche commande (D47) ---------- */
.noter-lien{ margin-top:16px; }
/* Une fois l'avis donne, la frise le dit — et le bouton ne revient pas. */
.merci-avis{ margin:16px 2px 0; font-size:14px; font-weight:600; color:var(--conforme-txt); }

/* ---------- qui vient (D48) ---------- */
.bloc.qui-vient{ margin-top:16px; }
.bloc.qui-vient .phrase-equipe{ font-family:var(--serif); font-size:21px; line-height:1.25;
                                margin:8px 0 0; }
.bloc.qui-vient .btn{ margin-top:14px; width:100%; }

/* ---------- l'equipier prefere (D48) ---------- */
/* Des prenoms qu'on touche, pas une liste deroulante : trois noms se lisent
   d'un coup d'oeil, et une liste deroulante sur telephone cache son contenu. */
.prefere .prenoms{ display:flex; flex-wrap:wrap; gap:var(--e-2); }
.jeton-prenom{ min-height:var(--doigt); padding:0 16px; border-radius:999px;
               border:1.5px solid var(--filet); background:var(--fond-2);
               font-size:15px; font-weight:600; color:var(--texte); }
.jeton-prenom.pris{ background:var(--or-sombre); border-color:var(--or-sombre); color:var(--craie); }
.jeton-prenom.sans{ color:var(--texte-2); font-weight:400; }
.prefere .discret{ margin-top:var(--e-3); }