/* boutique.css
   Espace eleveurs BURELAND.

   Direction retenue le 31/07/2026 : une carte centree posee sur un fond creme
   parcouru de formes organiques palles, medaillon du poulet a cheval sur le bord
   superieur. Couleurs, police et boutons en pilule repris de www.bureland.fr.

   AUCUNE dependance : ni Bootstrap, ni bibliotheque d'icones. Les icones sont des
   SVG en ligne dans les pages. Un eleveur ouvre ce site sur un telephone, debout
   dans un batiment, avec le reseau qu'il y a : quelques kilo-octets qui arrivent
   toujours valent mieux qu'un cadriciel qui arrive parfois.

   Le telephone d'abord. L'ecran large n'est qu'un elargissement, en fin de
   fichier. */

:root {
  /* Relevees dans le style.css du site vitrine */
  --brt-bleu:       #1b64b6;
  --brt-or:         #f4a708;
  --brt-texte:      #333333;
  --brt-texte-doux: #7a7e9a;
  --brt-bord:       #d8dde6;

  /* Declinaisons de la maquette */
  --brt-bleu-fonce: #14508f;
  --brt-bleu-nuit:  #124879;
  --brt-fond:       #fdf9ef;
  --brt-blob-bleu:  #e7f0fb;
  --brt-blob-or:    #fbeed2;
  --brt-bord-creme: #ece6d6;
  --brt-champ-fond: #fbfcfe;
  --brt-gris-icone: #9aa3b4;
  --brt-label:      #5f6572;

  --brt-rouge:      #a6321e;
  --brt-rouge-fond: #fbeae6;
  --brt-vert:       #1f4a29;
  --brt-vert-fond:  #e7f1e8;

  --brt-rayon-carte: 20px;
  --brt-rayon-bloc:  14px;
  --brt-rayon-champ: 10px;
  --brt-pilule:      50px;
}

* { box-sizing: border-box; }

html, body { overflow-x: hidden; }

body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  background: var(--brt-fond);
  color: var(--brt-texte);
  font-family: "Rubik", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}

/* --------------------------------------------------------------- le decor */
/* Trois taches aux rayons dissymetriques : un border-radius a quatre valeurs
   donne une forme dessinee la ou quatre cercles parfaits font decoratif.
   Le conteneur est fixe et masque le debordement - sans lui, les taches qui
   sortent de l'ecran feraient apparaitre une barre de defilement horizontale. */

.brt-decor {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.brt-decor span { position: absolute; display: block; }
.brt-blob-1 {
  left: -110px; top: -90px; width: 300px; height: 280px;
  background: var(--brt-blob-bleu);
  border-radius: 58% 42% 47% 53% / 54% 48% 52% 46%;
}
.brt-blob-2 {
  right: -100px; bottom: -110px; width: 320px; height: 300px;
  background: var(--brt-blob-or);
  border-radius: 45% 55% 60% 40% / 48% 42% 58% 52%;
}
.brt-blob-3 {
  right: 6%; top: 90px; width: 84px; height: 80px;
  background: #eef4fb;
  border-radius: 52% 48% 45% 55% / 58% 44% 56% 42%;
}

/* Le bandeau de developpement. Impossible de confondre ta machine et la prod. */
.brt-local {
  position: relative;
  z-index: 3;
  background: var(--brt-texte);
  color: var(--brt-or);
  text-align: center;
  padding: 5px 12px;
  font-size: 13px;
  letter-spacing: .02em;
}

/* ------------------------------------------------------------- l'en-tete */
/* Pages ou l'eleveur est connecte. La page de connexion n'en a pas : sa carte
   porte deja le medaillon. */

.brt-entete {
  position: relative;
  z-index: 2;
  background: #ffffff;
  /* Deux couches : un liseré de contact tres court qui pose la barre sur le
     fond, et une ombre large et douce qui la souleve. Une seule couche donne
     soit un trait dur, soit un halo flou - jamais du relief. */
  box-shadow: 0 1px 3px rgba(18, 72, 121, .07),
              0 8px 22px rgba(18, 72, 121, .11);
  padding: 8px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.brt-logo { display: flex; align-items: center; gap: 11px; text-decoration: none; min-width: 0; }
/* Le poulet en grand, sans pastille de fond : son PNG se pose deja sur du
   blanc, un cercle creme autour ne ferait que le retrecir. */
.brt-jeton {
  flex: none;
  display: flex; align-items: center; justify-content: center;
}
.brt-jeton img { width: auto; height: 74px; object-fit: contain; display: block; }
.brt-qui { display: flex; flex-direction: column; min-width: 0; }
.brt-qui-nom {
  font-size: 18px; font-weight: 700; color: var(--brt-bleu); line-height: 1.15;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.brt-qui-sous { font-size: 12.5px; color: var(--brt-texte-doux); line-height: 1.3; }

.brt-quitter {
  flex: none;
  font-size: 13px; font-weight: 500;
  color: var(--brt-bleu);
  text-decoration: none;
  padding: 8px 18px;
  border: 1.5px solid var(--brt-bleu);
  border-radius: var(--brt-pilule);
  transition: .25s;
}
.brt-quitter:hover { background: var(--brt-bleu); color: #ffffff; }

/* ---------------------------------------------------------- la carte seule */

.brt-centre {
  position: relative;
  z-index: 1;
  padding: 60px 16px 34px;
}
.brt-carte {
  position: relative;
  width: 100%;
  max-width: 380px;
  margin: 0 auto;
  background: #ffffff;
  border: 1px solid var(--brt-bord-creme);
  border-radius: var(--brt-rayon-carte);
  padding: 46px 24px 24px;
}

/* Le medaillon a cheval sur le bord. L'anneau creme le detache du blanc. */
.brt-medaillon {
  position: absolute;
  top: -38px; left: 50%;
  transform: translateX(-50%);
  width: 76px; height: 76px;
  border-radius: 50%;
  background: #ffffff;
  border: 4px solid var(--brt-fond);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.brt-medaillon img { width: 60px; height: 60px; object-fit: contain; display: block; }

.brt-marque {
  margin: 0;
  text-align: center;
  font-size: 11.5px; font-weight: 500;
  color: #96a0b0;
  letter-spacing: .14em;
}

h1 {
  margin: 5px 0 0;
  font-size: 23px; font-weight: 700;
  color: var(--brt-bleu);
  line-height: 1.2;
}
.brt-centre h1 { text-align: center; }

.brt-filet {
  width: 44px; height: 4px;
  background: var(--brt-or);
  border-radius: 4px;
  margin: 12px 0 0;
}
.brt-centre .brt-filet { margin-left: auto; margin-right: auto; }

.brt-sous {
  margin: 9px 0 22px;
  font-size: 13px;
  color: var(--brt-texte-doux);
}
.brt-centre .brt-sous { text-align: center; }

/* ------------------------------------------------------------ formulaires */

.brt-etiquette {
  display: block;
  font-size: 11.5px; font-weight: 500;
  color: var(--brt-label);
  margin: 0 0 6px;
}
.brt-champ + .brt-champ { margin-top: 14px; }

.brt-boite {
  display: flex; align-items: center; gap: 10px;
  border: 1.5px solid var(--brt-bord);
  border-radius: var(--brt-rayon-champ);
  background: var(--brt-champ-fond);
  padding: 0 12px;
  transition: .2s;
}
.brt-boite:focus-within {
  border-color: var(--brt-bleu);
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(27, 100, 182, .15);
}
.brt-boite svg { flex: none; width: 20px; height: 20px; color: var(--brt-gris-icone); }
.brt-boite input {
  flex: 1;
  min-width: 0;
  min-height: 48px;
  border: none;
  outline: none;
  background: transparent;
  font-family: inherit;
  font-size: 16px;
  color: var(--brt-texte);
  padding: 0;
}

/* L'oeil : verifier ce qu'on a tape compte double quand on saisit sur un petit
   clavier avec les mains sales. */
.brt-oeil {
  flex: none;
  border: none; background: transparent; cursor: pointer;
  padding: 6px; margin-right: -6px;
  display: flex; align-items: center;
  color: var(--brt-bleu);
}
.brt-oeil .brt-oeil-off { display: none; }
.brt-oeil.brt-oeil-ouvert .brt-oeil-on { display: none; }
.brt-oeil.brt-oeil-ouvert .brt-oeil-off { display: block; }

.brt-bouton {
  display: block;
  width: 100%;
  min-height: 52px;
  margin-top: 22px;
  padding: 14px 28px;
  font-family: inherit;
  font-size: 15px; font-weight: 500;
  color: #ffffff;
  background: var(--brt-bleu);
  border: none;
  border-radius: var(--brt-pilule);
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  transition: .25s;
}
.brt-bouton:hover  { background: var(--brt-bleu-fonce); }
.brt-bouton:active { transform: translateY(1px); }
.brt-bouton-auto { width: auto; margin-top: 0; display: inline-flex; align-items: center; gap: 7px; }
.brt-bouton-auto svg { width: 18px; height: 18px; }

/* Le recours telephonique. Sans reinitialisation par mail, c'est la seule
   porte de sortie d'un eleveur bloque : il doit etre lisible, pas relegue. */
.brt-secours {
  margin: 16px 0 0;
  padding-top: 14px;
  border-top: 1px solid #f0ece0;
  text-align: center;
  font-size: 12px;
  color: var(--brt-texte-doux);
}
.brt-secours svg { width: 15px; height: 15px; vertical-align: -3px; margin-right: 5px; color: var(--brt-bleu); }

/* ---------------------------------------------------------------- messages */

.brt-alerte, .brt-info {
  margin: 18px 0 0;
  padding: 12px 14px;
  border-radius: var(--brt-rayon-champ);
  font-size: 14px;
  line-height: 1.55;
}
.brt-alerte { background: var(--brt-rouge-fond); border: 1px solid #e8c3b8; color: var(--brt-rouge); }
.brt-info   { background: #ffffff; border: 1px solid var(--brt-bord-creme); border-left: 4px solid var(--brt-or); border-radius: 0 var(--brt-rayon-champ) var(--brt-rayon-champ) 0; color: var(--brt-texte); }
.brt-aide   { font-size: 12.5px; color: var(--brt-texte-doux); margin: 8px 0 0; line-height: 1.5; }

/* ------------------------------------------------------- pages de travail */

.brt-corps {
  position: relative;
  z-index: 1;
  max-width: 780px;
  margin: 0 auto;
  padding: 24px 18px 40px;
}
.brt-titre-ligne {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
}

/* --------------------------------------------------------------- le pied */

.brt-pied {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 4px 16px 34px;
}
.brt-devise {
  margin: 0;
  font-size: 12.5px;
  font-style: italic;
  color: #a09a86;
}
.brt-signature {
  margin: 6px 0 0;
  font-size: 11.5px;
  color: #b3ac97;
}

/* ----------------------------------------------------------- ecran large */

@media (min-width: 700px) {
  .brt-entete { padding: 10px 30px; }
  .brt-jeton img { height: 88px; }
  .brt-qui-nom { font-size: 21px; }
  .brt-centre { padding: 74px 24px 40px; }
  .brt-carte { max-width: 400px; padding: 50px 30px 28px; }
  h1 { font-size: 26px; }
  .brt-corps { padding: 32px 30px 56px; }
}

/* ==========================================================================
   LE PANIER ET LE SUIVI
   ========================================================================== */

.brt-section {
  margin: 30px 0 12px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--brt-texte-doux);
}

/* ----------------------------------------------------------- le panier */

.brt-panier {
  background: #ffffff;
  border: 1px solid var(--brt-bord-creme);
  border-radius: var(--brt-rayon-bloc);
  padding: 2px 16px;
  margin-top: 6px;
}

.brt-art { border-bottom: 1px solid #f4f0e4; padding: 13px 0; }
.brt-art:last-child { border-bottom: none; }

.brt-art-ligne {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.brt-art-nom { min-width: 0; }
.brt-art-libelle {
  display: block;
  font-size: 15px;
  font-weight: 500;
  color: #9aa3b4;
  transition: color .2s;
}
.brt-art-unite { display: block; font-size: 12px; color: #b3bac6; transition: color .2s; }

/* Un article a zero s'estompe mais reste lisible : c'est l'inventaire que
   l'eleveur consulte, pas seulement son panier. */
.brt-art-on .brt-art-libelle { color: var(--brt-texte); }
.brt-art-on .brt-art-unite   { color: var(--brt-texte-doux); }

/* Le compteur. 40 px de cible : ce sera manipule avec des gants. */
.brt-compteur { display: flex; align-items: center; gap: 9px; flex: none; }

.brt-pas {
  width: 40px; height: 40px;
  border-radius: 50%;
  font-size: 20px;
  line-height: 1;
  font-family: inherit;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: .15s;
}
.brt-moins { background: transparent; color: var(--brt-bleu); border: 1.5px solid var(--brt-bord); }
.brt-moins:hover { border-color: var(--brt-bleu); }
.brt-plus  { background: var(--brt-bleu); color: #fff; border: none; }
.brt-plus:hover { background: var(--brt-bleu-fonce); }
.brt-pas:active { transform: scale(.94); }

/* Le chiffre reste tapable : pour saisir 40, on ne clique pas quarante fois.
   Les fleches natives sont retirees, le compteur les remplace. */
.brt-qte {
  width: 62px;
  min-height: 40px;
  padding: 0;
  text-align: center;
  font-family: inherit;
  font-size: 17px;
  font-weight: 500;
  color: var(--brt-texte);
  background: transparent;
  border: none;
  -moz-appearance: textfield;
}
.brt-qte::-webkit-outer-spin-button,
.brt-qte::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.brt-qte:focus { outline: none; background: var(--brt-champ-fond); border-radius: 8px; }

.brt-art-libre { margin-top: 11px; }
.brt-art-libre input {
  width: 100%;
  min-height: 46px;
  padding: 11px 13px;
  font-family: inherit;
  font-size: 15px;
  color: var(--brt-texte);
  background: var(--brt-champ-fond);
  border: 1.5px solid var(--brt-bord);
  border-radius: var(--brt-rayon-champ);
}
.brt-art-libre input:focus {
  outline: none;
  background: #ffffff;
  border-color: var(--brt-bleu);
  box-shadow: 0 0 0 3px rgba(27, 100, 182, .15);
}

textarea {
  width: 100%;
  padding: 12px 14px;
  font-family: inherit;
  font-size: 16px;
  color: var(--brt-texte);
  background: var(--brt-champ-fond);
  border: 1.5px solid var(--brt-bord);
  border-radius: var(--brt-rayon-champ);
  resize: vertical;
}
textarea:focus {
  outline: none;
  background: #ffffff;
  border-color: var(--brt-bleu);
  box-shadow: 0 0 0 3px rgba(27, 100, 182, .15);
}

/* ------------------------------------------------------- une demande */

.brt-dem {
  background: #ffffff;
  border: 1px solid var(--brt-bord-creme);
  border-radius: var(--brt-rayon-bloc);
  padding: 15px 17px;
  margin-bottom: 11px;
}
.brt-dem-tete {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.brt-dem-resume { font-size: 15px; font-weight: 500; color: var(--brt-texte); line-height: 1.45; }
.brt-dem-date   { font-size: 12px; color: var(--brt-texte-doux); margin-top: 3px; }
.brt-dem-mot {
  margin: 13px 0 0;
  font-size: 13.5px;
  font-style: italic;
  color: var(--brt-texte-doux);
}

/* Ce qui a ete servi autrement que demande. Le bloc n'existe QUE s'il y a un
   ecart ou un mot du service : une commande servie complete reste muette, et
   l'eleveur ne voit rien de plus qu'avant. Un chiffre qui baisse sans
   explication, c'est le coup de telephone que cette boutique devait supprimer -
   d'ou le mot du service juste en dessous. */
.brt-servi {
  margin-top: 13px;
  padding: 10px 13px;
  background: var(--brt-blob-or);
  border-left: 4px solid var(--brt-or);
  border-radius: 0 var(--brt-rayon-champ) var(--brt-rayon-champ) 0;
}
.brt-servi-t {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #7a4d06;
}
.brt-servi-l {
  font-size: 14px;
  color: var(--brt-texte);
  margin-top: 3px;
  line-height: 1.45;
}
.brt-servi-mot {
  margin-top: 6px;
  font-size: 13.5px;
  font-style: italic;
  color: var(--brt-texte-doux);
}
.brt-dem-pied {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid #f4f0e4;
  text-align: right;
}

.brt-annuler {
  font-family: inherit;
  font-size: 13px;
  color: var(--brt-rouge);
  background: transparent;
  border: 1.5px solid #e8c3b8;
  border-radius: var(--brt-pilule);
  padding: 9px 18px;
  cursor: pointer;
  transition: .2s;
}
.brt-annuler:hover { border-color: var(--brt-rouge); background: var(--brt-rouge-fond); }

/* La frise : cinq points relies, les franchis en bleu. Elle dit d'un coup
   d'oeil ce qui se demandait jusqu'ici par telephone. */
.brt-frise { display: flex; align-items: center; margin-top: 15px; }
.brt-frise-point {
  width: 11px; height: 11px;
  border-radius: 50%;
  background: #e4e8ee;
  flex: none;
}
.brt-frise-trait { flex: 1; height: 2px; background: #e4e8ee; }
.brt-frise-point.brt-fait,
.brt-frise-trait.brt-fait { background: var(--brt-bleu); }

.brt-frise-mots {
  display: flex;
  margin-top: 7px;
  font-size: 9.5px;
  line-height: 1.3;
  color: var(--brt-texte-doux);
}
.brt-frise-mots span { flex: 1; text-align: center; padding: 0 2px; }
.brt-frise-mots span:first-child { text-align: left;  padding-left: 0; }
.brt-frise-mots span:last-child  { text-align: right; padding-right: 0; }

@media (min-width: 700px) {
  .brt-frise-mots { font-size: 11px; }
}

/* --------------------------------------------------------- pastilles */

.brt-pastille {
  display: inline-block;
  padding: 5px 13px;
  border-radius: var(--brt-pilule);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  flex: none;
}
.brt-p-deposee         { background: #fdf1d8; color: #7a4d06; }
.brt-p-prise_en_compte { background: #e9f1fb; color: #124879; }
.brt-p-preparee        { background: #e9f1fb; color: #124879; }
.brt-p-en_livraison    { background: #dce9f9; color: #0d3a68; }
.brt-p-livree          { background: #e7f1e8; color: #1f4a29; }
.brt-p-annulee         { background: #f1efe8; color: #5f5e5a; }

/* -------------------------------------------------------- historique */

.brt-histo {
  background: #ffffff;
  border: 1px solid var(--brt-bord-creme);
  border-radius: var(--brt-rayon-bloc);
  overflow: hidden;
}
.brt-histo-ligne {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 17px;
  border-bottom: 1px solid #f4f0e4;
}
.brt-histo-ligne:last-child { border-bottom: none; }
.brt-histo-resume { font-size: 14.5px; color: var(--brt-texte); }

/* Dans l'historique les lignes sont compactes : le bloc s'y resserre. */
.brt-histo-ligne .brt-servi   { margin-top: 9px; padding: 8px 11px; }
.brt-histo-ligne .brt-servi-l { font-size: 13.5px; }

/* Une demande annulee reste visible, barree : rien ne disparait jamais. */
.brt-barre { color: #9aa3b4; text-decoration: line-through; }

@media (min-width: 700px) {
  .brt-panier { padding: 2px 22px; }
  .brt-dem { padding: 18px 22px; }
}