/*
 * design-lot8.css — Broderies de la Cigogne, site PrestaShop 1.6 (lot 8 « design », oct. 2026)
 *
 * Chantier #j9aa : défauts gênants de la recette du 19/10 (recette-parcours-1.6.md, 2e passe)
 * qui ne demandent ni BO ni contenu. Chargé par header.tpl en dernier (après design-lot7.css),
 * avec ?v=N pour le cache Cloudflare.
 *
 * Contrairement aux lots 1 à 7, une bonne part de ce lot vise le BUREAU (≥ 1260 px), jamais relu
 * avant la recette : formulaires, mot de passe oublié, recherche, Mes alertes, paiement, fiche
 * produit, fenêtre Panier Ajax. Les règles du bureau sont TOUJOURS limitées aux pages concernées
 * (identifiant du <body>) : l'accueil, les catégories et le contact ne bougent pas, sauf le petit
 * champ de recherche ajouté en haut à droite de l'en-tête.
 *
 * Charte : brun #5e3f3b (titres, actions) · brun foncé #4a302d (texte fort) · taupe #625d52 (texte)
 *   taupe clair #908a7f (filets) · filet des boutons #807b71 · crème #f5f3ee
 *   olive #6b7a4f (succès) · brique #9a4a3a (erreurs)
 *
 * Retour arrière : retirer la ligne <link … design-lot8.css> de header.tpl.
 */

/* ════════════════════════════════════════════════════════════════════════════════════════
   A. TOUTES LARGEURS
   ════════════════════════════════════════════════════════════════════════════════════════ */

/* ── A1. Champ fautif signalé (14, 15, 17, 21, 31, 33) : classe posée par js/design-lot8.js
   d'après la liste des erreurs. Le marquage « form-error » du lot 7 (A3) s'applique ; on y
   ajoute les listes (uniform) et les champs hors .form-group. ── */
.form-group.form-error div.selector { border: 1px solid #9a4a3a !important; border-left-width: 3px !important; background-color: #f5f3ee; }
input.bro-champ-erreur, select.bro-champ-erreur, textarea.bro-champ-erreur {
  border: 1px solid #9a4a3a !important; border-left-width: 3px !important; background-color: #f5f3ee !important; box-shadow: none;
}

/* Code postal (21, 30) : « uniform » le passait en blanc alors que les autres champs sont gris */
#add_address .form-group:not(.form-error):not(.form-ok) input#postcode.uniform-input { background-color: #d8d8d8; }

/* ── A2. Fenêtre « Produit ajouté au panier » (06b, Panier Ajax = Oui), de 768 px au bureau :
   Jost, brun, plus de vert vif ni d'Arial (sous 768 : parcours-mobile.css § 5). ── */
@media (min-width: 768px) {
  #layer_cart { font-family: "Jost", "Segoe UI", Arial, sans-serif; color: #4a302d; border-radius: 0; }
  #layer_cart .layer_cart_product h2, #layer_cart .layer_cart_cart h2 {
    font-family: inherit; font-size: 20px; line-height: 1.3; font-weight: 500; color: #4a302d; letter-spacing: 0;
  }
  #layer_cart .layer_cart_product h2 i { color: #6b7a4f; }
  #layer_cart .layer_cart_product .layer_cart_product_info,
  #layer_cart .layer_cart_cart .layer_cart_row { font-family: inherit; font-size: 15px; color: #625d52; }
  #layer_cart .layer_cart_product .layer_cart_product_info #layer_cart_product_title { font-family: inherit; font-size: 18px; color: #4a302d; }
  #layer_cart .layer_cart_product_info strong.dark, #layer_cart .layer_cart_row strong.dark { font-weight: 500; color: #4a302d; }
  #layer_cart .layer_cart_product .product-image-container { border-color: rgba(94, 63, 59, .15); }
  #layer_cart .layer_cart_cart { background: #f5f3ee; border-left-color: rgba(94, 63, 59, .15); }
  #layer_cart .layer_cart_cart h2 { border-bottom-color: rgba(94, 63, 59, .18); }
  #layer_cart .button-container .btn { font-family: inherit; }
  #layer_cart .button-container .button-medium span { font-family: inherit; font-weight: 500; font-size: 17px; }
  /* « Continuer mes achats » : bouton secondaire de la charte (le gris foncé disparaît) */
  #layer_cart .button-container span.exclusive-medium, #layer_cart .button-container .continue {
    font: 500 16px/20px "Jost", "Segoe UI", Arial, sans-serif; color: #553f3b; text-shadow: none;
    background: #fff; background: linear-gradient(to bottom, #ffffff, #e4e7e0); border: 1px solid #807b71; border-radius: 0;
  }
  #layer_cart .button-container .continue span, #layer_cart .button-container span.exclusive-medium span { color: #553f3b; border: 0; background: none; }
  #layer_cart .button-container .continue i { color: #908a7f; }
  #layer_cart .cross:before { color: #5e3f3b; }
}

/* ── A3. Champ de recherche du bureau (60), ajouté par header.tpl : masqué sous 1260 px
   (le menu burger a le sien). ── */
.bro-recherche-bureau { display: none; }

/* ════════════════════════════════════════════════════════════════════════════════════════
   B. SOUS 1260 px (téléphone et tablette)
   ════════════════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1259px) {
  /* ── B1. Date de naissance (32, 33, 16) : l'année était coupée (« 19… ») : parts inégales
     (jour étroit, mois et année plus larges), moins de marge à droite du texte. ── */
  .form-group:has(> .row #days) > .row > div:nth-child(1) { flex: 0 0 64px; }
  .form-group:has(> .row #days) > .row > div:nth-child(2) { flex: 1 1 0; }
  .form-group:has(> .row #days) > .row > div:nth-child(3) { flex: 0 0 88px; }
  .form-group:has(> .row #days) div.selector span { padding: 0 18px 0 6px !important; font-size: 15px !important; }
  .form-group:has(> .row #days) div.selector:after { right: 6px; border-left-width: 5px; border-right-width: 5px; border-top-width: 6px; }

  /* ── B2. Bouton « Enregistrer » sorti du cadre (30, 31, à 768) : le cadre contient le bouton ── */
  #address #add_address p.submit2 { display: flow-root; margin-bottom: 0; }
}

@media (max-width: 767px) {
  /* ── B3. Identification au téléphone (14, 15) : « Déjà inscrit ? » avant « Créez votre compte ». ── */
  #authentication #center_column .row:has(> div > #login_form) { display: flex; flex-direction: column; }
  #authentication #center_column .row:has(> div > #login_form):before,
  #authentication #center_column .row:has(> div > #login_form):after { display: none; }
  #authentication #center_column .row > div:has(> #login_form) { order: -1; }
}

/* ════════════════════════════════════════════════════════════════════════════════════════
   C. BUREAU (1260 px et plus) — pages listées seulement
   ════════════════════════════════════════════════════════════════════════════════════════ */
@media (min-width: 1260px) {

  /* ── C1. Recherche dans l'en-tête (60) : petit champ au-dessus du panier, aligné sur lui.
     L'en-tête du bureau est centré sur 1250 px : le panier est à 50 % + 465 px. ── */
  .bro-recherche-bureau {
    display: flex; position: absolute; z-index: 5; top: 36px; left: calc(50% + 465px); width: 150px; margin: 0;
    border-bottom: 1px solid #908a7f;
  }
  .bro-recherche-bureau label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .bro-recherche-bureau input[type=search] {
    flex: 1 1 auto; min-width: 0; height: 30px; margin: 0; padding: 0 4px; border: 0; border-radius: 0;
    background: transparent; box-shadow: none; -webkit-appearance: none; appearance: none;
    font: 400 15px/30px "Jost", "Segoe UI", Arial, sans-serif; color: #4a302d;
  }
  .bro-recherche-bureau input[type=search]::placeholder { color: #807b71; opacity: 1; }
  .bro-recherche-bureau input[type=search]:focus { outline: 0; background: rgba(255, 255, 255, .55); }
  .bro-recherche-bureau button {
    flex: 0 0 auto; width: 30px; height: 30px; margin: 0; padding: 0; border: 0; background: none; cursor: pointer;
    color: #625d52; font-size: 16px; line-height: 30px;
  }
  .bro-recherche-bureau button:hover, .bro-recherche-bureau button:focus { color: #4a302d; }
  .bro-recherche-bureau:focus-within { border-bottom-color: #5e3f3b; }

  /* ── C2. Pages remises dans la colonne centrée du site (comme « Mon compte » : 1000 px à
     125 px du bord du conteneur) : mot de passe oublié (40, 41, 43, 45), recherche (55),
     Mes alertes (35b, sans la colonne des catégories). ── */
  #password #center_column, #search #center_column, body[id^="module-mailalerts"] #center_column {
    float: none; width: 1030px !important; margin-left: 125px; padding-top: 50px;
  }
  #password #center_column { padding-top: 75px; }
  body[id^="module-mailalerts"] #left_column, body[id^="module-mailalerts"] #mf_barre_gauche { display: none !important; }

  /* ── C3. Résultats de recherche (55) : grille de 3 vignettes par ligne, rangées alignées
     même quand un nom tient sur deux lignes. ── */
  #search ul.product_list.grid { display: flex; flex-wrap: wrap; }
  #search ul.product_list.grid:before, #search ul.product_list.grid:after { display: none; }
  #search ul.product_list.grid > li { float: none; display: flex; flex-direction: column; }
  #search ul.product_list.grid > li .product-container { flex: 1 1 auto; }
  #search ul.product_list.grid > li .product-image-container { text-align: center; }
  #search ul.product_list.grid > li .product-image-container img { margin: 0 auto; }

  /* ── C4. Formulaires du compte et du tunnel (16, 17, 20, 21, 30, 31, 32, 33, 40…, 22) :
     libellé AU-DESSUS du champ, champs d'une même largeur alignés à gauche (au lieu du libellé à
     gauche et du champ à 700 px à droite), un peu d'air entre les lignes. Même dessin que la
     tablette (lots 6 et 7). ── */
  #authentication #center_column .form-group > label,
  #address #add_address .form-group > label,
  #identity .std .form-group > label,
  #password #center_column .form-group > label,
  #order #ordermsg > label, #order .address_delivery > label, #order #address_invoice_form > label {
    display: block; float: none; width: auto; margin: 0 0 4px; padding: 0; text-align: left;
    font: 600 14px/1.35 "Jost", "Segoe UI", Arial, sans-serif; color: #4a302d;
  }
  #authentication #center_column .form-group,
  #address #add_address .form-group,
  #identity .std .form-group,
  #password #center_column .form-group { margin: 0 0 14px; text-align: left; }
  #authentication #center_column .form-group .form-control,
  #address #add_address .form-group .form-control,
  #identity .std .form-group .form-control,
  #password #center_column .form-group .form-control,
  #order #ordermsg .form-control {
    display: block; float: none !important; width: 100% !important; max-width: 460px; height: 40px; margin: 0;
    padding: 0 10px; font: 400 15px "Jost", "Segoe UI", Arial, sans-serif; color: #333;
  }
  #address #add_address .form-group textarea.form-control,
  #order #ordermsg textarea.form-control { height: 120px; padding: 8px 10px; max-width: 700px; resize: vertical; }
  #order #ordermsg { clear: both; margin: 18px 0 8px; }
  #authentication #center_column .form-group .form_info, #authentication #center_column .form-group span.form_info { display: block; margin: 4px 0 0; color: #625d52; font-size: 13px; }
  /* « Connexion » / « Créez votre compte » : les champs suivent la largeur du cadre */
  #authentication #login_form .form-group .form-control, #authentication #create-account_form .form-group .form-control { max-width: none; }
  #authentication #login_form .form-group > span { display: block; }
  /* Téléphone fixe (20, 30) : même largeur que les autres champs (le thème le mettait à 270 px,
     flottant), la note « ** au moins un numéro » sous le champ, en taupe */
  #address #add_address .form-group.phone-number { float: none; width: auto; margin-right: 0; }
  #address #add_address .form-group.phone-number + p { padding: 0; }
  #address #add_address p.inline-infos { float: none; clear: both; margin: -8px 0 14px; padding: 0; text-align: left; color: #625d52; font-size: 13px; }
  #address #add_address .form-group sup, #identity .std .form-group sup, #authentication #center_column .form-group sup { color: #9a4a3a; }
  /* Listes (pays, date de naissance, adresse du tunnel) : au style des champs */
  #authentication #center_column div.selector, #address #add_address div.selector,
  #identity .std div.selector, #order .address_select + span, #order div.selector:has(> .address_select) {
    position: relative; float: none !important; height: 40px; padding: 0; background: #e6e8e2; border: 1px solid #d6d4d4; box-sizing: border-box;
  }
  #address #add_address div.selector, #order div.selector:has(> .address_select) { width: 100% !important; max-width: 460px; }
  #authentication #center_column div.selector span, #address #add_address div.selector span,
  #identity .std div.selector span, #order div.selector:has(> .address_select) span {
    display: block; float: none !important; width: auto !important; height: 38px; line-height: 38px; padding: 0 30px 0 10px;
    background: none; font: 400 15px/38px "Jost", "Segoe UI", Arial, sans-serif; color: #333; text-shadow: none;
    overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  }
  #authentication #center_column div.selector:after, #address #add_address div.selector:after,
  #identity .std div.selector:after, #order div.selector:has(> .address_select):after {
    content: ""; position: absolute; right: 11px; top: 16px; pointer-events: none;
    border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 7px solid #807b71;
  }
  #authentication #center_column div.selector select, #address #add_address div.selector select,
  #identity .std div.selector select, #order div.selector:has(> .address_select) select { top: 0; left: 0; width: 100% !important; height: 38px; }
  /* Date de naissance : trois listes à parts inégales sur 460 px */
  .form-group:has(> .row #days) > .row { display: flex; gap: 8px; margin: 0; max-width: 460px; }
  .form-group:has(> .row #days) > .row:before, .form-group:has(> .row #days) > .row:after { display: none; }
  .form-group:has(> .row #days) > .row > div { float: none; width: auto; padding: 0; min-width: 0; }
  .form-group:has(> .row #days) > .row > div:nth-child(1) { flex: 0 0 76px; }
  .form-group:has(> .row #days) > .row > div:nth-child(2) { flex: 1 1 0; }
  .form-group:has(> .row #days) > .row > div:nth-child(3) { flex: 0 0 96px; }
  .form-group:has(> .row #days) div.selector { width: 100% !important; }
  /* Titre M. / Mme : sur une ligne, sous le libellé */
  #authentication #account-creation_form .clearfix:has(> .radio-inline) > label { display: block; font: 600 14px/1.35 "Jost", "Segoe UI", Arial, sans-serif; color: #4a302d; margin: 0 0 4px; }
  /* « *Champ requis » : en taupe, au-dessus du bouton, plus en rouge vif à côté */
  #authentication #account-creation_form p.required, #address p.required, #identity p.required {
    float: none !important; margin: 0 0 12px; text-align: left; color: #625d52; font-size: 13px;
  }
  #authentication #account-creation_form p.required sup, #address p.required sup, #identity p.required sup,
  #address p.required font, #identity p.required font { color: #908a7f !important; }
  #authentication #account-creation_form .submit { display: flex; flex-direction: column; align-items: flex-start; }
  #authentication #account-creation_form .submit p.required, #authentication #account-creation_form .submit span.required { order: -1; }
  #authentication #account-creation_form .submit .button-medium { float: none; margin: 0; }
  /* Boutons d'envoi : dans le cadre, alignés sur les champs */
  #address #add_address p.submit2 { display: flow-root; margin: 6px 0 0; text-align: left; }
  #address #add_address p.submit2 #submitAddress, #identity .std .form-group > button.button-medium,
  #password #center_column .submit .button-medium { float: none; margin: 0; }
  #password #center_column p.submit { text-align: left; margin: 6px 0 0; }
  /* Informations (32) : la mention CNIL sous le bouton, alignée à gauche */
  #identity .std .form-group:has(> button) { overflow: hidden; }
  #identity #security_informations { clear: both; float: none; text-align: left; margin: 12px 0 0; font-size: 13px; color: #625d52; }
  /* Tunnel, étape Adresse (22) : la liste d'adresses lisible, le bouton sous le message */
  #order .address_delivery.select, #order #address_invoice_form { float: none; width: auto; }

  /* ── C5. Paiement (25) : cartes comme au téléphone (lot 7, B8) — logo à gauche, texte à
     droite, logos des cartes dessous, « › », toute la carte cliquable. ── */
  #order p.payment_module { width: auto !important; margin: 0 0 12px; padding: 0; background: none; border: 0; }
  #order p.payment_module > a {
    display: block; position: relative; min-height: 84px; padding: 16px 40px 16px 120px !important;
    text-align: left; font: 500 17px/1.35 "Jost", "Segoe UI", Arial, sans-serif; color: #4a302d;
    background: #fff; border: 1px solid rgba(94, 63, 59, .25); border-radius: 0; text-decoration: none;
  }
  #order p.payment_module > a:hover { border-color: #5e3f3b; background: #fbfaf7; }
  #order p.payment_module > a > img:first-child {
    position: absolute; left: 16px; top: 50%; transform: translateY(-50%); width: 86px; height: auto; max-height: 60px; object-fit: contain; margin: 0;
  }
  #order p.payment_module > a > img:not(:first-child) { height: 22px; width: auto; margin: 6px 4px 0 0; vertical-align: middle; }
  #order p.payment_module > a font { display: block; font-size: 14px; color: #625d52; margin-top: 2px; }
  #order p.payment_module > a:after {
    content: "\203A"; position: absolute; right: 14px; top: 50%; margin-top: -16px; font-size: 30px; line-height: 30px; color: #908a7f;
  }
  #order p.payment_module .mf_cic_logo1, #order p.payment_module .mf_cic_logo2, #order p.payment_module .mf_cic_logo3 { display: none; }

  /* ── C6. Fiche produit (05) : listes Dimension / Matière plus lisibles (toute la largeur de la
     colonne, 38 px, police 15 px, chevron de la charte au lieu de la flèche grise). ── */
  #product #attributes .attribute_list { width: 100%; }
  #product #attributes .attribute_label { font: 500 14px/1.4 "Jost", "Segoe UI", Arial, sans-serif; color: #4a302d; }
  #product #attributes div.selector {
    position: relative; width: 100% !important; max-width: 300px; height: 38px; padding: 0;
    background: #fff; border: 1px solid #807b71; box-sizing: border-box;
  }
  #product #attributes div.selector span {
    display: block; width: auto !important; height: 36px; padding: 0 30px 0 10px; background: none;
    font: 400 15px/36px "Jost", "Segoe UI", Arial, sans-serif; color: #4a302d; text-shadow: none;
    overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  }
  #product #attributes div.selector:after {
    content: ""; position: absolute; right: 11px; top: 15px; pointer-events: none;
    border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 7px solid #807b71;
  }
  #product #attributes div.selector select { top: 0; left: 0; width: 100% !important; height: 36px; }
}