/* AEROCAP — 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). (structure reprise de L’Abritant V2, 04/11/2026)
   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, #module-lamdevis-devis) :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, #module-lamdevis-devis) .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, #module-lamdevis-devis) .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, #module-lamdevis-devis) .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, #module-lamdevis-devis) .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, #module-lamdevis-devis) .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, #module-lamdevis-devis) .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, #module-lamdevis-devis) :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); }
/* Aides du Numéro SIRET et du numéro de TVA (_partials/form-fields.tpl) : même écart au champ que la règle du mot de passe. */
:is(#registration, #identity, #address, #checkout) .lab-aide-champ { margin-top: var(--espace-2); }


/* §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); }
/* Lien dans la phrase : souligné (RGAA 10.6, audit du 03/11/2026 : la couleur seule donnait 2,44:1 avec le texte). */
:is(#registration, #identity) .f2-mention a { text-decoration: underline; text-underline-offset: 3px; }
: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, #module-lamdevis-devis) .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, #module-lamdevis-devis) .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, #module-lamdevis-devis) .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, #module-lamdevis-devis) .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, #module-lamdevis-devis) .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, #module-lamdevis-devis) .f-nav { position: sticky; top: calc(var(--barre-collante) + 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, #module-lamdevis-devis) .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, #module-lamdevis-devis) .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, #module-lamdevis-devis) .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, #module-lamdevis-devis) .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, #module-lamdevis-devis) .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, #module-lamdevis-devis) .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, #module-lamdevis-devis) .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, #module-lamdevis-devis) .f4-ecran { display: grid; gap: var(--espace-6); padding: var(--espace-6); }
:is(#identity, #address, #module-psgdpr-gdpr, #module-lamdevis-devis) .f4-ecran :is(h2, p) { margin: 0; }
:is(#identity, #address, #module-psgdpr-gdpr, #module-lamdevis-devis) .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, #module-lamdevis-devis) .f4-actions { display: flex; flex-wrap: wrap; gap: var(--espace-2) var(--espace-4); }
:is(#addresses, #identity, #module-psgdpr-gdpr, #module-lamdevis-devis) .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, #module-lamdevis-devis) .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, #module-lamdevis-devis) .f5-table th, :is(#history, #order-follow, #order-slip, #discount, #module-lamdevis-devis) .f5-table td { vertical-align: middle; }
:is(#history, #order-follow, #order-slip, #discount, #module-lamdevis-devis) .f5-table tbody th { font-weight: 600; }
:is(#history, #order-follow, #order-slip, #discount, #module-lamdevis-devis) .f5-table a:not(.f5-lien) { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
:is(#history, #order-follow, #order-slip, #discount, #module-lamdevis-devis) .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, #module-lamdevis-devis) .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, #module-lamdevis-devis) .f5-lien:focus-visible { outline: var(--trait-hauban) solid var(--focus); outline-offset: 2px; }
:is(#history, #order-follow, #order-slip, #discount, #module-lamdevis-devis) .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; }
/* Facture : « Voir » (page accessible, module lamdocuments) et « PDF » côte à côte (RGAA 13.3, audit du 03/11/2026). */
:is(#order-detail, #guest-tracking) .f5-docs__liens { margin-left: auto; display: inline-flex; flex-wrap: wrap; gap: var(--espace-4); }
#history td .f5-lien + .f5-lien, #order-slip .f5-table__actions .f5-lien + .f5-lien { margin-left: var(--espace-4); }
:is(#order-detail, #guest-tracking) .f5-doc--attente .pg-doc__type { background: var(--toile-fonce); color: var(--graphite); }
/* Liens d’une commande sur une ligne sous la commande (tbody.f5-commande, demande de Quentin du 29/10/2026). */
#history .f5-commande > tr:first-child > * { border-bottom: 0; }
#history .f5-commande__liens > td { padding-top: 0; }
/* Variante C choisie par Quentin (29/10/2026) : liens en petites capitales de la police technique, en retrait de la
   ligne de commande, séparés par le trait oblique de la cote (signe de la charte, décoratif : jaune jamais en texte). */
#history .f5-liens { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--espace-3); }
#history .f5-liens .f5-lien { font-family: var(--font-technique); font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--texte-doux); text-decoration: none; }
#history .f5-liens .f5-lien:hover { color: var(--texte); text-decoration: underline; text-decoration-thickness: var(--trait-fin); text-underline-offset: 4px; }
/* Séparateur « / » hors flux (absolu) : sinon il hérite du soulignement du lien au survol. */
#history .f5-liens .f5-lien:not(:first-child) { position: relative; padding-left: calc(1ch + var(--espace-3)); }
#history .f5-liens .f5-lien:not(:first-child)::before { content: "/" / ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); line-height: 1; color: var(--jaune-hauban); font-weight: 700; }
:is(#order-detail, #guest-tracking) .f5-pieces { display: grid; gap: var(--espace-2); }
:is(#order-detail, #guest-tracking) .f5-pieces ul { display: grid; margin: 0; padding: 0; list-style: none; }
:is(#order-detail, #guest-tracking) .f5-pieces .f5-lien { white-space: normal; }
: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) .f5-renoncer--fini { gap: var(--espace-1); margin-block: 0; text-align: right; }
:is(#order-detail, #guest-tracking) .f5-renoncer--fini .f5-lien { white-space: normal; }
: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); }
/* Photos du colis (module photopackage, gabarit surchargé dans modules/photopackage/) : 3 vignettes 4/3 de front (une par ligne sous 480 px),
   agrandissement du script du module ramené aux jetons (voile graphite, bouton toile). Client connecté seulement. */
#order-detail .f5-photos { display: grid; gap: var(--espace-3); }
#order-detail .f5-photos :is(.f5-photos__meta, .f5-photos__aide) { margin: 0; font-size: 14px; line-height: 20px; }
#order-detail .f5-photos__liste { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--espace-3); margin: 0; padding: 0; list-style: none; }
#order-detail .f5-photos__lien { display: block; overflow: hidden; background: var(--fond-section); border: var(--trait-fin) solid var(--trait); border-radius: var(--rayon-s); cursor: zoom-in; }
#order-detail .f5-photos__lien:hover { border-color: var(--graphite); }
#order-detail .f5-photos__lien:focus-visible { outline: var(--trait-hauban) solid var(--focus); outline-offset: 2px; }
#order-detail .f5-photos__lien img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
#order-detail .photopackage-lightbox-overlay { background: color-mix(in srgb, var(--graphite) 92%, transparent); }
#order-detail .photopackage-lightbox-img { border-radius: var(--rayon-s); box-shadow: none; }
#order-detail .photopackage-lightbox-close { background: var(--toile); color: var(--graphite); }
#order-detail .photopackage-lightbox-close:hover { background: var(--blanc); transform: none; }
#order-detail .photopackage-lightbox-close:focus-visible { outline: var(--trait-hauban) solid var(--jaune-hauban); outline-offset: 2px; }


/* §7 bis Mes devis (module lamdevis ; Qarto R391) : même tableau que les commandes, produits du panier en liste,
   devis expiré en mot + icône (jamais la couleur seule), « Remettre dans mon panier » en bouton secondaire */
#module-lamdevis-devis .lamdevis-produits { display: grid; gap: var(--espace-1); margin: 0; padding: 0; list-style: none; font-size: 14px; line-height: 20px; }
#module-lamdevis-devis .lamdevis-expire { display: inline-flex; align-items: center; gap: var(--espace-2); color: var(--texte-doux); font-weight: 600; }
#module-lamdevis-devis .lamdevis-table tbody th { white-space: nowrap; }
#module-lamdevis-devis .lamdevis-date { display: block; color: var(--texte-doux); font-size: 13px; line-height: 19px; font-weight: 400; }
#module-lamdevis-devis .lamdevis-actions { display: flex; flex-direction: column; align-items: flex-end; gap: var(--espace-2); }
#module-lamdevis-devis .lamdevis-actions form { margin: 0; }


/* §8 F6 Suivre sa commande 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); }
#guest-tracking .f6-intro :is(h1, p) { margin: 0; }
#guest-tracking .f6-intro .chapo { max-width: 72ch; color: var(--texte-doux); text-wrap: pretty; }
#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); }
#guest-tracking .f6-retractation { display: flex; flex-wrap: wrap; align-items: center; gap: var(--espace-2) var(--espace-4); width: min(640px, 100%); font-size: 15px; line-height: 22px; }
#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; }
/* Parcours « Renoncer au contrat ici » du module lamretractation (carte F6, écrans 1 à 4 ; décision de Quentin du 27/10/2026). */
.lr-page { display: grid; gap: var(--espace-6); padding: var(--espace-4) 0 var(--espace-16); }
.lr-page .f6-intro { display: grid; gap: var(--espace-3); }
.lr-page .f6-intro :is(h1, p) { margin: 0; }
.lr-page .f6-intro .chapo { max-width: 72ch; color: var(--texte-doux); text-wrap: pretty; }
.lr-page .f6-ecran { display: grid; gap: var(--espace-4); align-content: start; width: min(720px, 100%); padding: var(--espace-6) var(--espace-8) var(--espace-8); background: var(--blanc); border: var(--trait-fin) solid var(--trait); border-radius: var(--rayon-m); font-size: 15px; line-height: 22px; }
.lr-page .f6-ecran :is(h2, h3, .pg-surtitre) { margin: 0; }
.lr-page .f6-ecran .ab-champ { max-width: none; }
.lr-page :is(.f6-ecran, .lr-form) > .ab-bouton { justify-self: start; }
.lr-page .lr-form { display: grid; gap: var(--espace-4); }
.lr-page .f6-commande { display: grid; grid-template-columns: auto 1fr; gap: var(--espace-1) var(--espace-4); margin: 0; padding: var(--espace-3) var(--espace-4); background: var(--fond); border-radius: var(--rayon-s); font-size: 14px; }
.lr-page .f6-commande dt { color: var(--texte-doux); }
.lr-page .f6-commande dd { margin: 0; font-weight: 600; }
.lr-page .lr-articles { display: grid; margin: 0; padding: 0; border: 0; }
.lr-page .lr-articles legend { margin-bottom: var(--espace-2); }
.lr-page .f6-art { display: grid; grid-template-columns: 24px 56px 1fr; gap: var(--espace-3); align-items: center; min-height: 64px; padding: var(--espace-2) 0; border-top: var(--trait-fin) solid var(--trait); font-size: 14px; line-height: 20px; cursor: pointer; }
.lr-page .f6-art input { width: 24px; height: 24px; margin: 0; accent-color: var(--graphite); }
.lr-page .f6-art img, .lr-page .lr-sans-image { width: 56px; height: 56px; object-fit: contain; background: var(--blanc); border: var(--trait-fin) solid var(--trait); border-radius: var(--rayon-s); }
.lr-page .f6-delai { display: flex; gap: var(--espace-2); align-items: flex-start; margin: 0; font-weight: 600; }
.lr-page .f6-formtype { display: grid; gap: var(--espace-3); padding: var(--espace-4) var(--espace-6); border: var(--trait-moyen) solid var(--graphite); border-radius: var(--rayon-m); }
.lr-page .f6-formtype__ligne { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: var(--espace-4); align-items: baseline; padding-top: var(--espace-2); border-top: var(--trait-fin) solid var(--trait); font-size: 14px; line-height: 20px; overflow-wrap: anywhere; }
.lr-page .f6-formtype__ligne:first-of-type { border-top: 0; padding-top: 0; }
.lr-page .f6-formtype__ligne > span:first-child { font-family: var(--font-technique); font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--texte-doux); }
.lr-page .lr-date { max-width: 220px; }
.lr-page .f6-succes { display: flex; gap: var(--espace-4); align-items: flex-start; padding: var(--espace-4) var(--espace-6); background: var(--sapin-pale); border-radius: var(--rayon-m); }
.lr-page .f6-succes svg { flex: none; width: 28px; height: 28px; color: var(--sapin); }
.lr-page .f6-succes b { display: block; margin-bottom: var(--espace-1); color: var(--sapin); font-size: 19px; line-height: 24px; }
.lr-page .f6-suite { margin: 0; padding: 0; list-style: none; }
.lr-page .f6-suite li { display: grid; grid-template-columns: 28px 1fr; gap: var(--espace-2); padding: var(--espace-2) 0; border-top: var(--trait-fin) solid var(--trait); }
.lr-page .f6-suite li span:first-child { font-family: var(--font-technique); font-weight: 600; }
.lr-page .f6-note { margin: 0; font-size: 13px; line-height: 18px; color: var(--texte-doux); }
.lr-page .pg-message 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; }
  /* HT et TVA sous le total TTC du tableau natif, alignés à droite comme les montants (G1, G3) */
  :is(#order-detail, #guest-tracking) .f5-total-ht { margin: var(--espace-2) 0 var(--espace-6); text-align: right; }

  /* Articles du détail : le tableau natif (4 colonnes, 6 avec le retour) ne passe en cartes que sous 768 px d’écran ;
     dans la colonne de 306 à 497 px du détail (dès 992 px), en-têtes et prix se chevauchaient. Cartes du téléphone
     de Hummingbird reprises selon la largeur de la colonne (requête de conteneur) ; le tableau des totaux reste tel quel. */
  :is(#order-detail, #guest-tracking) .f5-articles { container: f5-articles / inline-size; }
  @container f5-articles (max-width: 599.98px) {
    .f5-articles .grid-table:not(:has(.grid-table__cell--label-value)) .grid-table__inner { gap: 0; grid-template-columns: minmax(0, 1fr); }
    .f5-articles .grid-table:not(:has(.grid-table__cell--label-value)) .grid-table__header { display: none; }
    .f5-articles .grid-table:not(:has(.grid-table__cell--label-value)) .grid-table__row { grid-column: auto; grid-template-columns: minmax(0, 1fr); gap: var(--espace-2) var(--espace-4); margin-block-start: calc(-1 * var(--trait-fin)); padding: var(--espace-4); border: var(--trait-fin) solid var(--bs-border-color); border-radius: 0; }
    .f5-articles .grid-table:not(:has(.grid-table__cell--label-value)) .grid-table__header + .grid-table__row { border-top-left-radius: var(--bs-border-radius); border-top-right-radius: var(--bs-border-radius); }
    .f5-articles .grid-table:not(:has(.grid-table__cell--label-value)) .grid-table__row:last-child { border-bottom-left-radius: var(--bs-border-radius); border-bottom-right-radius: var(--bs-border-radius); }
    .f5-articles .grid-table:not(:has(.grid-table__cell--label-value)) .grid-table__cell { grid-template-columns: minmax(0, 1fr) 60%; gap: var(--espace-4); justify-self: stretch; align-items: start; }
    .f5-articles .grid-table:not(:has(.grid-table__cell--label-value)) .grid-table__cell::before { display: block; }
    /* Produit (photo et nom) sur toute la largeur de la carte, sans étiquette : à 306 px, la colonne de 60 % le coupait */
    .f5-articles .grid-table:not(:has(.grid-table__cell--label-value)) .grid-table__cell.order-product { grid-template-columns: minmax(0, 1fr); }
    .f5-articles .grid-table:not(:has(.grid-table__cell--label-value)) .grid-table__cell.order-product::before { display: none; }
  }
}


/* §10 Paliers */
@media (max-width: 1199.98px) {
  /* Mes devis : une carte par devis dès 1 200 px (produits du panier et deux actions par ligne) */
  #module-lamdevis-devis .f5-table, #module-lamdevis-devis .f5-table tbody { display: block; border: 0; background: transparent; }
  #module-lamdevis-devis .f5-table thead { display: none; }
  #module-lamdevis-devis .f5-table tr { display: grid; gap: var(--espace-2); margin-bottom: var(--espace-4); padding: var(--espace-4); background: var(--blanc); border: var(--trait-fin) solid var(--trait); border-radius: var(--rayon-m); }
  #module-lamdevis-devis .f5-table :is(th, td) { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--espace-2) var(--espace-4); padding: 0; border: 0; text-align: left; }
  #module-lamdevis-devis .f5-table :is(th, td)[data-label]::before { content: attr(data-label); flex: 0 0 9.5em; color: var(--texte-doux); font-family: var(--font-texte); font-size: 13px; font-weight: 400; }
  #module-lamdevis-devis .lamdevis-produits { flex: 1 1 14em; }
  #module-lamdevis-devis .f5-table tbody th { padding-bottom: var(--espace-2); border-bottom: var(--trait-fin) solid var(--trait); }
  #module-lamdevis-devis .f5-table tbody th[data-label]::before { content: none; }
  #module-lamdevis-devis .lamdevis-date { display: inline; }
  #module-lamdevis-devis .lamdevis-actions { flex-direction: row; align-items: center; justify-content: flex-start; gap: var(--espace-2) var(--espace-4); padding-top: var(--espace-2); border-top: var(--trait-fin) solid var(--trait); }
  #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, #module-lamdevis-devis) .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, #module-lamdevis-devis) .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, #module-lamdevis-devis) .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, #module-lamdevis-devis) .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, #module-lamdevis-devis) .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, #module-lamdevis-devis) .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, #module-lamdevis-devis) .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) {
  #module-lamdevis-devis .lamdevis-actions form, #module-lamdevis-devis .lamdevis-remettre { 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, #module-lamdevis-devis) :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, #module-lamdevis-devis) .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; }
  /* Mes commandes : la carte est le groupe de lignes de la commande (commande + liens). */
  #history .f5-table tbody.f5-commande { 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); }
  #history .f5-table .f5-commande tr { display: grid; gap: var(--espace-1); margin: 0; padding: 0; background: none; border: 0; border-radius: 0; }
  #history .f5-commande__liens > td { padding-top: var(--espace-2); border-top: var(--trait-fin) solid var(--trait); }
  /* Les liens passent à la ligne : pas de trait oblique orphelin en début de ligne. */
  #history .f5-liens { gap: 0 var(--espace-6); }
  #history .f5-liens .f5-lien:not(:first-child)::before { content: none; }
  #history .f5-liens .f5-lien:not(:first-child) { padding-left: 0; }
  :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; }
  :is(#order-detail, #guest-tracking) .f5-renoncer--fini { text-align: left; }

  /* F6 */
  #guest-tracking .f6-ecran > .ab-bouton { justify-self: stretch; }
  #order-follow .f6-tete .ab-bouton { width: 100%; }
  .lr-page .f6-ecran { padding: var(--espace-4); }
  .lr-page :is(.f6-ecran, .lr-form) > .ab-bouton { justify-self: stretch; }
  .lr-page .f6-formtype { padding: var(--espace-3) var(--espace-4); }
  .lr-page .f6-formtype__ligne { grid-template-columns: 1fr; gap: var(--espace-1); }
}

@media (max-width: 479.98px) {
  #order-detail .f5-photos__liste { grid-template-columns: minmax(0, 1fr); }
}

@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, #module-lamdevis-devis) .f-nav { scroll-behavior: auto; }
}

/* Phrase qui explique les champs obligatoires, avant les formulaires (RGAA 11.10, audit d’accessibilité du 28/10/2026). */
.lab-obligatoires { margin: 0 0 var(--espace-3); }

/* ---------- Facture, avoir (module lamdocuments) et devis (lamdevis, ?voir=) en page accessible (carte N2 ; RGAA 13.3, 13.4) ---------- */
/* Même contenu que le PDF, en HTML sémantique ; impression A4 sans en-tête ni pied du site. */
.ld-page:is(#module-lamdocuments-document, #module-lamdevis-devis) .ld-doc { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--espace-8); max-width: 1040px; }
.ld-page:is(#module-lamdocuments-document, #module-lamdevis-devis) .ld-doc__document { grid-template-columns: minmax(0, 1fr); }
.ld-page:is(#module-lamdocuments-document, #module-lamdevis-devis) .ld-doc__actions .ab-bouton { max-width: 100%; white-space: normal; text-align: center; }
.ld-page:is(#module-lamdocuments-document, #module-lamdevis-devis) .ld-doc__parties { grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); }
.ld-page:is(#module-lamdocuments-document, #module-lamdevis-devis) .ld-doc__partie { min-width: 0; overflow-wrap: anywhere; }
.ld-page:is(#module-lamdocuments-document, #module-lamdevis-devis) .ld-doc__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--espace-4); }
.ld-page:is(#module-lamdocuments-document, #module-lamdevis-devis) .ld-doc__retour { display: inline-flex; align-items: center; min-height: var(--cible-min); color: var(--texte); text-decoration: underline; text-underline-offset: 3px; }
.ld-page:is(#module-lamdocuments-document, #module-lamdevis-devis) .ld-doc__document { display: grid; gap: var(--espace-8); padding: var(--espace-8); background: var(--blanc); border: var(--trait-fin) solid var(--trait); border-radius: var(--rayon-m); }
.ld-page:is(#module-lamdocuments-document, #module-lamdevis-devis) .ld-doc__titre { margin: 0; font-family: var(--font-titre); font-size: 28px; line-height: 34px; }
.ld-page:is(#module-lamdocuments-document, #module-lamdevis-devis) .ld-doc__soustitre { margin: 0 0 var(--espace-3); font-family: var(--font-technique); font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--texte-doux); }
.ld-page:is(#module-lamdocuments-document, #module-lamdevis-devis) .ld-doc__parties { display: grid; gap: var(--espace-6); }
.ld-page:is(#module-lamdocuments-document, #module-lamdevis-devis) .ld-doc__partie :is(p, address) { margin: 0 0 var(--espace-2); font-style: normal; }
.ld-page:is(#module-lamdocuments-document, #module-lamdevis-devis) .ld-doc__mentions-vendeur { font-size: 14px; line-height: 20px; color: var(--texte-doux); }
.ld-page:is(#module-lamdocuments-document, #module-lamdevis-devis) .ld-doc__resume { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: var(--espace-3) var(--espace-6); margin: 0; }
.ld-page:is(#module-lamdocuments-document, #module-lamdevis-devis) .ld-doc__resume div { display: grid; gap: 2px; }
.ld-page:is(#module-lamdocuments-document, #module-lamdevis-devis) .ld-doc__resume dt { font-size: 14px; line-height: 20px; color: var(--texte-doux); font-weight: 400; }
.ld-page:is(#module-lamdocuments-document, #module-lamdevis-devis) .ld-doc__resume dd { margin: 0; font-family: var(--font-technique); }
.ld-page:is(#module-lamdocuments-document, #module-lamdevis-devis) .ld-doc__defile { overflow-x: auto; }
.ld-page:is(#module-lamdocuments-document, #module-lamdevis-devis) .ld-table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 22px; }
.ld-page:is(#module-lamdocuments-document, #module-lamdevis-devis) .ld-table :is(th, td) { padding: var(--espace-2) var(--espace-3); border-bottom: var(--trait-fin) solid var(--trait); text-align: left; vertical-align: top; }
.ld-page:is(#module-lamdocuments-document, #module-lamdevis-devis) .ld-table thead th { font-size: 13px; line-height: 18px; font-weight: 600; color: var(--texte-doux); background: var(--fond-section); }
.ld-page:is(#module-lamdocuments-document, #module-lamdevis-devis) .ld-table tbody th { font-weight: 400; }
.ld-page:is(#module-lamdocuments-document, #module-lamdevis-devis) .ld-table .ld-num { text-align: right; white-space: nowrap; font-family: var(--font-technique); }
.ld-page:is(#module-lamdocuments-document, #module-lamdevis-devis) .ld-table .ld-mono { font-family: var(--font-technique); font-size: 13px; }
.ld-page:is(#module-lamdocuments-document, #module-lamdevis-devis) .ld-doc__note { font-size: 13px; color: var(--texte-doux); }
.ld-page:is(#module-lamdocuments-document, #module-lamdevis-devis) .ld-doc__montants { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: var(--espace-8); align-items: start; }
.ld-page:is(#module-lamdocuments-document, #module-lamdevis-devis) .ld-table--totaux .ld-total :is(th, td) { font-size: 18px; line-height: 26px; border-bottom: var(--trait-hauban) solid var(--graphite); }
.ld-page:is(#module-lamdocuments-document, #module-lamdevis-devis) .ld-doc__conditions { font-size: 14px; line-height: 20px; }
.ld-page:is(#module-lamdocuments-document, #module-lamdevis-devis) .ld-doc__conditions :is(ul, p) { margin: 0 0 var(--espace-2); padding-left: var(--espace-4); }
@media (max-width: 767.98px) {
  .ld-page:is(#module-lamdocuments-document, #module-lamdevis-devis) .ld-doc__document { padding: var(--espace-4); }
  .ld-page:is(#module-lamdocuments-document, #module-lamdevis-devis) .ld-table :is(th, td) { padding: var(--espace-2); }
}
@media print {
  @page { size: A4; margin: 14mm; }
  .ld-page:is(#module-lamdocuments-document, #module-lamdevis-devis) :is(#header, #footer, .breadcrumb__wrapper, .pg-evitement, .ld-doc__actions, #notifications) { display: none; }
  /* Cookiebot fixe display: flex dans l’attribut style du bandeau : seul visibility le masque à l’impression. */
  .ld-page:is(#module-lamdocuments-document, #module-lamdevis-devis) #CybotCookiebotDialog { visibility: hidden; }
  .ld-page:is(#module-lamdocuments-document, #module-lamdevis-devis) { background: var(--blanc); }
  .ld-page:is(#module-lamdocuments-document, #module-lamdevis-devis) .ld-doc__document { padding: 0; border: 0; }
  .ld-page:is(#module-lamdocuments-document, #module-lamdevis-devis) .ld-doc__defile { overflow: visible; }
  .ld-page:is(#module-lamdocuments-document, #module-lamdevis-devis) .ld-table tr, .ld-page:is(#module-lamdocuments-document, #module-lamdevis-devis) .ld-doc__bloc { break-inside: avoid; }
  .ld-page:is(#module-lamdocuments-document, #module-lamdevis-devis) .ld-table { font-size: 10pt; line-height: 14pt; }
}