/*
 * design-lot9.css — Broderies de la Cigogne, site PrestaShop 1.6 (lot 9 « cosmétiques », oct. 2026)
 *
 * Chantier #4i1v : défauts COSMÉTIQUES de la recette du 19/10 (recette-parcours-1.6.md, 2e passe)
 * qui se règlent dans le thème, sans BO ni contenu saisi par Babette. Chargé par header.tpl en
 * dernier (après design-lot8.css), avec ?v=N pour le cache Cloudflare. Les numéros entre
 * parenthèses renvoient aux pages de la recette.
 *
 * Bureau (≥ 1260 px) : règles TOUJOURS limitées aux pages concernées (identifiant du <body>) ;
 * l'accueil, les catégories (sauf la catégorie parente « Linge de maison ») et les fiches produit
 * ne bougent pas.
 *
 * 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-lot9.css> de header.tpl.
 */

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

/* ── A1. Contour de focus (13) : plus de double cadre noir sur le bouton après l'envoi ; un
   filet taupe discret, seulement quand on navigue au clavier. ── */
#columns .button:focus, #columns .btn:focus, #columns button:focus { outline: 2px solid #908a7f; outline-offset: 2px; box-shadow: none; }
#columns .button:focus:not(:focus-visible), #columns .btn:focus:not(:focus-visible), #columns button:focus:not(:focus-visible) { outline: 0; }

/* ── A2. Case CGV (24) : quand on clique « Suivant » sans l'avoir cochée, la ligne est
   encadrée en brique (classe posée par js/design-lot9.js) et amenée à l'écran. ── */
#order .checkbox.bro-cgv-a-cocher, #order-opc .checkbox.bro-cgv-a-cocher {
  outline: 1px solid #9a4a3a; outline-offset: 6px; background: #f5f3ee; box-shadow: -6px 0 0 0 #f5f3ee, 6px 0 0 0 #f5f3ee;
}
#order .checkbox.bro-cgv-a-cocher label, #order-opc .checkbox.bro-cgv-a-cocher label { color: #4a302d; }

/* ── A3. Logo du transporteur : jamais plus large que sa cellule (en ligne il est déjà réduit
   à 100 × 79 px ; sur le banc, l'image d'origine faisait déborder la page au bureau). ── */
.delivery_option_logo img, td.delivery_option_logo img { max-width: 100px; height: auto; }

/* ── A4. Mentions légales (49) : titres du contenu en gris clair (#9b9b9b, écrit dans le
   texte) sur fond beige : remis au brun des autres pages, sans toucher au contenu. ── */
#cms #center_column .rte h1 span[style*="9b9b9b"], #cms #center_column .rte h2 span[style*="9b9b9b"],
#cms #center_column .rte h3 span[style*="9b9b9b"] { color: #5e3f3b !important; }

/* ── A5. Produit introuvable (58) : plus de numéros « 1. 2. … » collés aux boutons des
   catégories ; la colonne des catégories (incomplète, sous l'en-tête au bureau) est masquée. ── */
.alert ol:has(> li > .bro-introuvable), .alert ol:has(.bro-liens-categories) { list-style: none; padding-left: 0; margin-left: 0; }
.bro-introuvable .bro-liens-categories, .bro-introuvable .bro-liens-categories li { list-style: none; }
body#product:has(.bro-introuvable) #left_column { display: none !important; }

/* ── A6. Mes alertes (35b) : la colonne des catégories, vide, est masquée aussi au téléphone et
   à la tablette (le lot 8 l'avait fait au bureau). ── */
body[id^="module-mailalerts"] #left_column { display: none !important; }

/* ── A7. Historique des commandes (27) et Mes adresses (29) : introductions alignées à
   gauche, sans gras ; dans Mes adresses, les deux phrases redondantes (« Vos adresses sont
   listées ci-dessous », « Pensez à les tenir à jour… ») sont masquées. ── */
#history #center_column p.info-title { text-align: left; font-weight: 400; }
#addresses #center_column .addresses > p { display: none; }
#addresses #center_column #mf_contact > p, #addresses #center_column > p { text-align: left; }

/* ── A8. Recherche sans résultat (56) : la ligne « 0 résultats ont été trouvés. » répétait
   l'encadré « Aucun résultat trouvé ». ── */
#search #center_column h1.page-heading:has(~ .alert-warning) .heading-counter { display: none !important; }

/* ── A9. Date de naissance (16, 32, 33), toutes largeurs : le mois s'affiche en entier
   (« Septembre », coupé « Septe… » à 360 et 768, et au bureau) : jour et année étroits, le mois prend le reste. ── */
.form-group:has(> .row #days) > .row > div:nth-child(1) { flex: 0 0 58px !important; width: auto !important; max-width: none !important; }
.form-group:has(> .row #days) > .row > div:nth-child(2) { flex: 1 1 auto !important; width: auto !important; max-width: none !important; }
.form-group:has(> .row #days) > .row > div:nth-child(3) { flex: 0 0 76px !important; width: auto !important; max-width: none !important; }
.form-group:has(> .row #days) > .row > div { padding: 0 !important; }
.form-group:has(> .row #days) div.selector { width: 100% !important; }
.form-group:has(> .row #days) div.selector span { width: auto !important; }


/* ════════════════════════════════════════════════════════════════════════════════════════
   B. SOUS 1260 px (téléphone et tablette)
   ════════════════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1259px) {
  /* ── B3. Boutons radio M. / Mme (16) : plus grands, espacés, cible tactile confortable. ── */
  #account-creation_form .radio-inline, #identity .std .radio-inline { margin: 4px 22px 8px 0; padding-left: 0; }
  #account-creation_form .radio-inline label, #identity .std .radio-inline label { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; font-size: 15px; }
  #account-creation_form div.radio, #identity .std div.radio,
  #account-creation_form div.radio span, #identity .std div.radio span,
  #account-creation_form div.radio input, #identity .std div.radio input { width: 20px !important; height: 20px !important; }
  #account-creation_form div.radio span, #identity .std div.radio span { background: #fff !important; border: 1px solid #807b71; border-radius: 50%; box-sizing: border-box; }
  #account-creation_form div.radio span.checked, #identity .std div.radio span.checked { background: radial-gradient(circle, #5e3f3b 0 4px, #fff 5px) !important; }

  /* ── B4. Catégories (03, 02) : un peu d'air entre les rangées de vignettes ; boutons des
     sous-catégories un peu plus gras ; « CHEMIN DE TABLE » tient sur une ligne dans la colonne. ── */
  #category ul.product_list.grid > li, #search ul.product_list.grid > li { margin-bottom: 18px; }
  #category #subcategories a.subcategory-name { font-weight: 600; }
  #category #left_column .block_content li li > a, #product #left_column .block_content li li > a { white-space: nowrap; }

  /* ── B5. Résultats de recherche (55, 61) : photos centrées dans leur colonne, comme les noms. ── */
  #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; }
}

/* ── B6. Fenêtre « Produit ajouté au panier » à la tablette étroite (06b, 768 à 991 px : les deux
   parties sont empilées) : plus de grand vide réservé sous les totaux, les deux boutons côte à côte,
   de même hauteur. ── */
@media (min-width: 768px) and (max-width: 991px) {
  #layer_cart .layer_cart_cart { padding-bottom: 20px; min-height: 0; }
  #layer_cart .layer_cart_cart .button-container {
    position: static; display: flex; justify-content: space-between; align-items: stretch; gap: 12px; padding: 14px 0 0;
  }
  #layer_cart .layer_cart_cart .button-container > * { float: none; margin: 0 !important; display: inline-flex; align-items: center; }
}

/* ── B7. Tablette (768 à 1259 px) ── */
@media (min-width: 768px) and (max-width: 1259px) {
  /* Formulaires (12, 16, 20, 30, 32) : champs et listes de toute la largeur du cadre, comme le
     bouton (ils s'arrêtaient aux deux tiers). */
  #authentication #login_form .form-control, #authentication #create-account_form .form-control,
  #account-creation_form .form-group .form-control, #identity .std .form-group .form-control,
  #add_address .form-group .form-control, #add_address .form-group textarea {
    width: 100% !important; max-width: none !important;
  }
  #add_address .form-group div.selector, #add_address .form-group div.selector span { width: 100% !important; max-width: none !important; box-sizing: border-box; }
  .form-group:has(> .row #days) > .row { max-width: none !important; }

  /* Mon compte (26, 39) : une seule colonne régulière au lieu de 3 + 1 */
  #my-account #center_column div:has(> ul.myaccount-link-list) { width: 100%; float: none; }
  #my-account #center_column div:has(> ul.myaccount-link-list) + div:has(> ul.myaccount-link-list) ul.myaccount-link-list { margin-top: -7px; border-top: 0; }

  /* Tunnel, étape Adresse (22) : cadres Livraison / Facturation de même hauteur */
  #order .addresses .row:has(> div > #address_delivery), #order-opc .addresses .row:has(> div > #address_delivery) { display: flex; }
  #order .addresses .row:has(> div > #address_delivery):before, #order .addresses .row:has(> div > #address_delivery):after { display: none; }
  #order .addresses .row:has(> div > #address_delivery) > div { display: flex; }
  #order .addresses .row:has(> div > #address_delivery) > div > ul.address { flex: 1 1 auto; }
}

@media (max-width: 767px) {
  /* ── B8. Paiement (25) : « Quantité : 1 » à droite, près du prix, au lieu d'être seul sous la photo. ── */
  #order-detail-content #cart_summary tr.cart_item td.cart_quantity:has(> span:only-child) { justify-content: flex-end; text-align: right; }
}

/* ════════════════════════════════════════════════════════════════════════════════════════
   C. FENÊTRE PANIER AJAX, 768 px ET PLUS (06b) : centrée dans l'écran (elle se collait en haut,
   sous l'en-tête) ; jamais plus haute que l'écran.
   ════════════════════════════════════════════════════════════════════════════════════════ */
@media (min-width: 768px) {
  #layer_cart {
    position: fixed !important; top: 50% !important; left: 50%; transform: translate(-50%, -50%);
    width: 84%; max-width: 1000px; margin: 0 !important; max-height: calc(100vh - 32px); overflow-y: auto;
  }
}

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

  /* ── D1. Titres de page (12, 22, 23, 25, 26, 28, 29, 35, 37, 47, 55, 56, 59…) : Jost brun,
     capitales espacées, comme au téléphone, au lieu de l'Open Sans fin et gris. Pas sur
     l'accueil, les catégories ni les fiches produit (inchangés). ── */
  body:not(#index):not(#category):not(#product):not(#cms) #center_column h1.page-heading,
  body:not(#index):not(#category):not(#product):not(#cms) #center_column .page-heading,
  #authentication #center_column h3.page-subheading, #addresses #center_column h3.page-subheading,
  #identity #center_column h1.page-subheading, #address #center_column h1.page-subheading,
  #order #center_column h3.page-subheading, #order-opc #center_column h3.page-subheading, #order #center_column .carrier_title {
    font-family: "Jost", "Segoe UI", Arial, sans-serif; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: #5e3f3b;
  }
  body:not(#index):not(#category):not(#product):not(#cms) #center_column h1.page-heading { font-size: 24px; line-height: 1.25; }
  #authentication #center_column h3.page-subheading, #addresses #center_column h3.page-subheading,
  #order #center_column h3.page-subheading { font-size: 17px; }
  #order #center_column .carrier_title { font-size: 14px; }
  #identity #center_column h1.page-subheading, #address #center_column h1.page-subheading { font-size: 20px; }
  body:not(#index):not(#category):not(#product):not(#cms) #center_column h1.page-heading .heading-counter { font-family: "Jost", "Segoe UI", Arial, sans-serif; letter-spacing: 0; text-transform: none; font-weight: 400; color: #625d52; }
  /* Mon compte (26) : l'introduction en Jost aussi */
  #my-account #center_column p.info-account, #addresses #center_column #mf_contact > p, #history #center_column p.info-title,
  #order-slip #center_column p, #discount #center_column p { font-family: "Jost", "Segoe UI", Arial, sans-serif; font-size: 15px; color: #625d52; }

  /* ── D2. Pages remises dans la colonne centrée du site (comme « Mon compte » : 140 → 1140 px)
     au lieu de partir à 15 px du bord sous la volute : bons de réduction (35), historique (27),
     plan du site (59), page introuvable (57), produit introuvable (58). ── */
  #discount #center_column, #history #center_column, #sitemap #center_column, #pagenotfound #center_column,
  body#product:has(.bro-introuvable) #center_column {
    float: none; width: 1030px !important; margin-left: 125px; padding-top: 50px;
  }
  #sitemap #sitemap_content, #sitemap #listpage_content { margin-left: 0; margin-right: 0; }
  #history #mf_history { width: auto; }
  /* Date de naissance au bureau : jour et année un peu plus larges (flèche de 30 px) */
  .form-group:has(> .row #days) > .row > div:nth-child(1) { flex-basis: 76px !important; }
  .form-group:has(> .row #days) > .row > div:nth-child(3) { flex-basis: 96px !important; }
  #sitemap #center_column .sitemap_block .page-subheading, #sitemap #center_column h3 {
    font-family: "Jost", "Segoe UI", Arial, sans-serif; font-weight: 500; letter-spacing: .06em; color: #5e3f3b;
  }
  #sitemap #center_column .sitemap_block li a, #sitemap #center_column #listpage_content li a { font-family: "Jost", "Segoe UI", Arial, sans-serif; font-size: 14px; }

  /* Message « Vous êtes bien déconnecté(e) » (36) : dans la colonne centrée, pas sous la volute */
  #center_column > .bro-message-deconnexion { margin: 30px 0 0 125px; max-width: 1000px; }

  /* ── D3. Panier au bureau (07) : tableau en Jost, lisible (14 px), totaux sobres. ── */
  #order #cart_summary, #order #cart_summary th, #order #cart_summary td, #order #cart_summary .product-name a,
  #order-opc #cart_summary, #order-opc #cart_summary th, #order-opc #cart_summary td {
    font-family: "Jost", "Segoe UI", Arial, sans-serif;
  }
  #order #cart_summary td, #order-opc #cart_summary td { font-size: 14px; color: #4a302d; }
  #order #cart_summary thead th, #order-opc #cart_summary thead th { font-size: 13px; font-weight: 500; color: #625d52; }
  #order #cart_summary .product-name a { font-size: 15px; color: #4a302d; }
  #order #cart_summary tfoot td, #order-opc #cart_summary tfoot td { font-size: 14px; }
  #order #cart_summary tfoot td#total_price_container, #order #cart_summary tfoot .total_price_container { font-size: 18px; color: #4a302d; }

  /* ── D4. Étape Livraison (23) : case CGV et phrase lisibles. ── */
  #order p.checkbox:has(> #cgv), #order p.checkbox:has(#cgv) { font: 400 15px/1.45 "Jost", "Segoe UI", Arial, sans-serif; color: #4a302d; }
  #order p.checkbox:has(#cgv) label { font-size: 15px; font-weight: 400; color: #4a302d; }
  #order p.checkbox:has(#cgv) a { color: #5e3f3b; text-decoration: underline; }

  /* ── D5. Paiement (25) : petits textes du récapitulatif à 14 px, plus foncés. ── */
  #order #order-detail-content, #order #order-detail-content td, #order #order-detail-content th { font-family: "Jost", "Segoe UI", Arial, sans-serif; }
  #order #order-detail-content td, #order #order-detail-content th { font-size: 14px; color: #4a302d; }

  /* ── D6. Mes adresses (29) : titre de la carte en Jost brun ; le bouton « Ajouter une nouvelle
     adresse » sous les cartes, à gauche, au lieu d'être isolé à droite. ── */
  #addresses #center_column .address h3.page-subheading { font-size: 17px; }
  #addresses #center_column .clearfix.main-page-indent { text-align: left; }
  #addresses #center_column .clearfix.main-page-indent .btn { float: none; }

  /* ── D7. Catégorie parente (03) : noms des sous-catégories en Jost (au lieu d'Open Sans). ── */
  #category #subcategories a.subcategory-name { font-family: "Jost", "Segoe UI", Arial, sans-serif; font-weight: 500; letter-spacing: .04em; color: #5e3f3b; }

  /* ── D8. Contact (47) : libellés en Jost, liste « Objet » et champs à la hauteur des autres
     formulaires ; plus d'astérisque sur « Référence de commande » (facultatif, comme au téléphone). ── */
  #contact #center_column .contact-form-box label { font: 600 14px/1.35 "Jost", "Segoe UI", Arial, sans-serif; color: #4a302d; }
  #contact #center_column .contact-form-box label:not([for]) font { display: none; }
  #contact #center_column .contact-form-box .form-control { height: 36px; font: 400 15px "Jost", "Segoe UI", Arial, sans-serif; }
  #contact #center_column .contact-form-box textarea.form-control { height: auto; min-height: 140px; }
  #contact #center_column .contact-form-box div.selector {
    position: relative; width: 100% !important; max-width: 300px; height: 36px; padding: 0; background: #e6e8e2; border: 1px solid #d6d4d4; box-sizing: border-box;
  }
  #contact #center_column .contact-form-box div.selector span {
    display: block; width: auto !important; height: 34px; padding: 0 30px 0 10px; background: none;
    font: 400 15px/34px "Jost", "Segoe UI", Arial, sans-serif; color: #333; text-shadow: none; text-align: left; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  }
  #contact #center_column .contact-form-box div.selector:after {
    content: ""; position: absolute; right: 11px; top: 14px; pointer-events: none;
    border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 7px solid #807b71;
  }
  #contact #center_column .contact-form-box div.selector select { top: 0; left: 0; width: 100% !important; height: 34px; }

  /* ── D9. Mes alertes, bons, avoirs : titres et boutons alignés sur Mon compte. ── */
  #discount #center_column .footer_links, #history #center_column .footer_links { text-align: left; }
}