/* L’Abritant — feuille compte : connexion, inscription, mot de passe, espace client, commandes, retours (#authentication #registration #password #my-account #identity #addresses #address #history #order-detail #order-follow #order-return #order-slip #discount #guest-tracking, + #module-psgdpr-gdpr, page du module psgdpr dans le compte).
   Chargée sur toutes les pages : chaque règle est limitée à l’identifiant de page porté par <body> (Hummingbird : body id = page_name).
   Uniquement des jetons var(--…), aucun !important, même couche @layer que l’original quand on redéclare Hummingbird.

   Design system V2 : cartes F1_Connexion, F2_Inscription, F3_MotDePasse, F4_EspaceClient, F5_Commandes, F6_RetoursRetractation.
   Deux sortes de règles :
   1. Classes des cartes (f-*, f1-* … f6-*, « classes locales à verser au kit » ; f-nav = pg-compte-nav annoncé par F4) : hors couche, comme maquettes.css.
   2. Adaptation de Hummingbird (boutons Bootstrap, tableaux, formulaires natifs) : @layer ps-pages, la couche des pages de Hummingbird.

   Sommaire : §1 commun (titres, champs, mot de passe, messages) · §2 F1 connexion · §3 F2 inscription et informations ·
   §4 F3 mot de passe · §5 cadre du compte et navigation · §6 F4 tableau de bord et adresses · §7 F5 commandes ·
   §8 F6 retours et suivi sans compte · §9 adaptation de Hummingbird · §10 paliers (1 200 / 992 / 768 / 480 / 380 px). */


/* §1 Commun */
:is(#authentication, #registration, #password, #my-account, #identity, #addresses, #address, #history, #order-detail, #order-follow, #order-return, #order-slip, #discount, #guest-tracking, #module-psgdpr-gdpr) :is(.f-titre) { margin: 0; color: var(--texte); font-size: clamp(32px, 3.4vw, 48px); line-height: 1.1; }
:is(#authentication, #registration, #password, #my-account, #identity, #addresses, #address, #history, #order-detail, #order-follow, #order-return, #order-slip, #discount, #guest-tracking, #module-psgdpr-gdpr) .f-plein { width: 100%; }
:is(#authentication, #registration, #password, #my-account, #identity, #addresses, #address, #history, #order-detail, #order-follow, #order-return, #order-slip, #discount, #guest-tracking, #module-psgdpr-gdpr) .ab-champ { max-width: none; }
:is(#authentication, #registration, #password, #guest-tracking) .f-reference { text-transform: uppercase; letter-spacing: .04em; }
:is(#authentication, #registration, #password, #my-account, #identity, #addresses, #address, #history, #order-detail, #order-follow, #order-return, #order-slip, #discount, #guest-tracking, #module-psgdpr-gdpr) .f-message__ligne { display: block; }
:is(#authentication, #registration, #password, #my-account, #identity, #addresses, #address, #history, #order-detail, #order-follow, #order-return, #order-slip, #discount, #guest-tracking, #module-psgdpr-gdpr) .pg-message { margin: 0; }
:is(#authentication, #registration, #password, #my-account, #identity, #addresses, #address, #history, #order-detail, #order-follow, #order-return, #order-slip, #discount, #guest-tracking, #module-psgdpr-gdpr) .pg-message:focus { outline: 0; }
:is(#authentication, #registration, #password, #identity) .f-erreur-champ { display: grid; gap: var(--espace-1); }
:is(#authentication, #registration, #password, #identity) .f-erreur-champ__ligne { display: flex; align-items: flex-start; gap: var(--espace-2); margin: 0; }
:is(#authentication, #registration, #password, #identity) .f-erreur-champ__ligne svg { margin-top: 2px; }
:is(#authentication, #registration, #password, #my-account, #identity, #addresses, #address, #history, #order-detail, #order-follow, #order-return, #order-slip, #discount, #guest-tracking, #module-psgdpr-gdpr) .f-retour { justify-self: start; min-height: 44px; }
:is(#authentication, #registration, #password, #my-account, #identity, #addresses, #address, #history, #order-detail, #order-follow, #order-return, #order-slip, #discount, #guest-tracking, #module-psgdpr-gdpr) :is(.pg-renoncer, .ab-bouton--lien, .ab-lien) { min-height: 44px; display: inline-flex; align-items: center; gap: var(--espace-2); }

/* Mot de passe : saisie + bouton œil accolé de 48 px en contour neutre (jamais jaune) */
:is(#authentication, #registration, #password, #identity) .f-mdp__groupe { display: flex; align-items: stretch; }
:is(#authentication, #registration, #password, #identity) .f-mdp__saisie { flex: 1; min-width: 0; border-right: 0; border-radius: var(--rayon-s) 0 0 var(--rayon-s); }
:is(#authentication, #registration, #password, #identity) .f-mdp__oeil { display: flex; align-items: center; justify-content: center; flex: none; width: 48px; min-height: 48px; padding: 0; background: var(--blanc); color: var(--graphite); border: var(--trait-moyen) solid var(--trait-fort); border-radius: 0 var(--rayon-s) var(--rayon-s) 0; cursor: pointer; }
:is(#authentication, #registration, #password, #identity) .f-mdp__oeil:hover { border-color: var(--graphite); }
:is(#authentication, #registration, #password, #identity) .f-mdp__oeil:focus-visible { outline: var(--trait-hauban) solid var(--focus); outline-offset: 2px; }
:is(#authentication, #registration, #password, #identity) .f-mdp__cacher { display: none; }
:is(#authentication, #registration, #password, #identity) .f-mdp__groupe:has(input[type="text"]) .f-mdp__voir { display: none; }
:is(#authentication, #registration, #password, #identity) .f-mdp__groupe:has(input[type="text"]) .f-mdp__cacher { display: block; }
:is(#authentication, #registration, #password, #identity) .f-mdp__regle { margin: 0; font-size: 14px; line-height: 21px; color: var(--texte-doux); }


/* §2 F1 Connexion : deux colonnes de 1fr, écart de 32 px ; bloc « Sans compte » sur fond de section */
#authentication .f1-compte { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--espace-8); align-items: stretch; padding: var(--espace-4) 0 var(--espace-8); }
#authentication .f1-carte { display: grid; gap: var(--espace-6); align-content: start; min-width: 0; }
#authentication #login-form { display: grid; gap: var(--espace-6); }
#authentication .f1-creer__texte { margin: 0; }
#authentication .f1-avantages { margin: 0; padding: 0; list-style: none; }
#authentication .f1-avantages li { font-size: 16px; line-height: 24px; }
#authentication .f1-modules { margin-bottom: var(--espace-8); }
#authentication .f1-sans { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: var(--espace-12); align-items: center; margin-bottom: var(--espace-16); padding: var(--espace-8); background: var(--fond-section); border-radius: var(--rayon-m); }
#authentication .f1-sans__txt { display: grid; gap: var(--espace-3); }
#authentication .f1-sans__txt :is(h2, p) { margin: 0; }
#authentication .f1-sans__form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: var(--espace-4); align-items: end; }
#authentication .f1-sans__pied { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: var(--espace-2) var(--espace-6); margin: 0; padding-top: var(--espace-4); border-top: var(--trait-fin) solid var(--trait-fort); font-size: 15px; line-height: 22px; }
#authentication .f1-sans__pied .pg-doux { font-size: 14px; }


/* §3 F2 Inscription (et écran Informations, même formulaire) */
#registration .f2-grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 400px); gap: var(--espace-12); align-items: start; padding: var(--espace-4) 0 var(--espace-16); }
#registration .f2-form { display: grid; gap: var(--espace-6); min-width: 0; }
:is(#registration, #identity) #customer-form { display: grid; gap: var(--espace-6); }
:is(#registration, #identity) #customer-form > section { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--espace-4); }
:is(#registration, #identity) .f2-champ { grid-column: 1 / -1; min-width: 0; }
:is(#registration, #identity) :is(.f2-champ--firstname, .f2-champ--lastname) { grid-column: auto; }
:is(#registration, #identity) :is(.f2-champ--newsletter, .f2-champ--optin) { padding-top: var(--espace-4); border-top: var(--trait-fin) solid var(--trait); }
:is(#registration, #identity) .f2-champ--newsletter + .f2-champ--optin, :is(#registration, #identity) .f2-champ--optin + .f2-champ--newsletter { padding-top: 0; border-top: 0; }
:is(#registration, #identity) .f2-resume { margin-bottom: var(--espace-2); }
:is(#registration, #identity) .f2-mention { margin: 0; font-size: 14px; line-height: 21px; color: var(--texte-doux); }
:is(#registration, #identity) .f2-actions { display: flex; flex-wrap: wrap; gap: var(--espace-4); }
#registration .f2-aside { display: grid; gap: var(--espace-6); }
#registration .f2-aside__carte { display: grid; gap: var(--espace-3); padding: var(--espace-6); }
#registration .f2-aside__carte h2 { margin: 0; }


/* §4 F3 Mot de passe : une carte centrée de 560 px par page */
#password .f3-ecran { display: grid; justify-items: center; padding: var(--espace-4) 0 var(--espace-16); }
#password .f3-carte { display: grid; gap: var(--espace-6); align-content: start; width: min(560px, 100%); }
#password .f3-carte .corps { margin: 0; }
#password .f3-compte { display: flex; flex-wrap: wrap; align-items: center; gap: var(--espace-2); margin: 0; padding: var(--espace-3) var(--espace-4); background: var(--fond); border-radius: var(--rayon-s); font-size: 15px; }
#password .f3-compte .pg-mono { font-weight: 600; overflow-wrap: anywhere; }
#password .f3-rappels { display: grid; gap: var(--espace-2); margin: 0; padding: 0; list-style: none; }
#password .f3-rappels li { display: flex; align-items: flex-start; gap: var(--espace-3); font-size: 16px; line-height: 24px; }
#password .f3-rappels svg { margin-top: 2px; }


/* §5 Cadre du compte : navigation de 280 px à gauche (f-nav = pg-compte-nav de la carte F4) */
:is(#my-account, #identity, #addresses, #address, #history, #order-detail, #order-follow, #order-return, #order-slip, #discount, #guest-tracking, #module-psgdpr-gdpr) .f-compte { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: var(--espace-12); align-items: start; padding: var(--espace-4) 0 var(--espace-16); }
:is(#my-account, #identity, #addresses, #address, #history, #order-detail, #order-follow, #order-return, #order-slip, #discount, #guest-tracking, #module-psgdpr-gdpr) .f-compte--seul { grid-template-columns: minmax(0, 1fr); }
:is(#my-account, #identity, #addresses, #address, #history, #order-detail, #order-follow, #order-return, #order-slip, #discount, #guest-tracking, #module-psgdpr-gdpr) .f-compte__contenu { display: grid; gap: var(--espace-8); min-width: 0; }
:is(#my-account, #identity, #addresses, #address, #history, #order-detail, #order-follow, #order-return, #order-slip, #discount, #guest-tracking, #module-psgdpr-gdpr) .f-compte__corps { display: grid; gap: var(--espace-8); min-width: 0; }
:is(#my-account, #identity, #addresses, #address, #history, #order-detail, #order-follow, #order-return, #order-slip, #discount, #guest-tracking, #module-psgdpr-gdpr) .f-compte__corps > p { margin: 0; }

:is(#my-account, #identity, #addresses, #address, #history, #order-detail, #order-follow, #order-return, #order-slip, #discount, #module-psgdpr-gdpr) .f-nav { position: sticky; top: var(--espace-6); display: grid; background: var(--blanc); border: var(--trait-fin) solid var(--trait); border-radius: var(--rayon-m); overflow: hidden; }
:is(#my-account, #identity, #addresses, #address, #history, #order-detail, #order-follow, #order-return, #order-slip, #discount, #module-psgdpr-gdpr) .f-nav > a { display: flex; align-items: center; gap: var(--espace-3); min-height: 48px; padding: 0 var(--espace-4); border-top: var(--trait-fin) solid var(--trait); color: var(--texte); font-size: 15px; line-height: 20px; font-weight: 600; text-decoration: none; }
:is(#my-account, #identity, #addresses, #address, #history, #order-detail, #order-follow, #order-return, #order-slip, #discount, #module-psgdpr-gdpr) .f-nav > a:first-child { border-top: 0; }
:is(#my-account, #identity, #addresses, #address, #history, #order-detail, #order-follow, #order-return, #order-slip, #discount, #module-psgdpr-gdpr) .f-nav > a:hover { background: var(--fond); }
:is(#my-account, #identity, #addresses, #address, #history, #order-detail, #order-follow, #order-return, #order-slip, #discount, #module-psgdpr-gdpr) .f-nav > a[aria-current] { background: var(--jaune-pale); box-shadow: inset 3px 0 0 var(--graphite); }
:is(#my-account, #identity, #addresses, #address, #history, #order-detail, #order-follow, #order-return, #order-slip, #discount, #module-psgdpr-gdpr) .f-nav > a:focus-visible { outline: var(--trait-hauban) solid var(--focus); outline-offset: -3px; }
:is(#my-account, #identity, #addresses, #address, #history, #order-detail, #order-follow, #order-return, #order-slip, #discount, #module-psgdpr-gdpr) .f-nav > a .material-icons { display: none; }
:is(#my-account, #identity, #addresses, #address, #history, #order-detail, #order-follow, #order-return, #order-slip, #discount, #module-psgdpr-gdpr) .f-nav .f-nav__sortie { color: var(--texte-doux); }


/* §6 F4 Tableau de bord, informations, adresses */
#my-account .f4-identite { margin: calc(-1 * var(--espace-6)) 0 0; }
#my-account .f4-section { display: grid; gap: var(--espace-6); }
#my-account .f4-section h2 { margin: 0; }
#my-account .f4-raccourcis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--espace-4); }
#my-account .f4-raccourci { display: grid; gap: var(--espace-2); align-content: start; min-height: 124px; padding: var(--espace-4); background: var(--blanc); color: var(--texte); border: var(--trait-fin) solid var(--trait); border-radius: var(--rayon-m); font-size: 14px; line-height: 20px; text-decoration: none; }
#my-account a.f4-raccourci:hover { border-color: var(--graphite); }
#my-account a.f4-raccourci:focus-visible { outline: var(--trait-hauban) solid var(--focus); outline-offset: 2px; }
#my-account .f4-raccourci b { display: flex; align-items: center; justify-content: space-between; gap: var(--espace-2); font-size: 16px; line-height: 22px; }
#my-account .f4-raccourci .pg-doux { font-size: 13px; }
#my-account .f4-raccourci .pg-renoncer { font-size: 14px; }
#my-account .f4-conseiller { border-radius: var(--rayon-m); }
#my-account .f4-conseiller :is(h2, p) { margin: 0; }
#my-account .f4-conseiller__surtitre { font-size: 12px; line-height: 16px; letter-spacing: .1em; color: var(--jaune-hauban); }
#my-account .f4-conseiller__actions { flex-wrap: wrap; }
#my-account .f4-conseiller .ab-bouton--contour { color: var(--toile); border-color: var(--toile); }
#my-account .f4-conseiller .ab-bouton--contour:hover { background: var(--graphite-doux); }
#my-account .f4-conseiller .ab-bouton:focus-visible { outline-color: var(--jaune-hauban); }

:is(#identity, #address, #module-psgdpr-gdpr) .f4-ecran { display: grid; gap: var(--espace-6); padding: var(--espace-6); }
:is(#identity, #address, #module-psgdpr-gdpr) .f4-ecran :is(h2, p) { margin: 0; }
:is(#identity, #address, #module-psgdpr-gdpr) .f4-ecran section { display: grid; gap: var(--espace-3); }
:is(#identity, #address) .f4-ecran__intro { font-size: 14px; line-height: 20px; }

:is(#addresses, #identity, #module-psgdpr-gdpr) .f4-actions { display: flex; flex-wrap: wrap; gap: var(--espace-2) var(--espace-4); }
:is(#addresses, #identity, #module-psgdpr-gdpr) .f4-lien { display: inline-flex; align-items: center; gap: var(--espace-2); min-height: 44px; color: var(--texte); font-size: 14px; font-weight: 600; text-decoration: underline; text-decoration-thickness: var(--trait-moyen); text-underline-offset: 4px; }
:is(#addresses, #identity, #module-psgdpr-gdpr) .f4-lien:focus-visible { outline: var(--trait-hauban) solid var(--focus); outline-offset: 2px; }
#addresses .f4-adresses { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--espace-4); }
#addresses .f4-adresse { display: grid; gap: var(--espace-2); align-content: start; padding: var(--espace-4); background: var(--blanc); border: var(--trait-fin) solid var(--trait-fort); border-radius: var(--rayon-s); font-size: 15px; line-height: 22px; }
#addresses .f4-adresse__alias { margin: 0; }
#addresses .f4-adresse__contenu { margin: 0; font-style: normal; }
#addresses .f4-acces { display: flex; gap: var(--espace-2); align-items: flex-start; padding: var(--espace-2) var(--espace-3); background: var(--fond); border-radius: var(--rayon-s); font-size: 14px; line-height: 20px; }
#addresses .f4-adresse--ajout { justify-items: start; min-height: 160px; color: var(--texte); border-style: dashed; text-decoration: none; }
#addresses .f4-adresse--ajout:hover { border-color: var(--graphite); background: var(--fond); }
#addresses .f4-adresse--ajout:focus-visible { outline: var(--trait-hauban) solid var(--focus); outline-offset: 2px; }


/* §7 F5 Commandes : tableau du kit, statut en mot + icône, détail en cadre graphite */
:is(#history, #order-follow, #order-slip, #discount) .f5-table th, :is(#history, #order-follow, #order-slip, #discount) .f5-table td { vertical-align: middle; }
:is(#history, #order-follow, #order-slip, #discount) .f5-table tbody th { font-weight: 600; }
:is(#history, #order-follow, #order-slip, #discount) .f5-table a:not(.f5-lien) { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
:is(#history, #order-follow, #order-slip, #discount) .f5-table__actions { text-align: right; }
:is(#history, #order-detail, #order-follow, #order-slip, #discount, #guest-tracking) .f5-statut { display: inline-flex; align-items: center; gap: var(--espace-2); color: var(--texte); font-weight: 600; }
:is(#history, #order-detail, #order-follow, #order-slip, #discount, #guest-tracking) .f5-statut--ok { color: var(--sapin); }
:is(#history, #order-detail, #order-follow, #order-slip, #discount, #guest-tracking) .f5-statut--attente { color: var(--attention); }
:is(#history, #order-detail, #order-follow, #order-slip, #discount, #guest-tracking) .f5-statut--neutre { color: var(--texte-doux); }
:is(#history, #order-detail, #order-follow, #order-slip, #discount, #guest-tracking) .f5-statut--grand { font-size: 17px; }
:is(#history, #order-detail, #order-follow, #order-slip, #discount, #guest-tracking) .f5-lien { display: inline-flex; align-items: center; gap: var(--espace-2); min-height: 44px; color: var(--texte); font-size: 14px; font-weight: 600; white-space: nowrap; text-decoration: underline; text-decoration-thickness: var(--trait-moyen); text-underline-offset: 4px; }
:is(#history, #order-detail, #order-follow, #order-slip, #discount, #guest-tracking) .f5-lien:focus-visible { outline: var(--trait-hauban) solid var(--focus); outline-offset: 2px; }
:is(#history, #order-follow, #order-slip, #discount) .pg-vide :is(p) { margin: 0; }

:is(#order-detail, #guest-tracking) .f5-detail { display: grid; gap: var(--espace-6); padding: var(--espace-8); background: var(--blanc); border: var(--trait-moyen) solid var(--graphite); border-radius: var(--rayon-m); min-width: 0; }
:is(#order-detail, #guest-tracking) .f5-detail :is(h2, h3) { margin: 0 0 var(--espace-2); }
:is(#order-detail, #guest-tracking) .f5-detail__tete { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--espace-4) var(--espace-6); padding-bottom: var(--espace-4); border-bottom: var(--trait-fin) solid var(--trait); }
:is(#order-detail, #guest-tracking) .f5-detail__tete .pg-surtitre { margin: 0 0 var(--espace-2); }
:is(#order-detail, #guest-tracking) .f5-detail__meta { margin: 0; font-size: 14px; line-height: 20px; }
:is(#order-detail, #guest-tracking) .f5-suivi { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(140px, 1fr); margin: 0; padding: 0 0 var(--espace-2); list-style: none; overflow-x: auto; }
:is(#order-detail, #guest-tracking) .f5-suivi__etape { position: relative; display: grid; gap: var(--espace-1); align-content: start; padding: var(--espace-8) var(--espace-3) 0 0; font-size: 14px; line-height: 20px; }
:is(#order-detail, #guest-tracking) .f5-suivi__etape::before { content: ""; position: absolute; left: 0; right: 0; top: 11px; height: 3px; background: var(--sapin); }
:is(#order-detail, #guest-tracking) .f5-suivi__etape.on::before { background: linear-gradient(90deg, var(--graphite) 50%, var(--trait) 50%); }
:is(#order-detail, #guest-tracking) .f5-suivi__pt { position: absolute; left: 0; top: 0; z-index: 1; display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--sapin); color: var(--toile); border: var(--trait-moyen) solid var(--sapin); }
:is(#order-detail, #guest-tracking) .f5-suivi__etape.on .f5-suivi__pt { background: var(--graphite); border-color: var(--graphite); }
:is(#order-detail, #guest-tracking) .f5-suivi__pt svg { width: 14px; height: 14px; }
:is(#order-detail, #guest-tracking) .f5-suivi b { font-weight: 600; }
:is(#order-detail, #guest-tracking) .f5-suivi .pg-mono { font-size: 12px; color: var(--texte-doux); }
:is(#order-detail, #guest-tracking) .f5-suivi__etape.on .pg-mono { color: var(--texte); font-weight: 600; }
:is(#order-detail, #guest-tracking) .f5-deux { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--espace-8); align-items: start; }
:is(#order-detail, #guest-tracking) .f5-cote { display: grid; gap: var(--espace-6); }
:is(#order-detail, #guest-tracking) .f5-docs { display: grid; gap: var(--espace-3); }
:is(#order-detail, #guest-tracking) .f5-docs .pg-doc { flex-wrap: wrap; padding: var(--espace-3) var(--espace-4); font-size: 14px; line-height: 20px; }
:is(#order-detail, #guest-tracking) .f5-docs__lien { margin-left: auto; }
:is(#order-detail, #guest-tracking) .f5-doc--attente { border-style: dashed; }
:is(#order-detail, #guest-tracking) .f5-doc--attente .pg-doc__type { background: var(--toile-fonce); color: var(--graphite); }
:is(#order-detail, #guest-tracking) .f5-adresses { display: grid; gap: var(--espace-3); }
:is(#order-detail, #guest-tracking) .f5-adresse { font-size: 15px; line-height: 22px; }
:is(#order-detail, #guest-tracking) .f5-adresse__titre { font-family: var(--font-texte); font-size: 15px; line-height: 20px; font-weight: 600; }
:is(#order-detail, #guest-tracking) .f5-adresse address { margin: 0; font-style: normal; }
:is(#order-detail, #guest-tracking) .f5-transport { min-width: 0; overflow-x: auto; }
:is(#order-detail, #guest-tracking) .f5-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--espace-3); padding-top: var(--espace-4); border-top: var(--trait-fin) solid var(--trait); }
:is(#order-detail, #guest-tracking) .f5-renoncer { display: grid; justify-items: end; margin-left: auto; }
:is(#order-detail, #guest-tracking, #my-account, #order-follow) .f-renoncer__delai { font-size: 13px; line-height: 18px; color: var(--texte-doux); }
:is(#order-detail, #guest-tracking) .f5-messages { margin-top: var(--espace-8); }


/* §8 F6 Suivre ou renoncer sans compte (écran 1) et retours dans le compte */
#guest-tracking .f6-page { display: grid; gap: var(--espace-8); padding: var(--espace-4) 0 var(--espace-16); }
#guest-tracking .f6-intro { display: grid; gap: var(--espace-3); max-width: 760px; }
#guest-tracking .f6-intro :is(h1, p) { margin: 0; }
#guest-tracking .f6-intro .chapo { color: var(--texte-doux); }
#guest-tracking .f6-ecran { display: grid; gap: var(--espace-4); align-content: start; width: min(640px, 100%); font-size: 15px; line-height: 22px; }
#guest-tracking .f6-ecran h2 { margin: 0; }
#guest-tracking .f6-ecran > .ab-bouton { justify-self: start; }
:is(#guest-tracking, #order-follow) .f6-note { margin: 0; font-size: 13px; line-height: 18px; color: var(--texte-doux); }
#order-follow .f6-tete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--espace-4); }
#order-follow .f6-tete p { margin: 0; }
#order-follow .pg-message .pg-renoncer { min-height: 44px; }


/* §9 Adaptation de Hummingbird : boutons et tableaux natifs rendus dans nos gabarits (couche des pages) */
@layer ps-pages {
  /* « Mot de passe oublié ? » : bouton Bootstrap « btn-basic » rendu en lien du kit, au-dessus du bouton principal */
  #authentication #login-form .buttons-wrapper { display: grid; gap: var(--espace-6); justify-items: start; }
  #authentication #login-form .buttons-wrapper .btn-basic { display: inline-flex; align-items: center; min-height: 44px; padding: 0 2px; color: var(--texte); font-weight: 600; text-decoration: underline; text-decoration-thickness: var(--trait-moyen); text-underline-offset: 4px; background: transparent; border: 0; border-radius: 0; }
  #authentication #login-form .buttons-wrapper .ab-bouton--principal { justify-self: stretch; }

  /* Champs natifs du formulaire client (form-fields du socle) : hauteur de 48 px et cibles de 44 px */
  :is(#registration, #identity) #customer-form .mb-3 { margin-bottom: 0; }
  :is(#registration, #identity) #customer-form .form-check { display: flex; align-items: flex-start; gap: var(--espace-3); min-height: 44px; padding-left: 0; }
  :is(#registration, #identity) #customer-form .form-check-input { flex: none; margin: 2px 0 0; }
  :is(#registration, #identity) #customer-form .form-check-inline { align-items: center; margin-right: var(--espace-6); }

  /* Suivi de commande et retours : bouton « Demander un retour » en secondaire (aucun bouton jaune sur F5) */
  :is(#order-detail, #guest-tracking) .order-merchandise-return .btn-primary { --bs-btn-bg: var(--graphite); --bs-btn-color: var(--toile); --bs-btn-border-color: var(--graphite); --bs-btn-hover-bg: var(--graphite-doux); --bs-btn-hover-color: var(--toile); --bs-btn-hover-border-color: var(--graphite-doux); --bs-btn-active-bg: var(--graphite); --bs-btn-active-color: var(--toile); }
  :is(#order-detail, #guest-tracking) .order-message-form .btn-primary { --bs-btn-bg: var(--graphite); --bs-btn-color: var(--toile); --bs-btn-border-color: var(--graphite); --bs-btn-hover-bg: var(--graphite-doux); --bs-btn-hover-color: var(--toile); --bs-btn-hover-border-color: var(--graphite-doux); --bs-btn-active-bg: var(--graphite); --bs-btn-active-color: var(--toile); }
  :is(#order-detail, #guest-tracking) .order-separator { display: none; }
  :is(#order-detail, #guest-tracking) .order-product__img { object-fit: contain; background: var(--blanc); border: var(--trait-fin) solid var(--trait); border-radius: var(--rayon-s); }
  :is(#order-detail, #guest-tracking) .grid-table { margin-bottom: 0; }
}


/* §10 Paliers */
@media (max-width: 1199.98px) {
  #my-account .f4-raccourcis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #registration .f2-grille { grid-template-columns: minmax(0, 1fr) minmax(0, 340px); gap: var(--espace-8); }
  :is(#my-account, #identity, #addresses, #address, #history, #order-detail, #order-follow, #order-return, #order-slip, #discount, #guest-tracking, #module-psgdpr-gdpr) .f-compte { grid-template-columns: 240px minmax(0, 1fr); gap: var(--espace-8); }
  :is(#my-account, #identity, #addresses, #address, #history, #order-detail, #order-follow, #order-return, #order-slip, #discount, #guest-tracking, #module-psgdpr-gdpr) .f-compte--seul { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 991.98px) {
  /* Navigation du compte au-dessus du contenu, en bandeau qui défile seul */
  :is(#my-account, #identity, #addresses, #address, #history, #order-detail, #order-follow, #order-return, #order-slip, #discount, #guest-tracking, #module-psgdpr-gdpr) .f-compte { grid-template-columns: minmax(0, 1fr); gap: var(--espace-6); }
  :is(#my-account, #identity, #addresses, #address, #history, #order-detail, #order-follow, #order-return, #order-slip, #discount, #module-psgdpr-gdpr) .f-nav { position: static; display: flex; overflow-x: auto; overscroll-behavior-x: contain; }
  :is(#my-account, #identity, #addresses, #address, #history, #order-detail, #order-follow, #order-return, #order-slip, #discount, #module-psgdpr-gdpr) .f-nav > a { flex: none; white-space: nowrap; border-top: 0; border-left: var(--trait-fin) solid var(--trait); }
  :is(#my-account, #identity, #addresses, #address, #history, #order-detail, #order-follow, #order-return, #order-slip, #discount, #module-psgdpr-gdpr) .f-nav > a:first-child { border-left: 0; }
  :is(#my-account, #identity, #addresses, #address, #history, #order-detail, #order-follow, #order-return, #order-slip, #discount, #module-psgdpr-gdpr) .f-nav > a[aria-current] { box-shadow: inset 0 -3px 0 var(--graphite); }
  #authentication .f1-sans { grid-template-columns: minmax(0, 1fr); gap: var(--espace-6); }
  #registration .f2-grille { grid-template-columns: minmax(0, 1fr); }
  :is(#order-detail, #guest-tracking) .f5-deux { grid-template-columns: minmax(0, 1fr); }
  #addresses .f4-adresses { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 767.98px) {
  :is(#authentication, #registration, #password, #my-account, #identity, #addresses, #address, #history, #order-detail, #order-follow, #order-return, #order-slip, #discount, #guest-tracking, #module-psgdpr-gdpr) :is(.f-titre) { font: var(--text-titre-1-tel); }
  :is(#authentication, #registration, #password, #my-account, #identity, #addresses, #address, #history, #order-detail, #order-follow, #order-return, #order-slip, #discount, #guest-tracking, #module-psgdpr-gdpr) .pg-carte { padding: var(--espace-6) var(--espace-4); }
  #password .f3-carte .f-titre { font-size: 26px; line-height: 32px; }

  /* F1 : une colonne, « Se connecter » d’abord, bloc sans compte en pleine largeur */
  #authentication .f1-compte { grid-template-columns: minmax(0, 1fr); gap: var(--espace-6); }
  #authentication .f1-avantages, #authentication .f1-creer__texte { display: none; }
  #authentication .f1-sans { margin-bottom: var(--espace-8); padding: var(--espace-6) var(--espace-4); }
  #authentication .f1-sans__form { grid-template-columns: minmax(0, 1fr); }
  #authentication .f1-sans__form .ab-bouton { width: 100%; }
  #authentication .f1-sans__pied { display: grid; justify-items: start; gap: var(--espace-1); }

  /* F2 : prénom et nom l’un sous l’autre ; bouton principal dans le flux */
  :is(#registration, #identity) #customer-form > section { grid-template-columns: minmax(0, 1fr); }
  :is(#registration, #identity) .f2-actions .ab-bouton { width: 100%; }

  /* F4 */
  #my-account .f4-raccourcis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #my-account .f4-conseiller { grid-template-columns: minmax(0, 1fr); gap: var(--espace-6); padding: var(--espace-6) var(--espace-4); }

  /* F5 : la liste devient des cartes, le suivi passe à la verticale, les actions s’empilent */
  :is(#history, #order-follow, #order-slip, #discount) .f5-table, :is(#history, #order-follow, #order-slip, #discount) .f5-table tbody { display: block; border: 0; background: transparent; }
  :is(#history, #order-follow, #order-slip, #discount) .f5-table thead { display: none; }
  :is(#history, #order-follow, #order-slip, #discount) .f5-table tr { display: grid; gap: var(--espace-1); margin-bottom: var(--espace-4); padding: var(--espace-4); background: var(--blanc); border: var(--trait-fin) solid var(--trait); border-radius: var(--rayon-m); }
  :is(#history, #order-follow, #order-slip, #discount) .f5-table :is(th, td) { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--espace-2); padding: 0; border: 0; text-align: left; }
  :is(#history, #order-follow, #order-slip, #discount) .f5-table :is(th, td)[data-label]::before { content: attr(data-label); color: var(--texte-doux); font-family: var(--font-texte); font-size: 13px; font-weight: 400; }
  :is(#history, #order-follow, #order-slip, #discount) .f5-table__actions { justify-content: flex-start; }
  :is(#order-detail, #guest-tracking) .f5-detail { padding: var(--espace-6) var(--espace-4); }
  :is(#order-detail, #guest-tracking) .f5-suivi { grid-auto-flow: row; grid-auto-columns: auto; overflow: visible; }
  :is(#order-detail, #guest-tracking) .f5-suivi__etape { padding: 0 0 var(--espace-4) var(--espace-8); }
  :is(#order-detail, #guest-tracking) .f5-suivi__etape::before { top: 0; bottom: 0; left: 11px; right: auto; width: 3px; height: auto; }
  :is(#order-detail, #guest-tracking) .f5-suivi__etape.on::before { background: linear-gradient(180deg, var(--graphite) 50%, var(--trait) 50%); }
  :is(#order-detail, #guest-tracking) .f5-actions { display: grid; }
  :is(#order-detail, #guest-tracking) .f5-actions .ab-bouton { width: 100%; }
  :is(#order-detail, #guest-tracking) .f5-renoncer { justify-items: start; margin-left: 0; }

  /* F6 */
  #guest-tracking .f6-ecran > .ab-bouton { justify-self: stretch; }
  #order-follow .f6-tete .ab-bouton { width: 100%; }
}

@media (max-width: 379.98px) {
  #my-account .f4-raccourcis { grid-template-columns: minmax(0, 1fr); }
  :is(#order-detail, #guest-tracking) .f5-docs__lien { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  :is(#my-account, #identity, #addresses, #address, #history, #order-detail, #order-follow, #order-return, #order-slip, #discount, #module-psgdpr-gdpr) .f-nav { scroll-behavior: auto; }
}