/* beautyShop — composants partagés (templates/composants/), boutique et administration.
   À charger APRÈS theme.css. Palette : teal #1a6079 / #08465b, rose #d1908a / #e7a89f. */
:root{
  --ui-teal:#1a6079; --ui-teal-fonce:#08465b; --ui-teal-pale:#e6f0f3;
  --ui-rose:#d1908a; --ui-rose-pale:#fbeeec;
  --ui-bordure:#dfe6e8; --ui-texte-doux:#5d7480; --ui-cible:36px; --ui-cible-icone:30px;
}
/* Écrans tactiles : les cibles reviennent à une taille confortable au doigt. */
@media (pointer:coarse){:root{--ui-cible:44px; --ui-cible-icone:40px}}
.material-icons{vertical-align:middle;user-select:none}

/* ---------- boutons « Retour » et « Tout voir » ---------- */
.bouton-texte{display:inline-flex;align-items:center;gap:.35rem;min-height:var(--ui-cible);padding:0 .8rem;border-radius:var(--bs-border-radius,.4rem);font-weight:600;font-size:.9rem;color:var(--ui-teal);text-decoration:none;transition:background-color .15s,box-shadow .15s}
.bouton-texte .material-icons{font-size:20px;transition:transform .15s}
.bouton-texte:hover{background:var(--ui-teal-pale);color:var(--ui-teal-fonce)}
.bouton-texte-tonal{background:var(--ui-teal-pale)}
.bouton-texte-tonal:hover{background:#d3e4ea}
.bouton-texte:hover .material-icons:last-child{transform:translateX(2px)}
.bouton-retour{padding-left:.5rem;margin-left:-.5rem}
.bouton-retour:hover .material-icons:first-child{transform:translateX(-2px)}
.bouton-retour:hover .material-icons:last-child{transform:none}
.bouton-texte.est-desactive{opacity:.5;pointer-events:none}

/* ---------- boutons d'action (icône seule) ---------- */
.bouton-action{--ba-couleur:var(--ui-teal);--ba-fond:var(--ui-teal-pale);display:inline-grid;place-items:center;width:var(--ui-cible-icone);height:var(--ui-cible-icone);padding:0;border:0;border-radius:var(--bs-border-radius,.4rem);background:transparent;color:var(--ba-couleur);cursor:pointer;text-decoration:none;position:relative;transition:background-color .15s,box-shadow .15s}
.bouton-action:hover{background:var(--ba-fond);color:var(--ba-couleur)}
.bouton-action:active{box-shadow:0 0 0 3px var(--ba-fond)}
.bouton-action:focus-visible{outline:3px solid rgba(26,96,121,.45);outline-offset:1px}
.bouton-action .material-icons{font-size:18px}
.bouton-action-danger{--ba-couleur:#b4443d;--ba-fond:#f8e1df}
.bouton-action-success{--ba-couleur:#2e7d5b;--ba-fond:#e3f3ec}
.bouton-action-neutral{--ba-couleur:#4b5f69;--ba-fond:#eceff0}
.bouton-action:disabled{opacity:.4;cursor:not-allowed;background:transparent}

/* ---------- sélecteur déroulant Material-like ---------- */
.selecteur{display:inline-block;position:relative;max-width:100%}
.selecteur-bouton{display:inline-flex;align-items:center;justify-content:space-between;gap:.5rem;min-height:var(--ui-cible);width:100%;padding:.25rem .5rem .25rem 1rem;background:#fff;border:1px solid var(--ui-bordure);border-radius:var(--rayon-ui,.75rem);color:var(--bs-body-color);font-size:.92rem;text-align:left;cursor:pointer;transition:border-color .15s,box-shadow .15s,background-color .15s}
.selecteur-bouton:hover{background:#f6fafb;border-color:#b9cdd4}
.selecteur-bouton[aria-expanded="true"],.selecteur-bouton:focus-visible{border-color:var(--ui-teal);box-shadow:0 0 0 3px rgba(26,96,121,.18);outline:0}
.selecteur-texte{display:inline-flex;gap:.35rem;align-items:baseline;min-width:0;overflow:hidden;white-space:nowrap}
.selecteur-champ{color:var(--ui-texte-doux)}
.selecteur-champ::after{content:" :"}
.selecteur-valeur{font-weight:600;color:var(--ui-teal-fonce);overflow:hidden;text-overflow:ellipsis}
.selecteur-fleche{font-size:24px;color:var(--ui-texte-doux);transition:transform .15s}
.selecteur-bouton[aria-expanded="true"] .selecteur-fleche{transform:rotate(180deg)}
.selecteur-sm .selecteur-bouton{min-height:40px;font-size:.85rem}
.selecteur-lg .selecteur-bouton{min-height:52px;font-size:1rem}
@media(pointer:coarse){.selecteur-sm .selecteur-bouton{min-height:var(--ui-cible)}}
.selecteur-menu{min-width:100%;max-height:min(60vh,20rem);overflow-y:auto}
.selecteur-item{position:relative;display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:var(--ui-cible);border-radius:.55rem;cursor:pointer;color:var(--bs-body-color);white-space:normal}
.selecteur-item:hover,.selecteur-item:focus{background:var(--ui-teal-pale);color:var(--ui-teal-fonce);outline:0}
.selecteur-item:focus-visible{box-shadow:inset 0 0 0 2px var(--ui-teal)}
.selecteur-item:active{background:#d3e4ea}
.selecteur-radio{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.selecteur-coche{font-size:20px;color:var(--ui-teal);visibility:hidden}
.selecteur-radio:checked ~ .selecteur-item-libelle{font-weight:600;color:var(--ui-teal-fonce)}
.selecteur-radio:checked ~ .selecteur-coche{visibility:visible}

/* ---------- cartes radio ---------- */
.groupe-radio-legende{float:none;width:auto;margin-bottom:.35rem;font-size:.8rem;font-weight:600;color:var(--ui-texte-doux)}
fieldset.groupe-radio{min-width:0;margin:0;padding:0;border:0}
.groupe-radio-cartes{display:flex;flex-wrap:wrap;gap:.5rem}
.carte-radio{position:relative;flex:1 1 7rem;margin:0;cursor:pointer}
.carte-radio input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.carte-radio-corps{display:flex;align-items:center;justify-content:center;gap:.4rem;min-height:var(--ui-cible);padding:.4rem 1rem;background:#fff;border:1px solid var(--ui-bordure);border-radius:var(--rayon-ui,.75rem);font-size:.92rem;font-weight:500;text-align:center;transition:border-color .15s,background-color .15s,box-shadow .15s}
.carte-radio-corps .material-icons{font-size:20px;color:var(--ui-texte-doux)}
.carte-radio:hover .carte-radio-corps{background:#f6fafb;border-color:#b9cdd4}
.carte-radio input:checked + .carte-radio-corps{background:var(--ui-teal-pale);border-color:var(--ui-teal);color:var(--ui-teal-fonce);font-weight:600;box-shadow:0 0 0 1px var(--ui-teal)}
.carte-radio input:checked + .carte-radio-corps .material-icons{color:var(--ui-teal)}
.carte-radio input:focus-visible + .carte-radio-corps{outline:3px solid rgba(26,96,121,.45);outline-offset:2px}

/* ---------- fil d'Ariane ---------- */
.fil-ariane ol{display:flex;flex-wrap:wrap;align-items:center;gap:.1rem .15rem;margin:0 0 .75rem;padding:0;list-style:none;font-size:.85rem}
.fil-ariane li{display:inline-flex;align-items:center;min-width:0;max-width:100%}
.fil-ariane a,.fil-ariane li>span:not(.material-icons){display:inline-block;max-width:16rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fil-ariane a{padding:.55rem .35rem;border-radius:.5rem;color:var(--ui-teal);text-decoration:none}
.fil-ariane a:hover{background:var(--ui-teal-pale);color:var(--ui-teal-fonce)}
.fil-ariane-separateur{font-size:18px;color:#5d7480}
.fil-ariane-courant>span{padding:.55rem .35rem;color:var(--ui-texte-doux)}
@media(max-width:575.98px){.fil-ariane a,.fil-ariane li>span:not(.material-icons){max-width:10rem}}

/* ---------- en-tête de page ---------- */
.en-tete-page{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:.75rem 1rem;margin-bottom:1.25rem}
.en-tete-page-texte{min-width:0;flex:1 1 16rem}
.en-tete-page-titre{margin:0;font-size:1.5rem;font-weight:700;color:var(--ui-teal-fonce)}
.en-tete-page-sous-titre{margin:.2rem 0 0;color:var(--ui-texte-doux)}
.en-tete-page-actions{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}

/* ---------- tableau ---------- */
.tableau-ui-conteneur{background:#fff;border-radius:.6rem;box-shadow:var(--ombre-1);overflow:clip}
.tableau-ui{width:100%;margin:0;border-collapse:separate;border-spacing:0}
.tableau-ui th,.tableau-ui td{padding:.75rem 1rem;vertical-align:middle;border-bottom:1px solid #edf1f2}
.tableau-ui thead th{background:var(--ui-teal-pale);color:var(--ui-teal-fonce);font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;white-space:nowrap;border-bottom:1px solid var(--ui-bordure)}
.tableau-collant thead th{position:sticky;top:var(--tableau-decalage,0);z-index:2}
body.avec-tabbar{--tableau-decalage:60px}
.tableau-ui tbody tr:nth-child(even){background:#fafcfc}
.tableau-ui tbody tr:hover{background:#f1f7f9}
.tableau-ui tbody tr:last-child td{border-bottom:0}
.tableau-ui .colonne-actions{text-align:right;white-space:nowrap;width:1%}
.tableau-vide td,p.tableau-vide{padding:2rem 1rem;text-align:center;color:var(--ui-texte-doux)}
.tableau-vide-icone{display:block;margin:0 auto .35rem;font-size:36px;opacity:.5}
@media(max-width:767.98px){
  .tableau-ui thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .tableau-ui,.tableau-ui tbody{display:block}
  .tableau-ui tr{display:block;margin:.75rem;padding:.5rem .75rem;border:1px solid #edf1f2;border-radius:.6rem;background:#fff!important;box-shadow:var(--ombre-1)}
  .tableau-ui td{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.5rem 0;border-bottom:1px dashed #edf1f2;text-align:right}
  .tableau-ui td:last-child{border-bottom:0}
  .tableau-ui td[data-label]::before{content:attr(data-label);flex:none;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--ui-texte-doux);text-align:left}
  .tableau-ui .colonne-actions{width:auto;justify-content:flex-end;gap:.25rem}
  .tableau-ui tr.tableau-vide{border:0;box-shadow:none;margin:0}
}

/* ---------- pagination ---------- */
.pagination-ui{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.25rem;padding:.75rem}
.pagination-ui-lien{display:inline-grid;place-items:center;min-width:var(--ui-cible);height:var(--ui-cible);padding:0 .5rem;border-radius:var(--bs-border-radius,.4rem);color:var(--ui-teal);font-weight:600;font-size:.9rem;text-decoration:none;transition:background-color .15s}
a.pagination-ui-lien:hover{background:var(--ui-teal-pale);color:var(--ui-teal-fonce)}
.pagination-ui-lien.est-courant{background:var(--ui-teal);color:#fff}
.pagination-ui-lien.est-desactive{opacity:.35}
.pagination-ui-ellipse{display:inline-grid;place-items:center;min-width:1.5rem;color:var(--ui-texte-doux)}

/* ---------- badges de statut ---------- */
.badge-statut{display:inline-flex;align-items:center;gap:.25rem;padding:.3rem .7rem;border-radius:99px;font-size:.75rem;font-weight:600;line-height:1.2}
.badge-statut .material-icons{font-size:14px}

/* Champ de mot de passe : l'icône d'œil est intégrée à droite de la saisie (cible tactile de 44 px). */
.champ-mot-de-passe { position: relative; }
.champ-mot-de-passe .form-control { padding-right: 3rem; }
.champ-mot-de-passe .form-control.is-invalid,
.champ-mot-de-passe .form-control.is-valid { padding-right: 4.5rem; background-position: right 3rem center; }
.champ-mot-de-passe-oeil {
  position: absolute; top: 0; right: 0; bottom: 0; width: var(--ui-cible);
  display: grid; place-items: center; padding: 0; border: 0; background: transparent;
  color: #5d7480; border-radius: 0 var(--bs-border-radius) var(--bs-border-radius) 0; cursor: pointer;
}
.champ-mot-de-passe-oeil:hover { color: #08465b; }
.champ-mot-de-passe-oeil:focus-visible { outline: 2px solid #1a6079; outline-offset: -2px; }
.champ-mot-de-passe-oeil .material-icons { font-size: 1.25rem; }

/* ---------- snackbar ---------- */
.snackbar-zone{position:fixed;left:50%;bottom:calc(var(--snackbar-decalage,16px) + env(safe-area-inset-bottom,0px));z-index:1100;display:flex;flex-direction:column;gap:.5rem;width:min(32rem,calc(100vw - 2rem));transform:translateX(-50%);pointer-events:none}
.snackbar{display:flex;align-items:center;gap:.75rem;min-height:3rem;padding:.4rem .25rem .4rem 1rem;border-radius:.5rem;color:#fff;box-shadow:0 3px 5px -1px rgba(0,0,0,.2),0 6px 10px rgba(0,0,0,.14),0 1px 18px rgba(0,0,0,.12);pointer-events:auto;animation:snackbar-entree .2s ease-out}
.snackbar-succes{background:#2e7d5b}
.snackbar-info{background:#1a6079}
.snackbar-avertissement{background:#c2570c}
.snackbar-erreur{background:#b4443d}
.snackbar-icone{flex:none;font-size:22px}
.snackbar-texte{flex:1;min-width:0;font-size:.9rem;line-height:1.35;overflow-wrap:anywhere}
.snackbar-fermer{flex:none;display:grid;place-items:center;width:var(--ui-cible,44px);height:var(--ui-cible,44px);padding:0;border:0;border-radius:50%;background:transparent;color:inherit;cursor:pointer}
.snackbar-fermer:hover{background:rgba(255,255,255,.18)}
.snackbar-fermer:focus-visible{outline:2px solid #fff;outline-offset:-4px}
.snackbar-fermer .material-icons{font-size:20px}
@keyframes snackbar-entree{from{opacity:0;transform:translateY(.75rem)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.snackbar{animation:none}}