/* ===============================================================
   LMCF — Pages natives
   Contact, espace client, suivi de commande, plan du site, magasins,
   erreurs… sortent de Hummingbird avec les couleurs Bootstrap : liens
   et boutons bleus, champs plats cerclés de gris, astérisques rouges.
   Cette feuille leur rend la langue du site — celle que lmcf-account.css
   avait posée sur la connexion et le panier — pour TOUTES les pages,
   sans qu'il faille les énumérer une à une.

   Chargée partout sauf sur l'accueil, la fiche produit et les pages des
   modules LMCF (déjà habillées, voir _partials/head.tpl), et AVANT lmcf.css : toutes les
   règles passent par `:where(#wrapper)`, qui ne pèse rien en
   spécificité. Hors @layer, elles battent déjà theme.css ; une règle
   plus précise de lmcf.css, lmcf-shop.css ou lmcf-account.css (fiche
   produit, listing, panier…) l'emporte toujours sur elles. En-tête et
   pied de page, hors de `#wrapper`, ne sont pas touchés.
   =============================================================== */

/* ===============================================================
   1. Fil d'Ariane — même largeur que le contenu
   Son `.container` gardait les 1140 px de Bootstrap : le fil
   démarrait 60 px à droite du titre. La fiche produit le corrigeait
   déjà pour elle seule (lmcf.css).
   =============================================================== */

.breadcrumb__wrapper .container {
  max-width: var(--container-max);
  padding-inline: var(--space-6);
}

/* ===============================================================
   2. Titre de page — même corps que la connexion, filet doré du
   héros de la demande de devis
   =============================================================== */

:where(#wrapper) .page-header {
  margin-top: var(--space-8);
  margin-bottom: var(--space-6);
}
:where(#wrapper) .page-title-section {
  font-size: clamp(1.75rem, 2.6vw, 2.25rem);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: -0.01em;
  color: var(--color-ink);
  margin-bottom: 0;
}
:where(#wrapper) .page-title-section::after {
  content: "";
  display: block;
  width: 48px;
  height: 3px;
  margin-top: var(--space-4);
  border-radius: 2px;
  background: var(--color-accent);
}
/* Titres centrés (connexion, inscription, mot de passe) : le filet suit. */
:where(body#authentication, body#registration, body#password) .page-title-section::after {
  margin-inline: auto;
}

:where(#wrapper) .page-content {
  color: var(--color-text);
  line-height: var(--lh-normal);
}
:where(#wrapper) .page-content h2,
:where(#wrapper) .page-content .h2 {
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  color: var(--color-ink);
}
:where(#wrapper) .page-content h3,
:where(#wrapper) .page-content .h3,
:where(#wrapper) .page-content h4,
:where(#wrapper) .page-content .h4 {
  font-weight: var(--fw-semibold);
  color: var(--color-ink);
}

/* Liens dans le texte : or souligné, comme sur les pages légales. */
:where(#wrapper) :where(.page-content, .page-footer, .alert, .form-text, .form-check-label) a:not(.btn) {
  color: var(--color-accent-600);
  text-decoration: underline;
  text-underline-offset: 3px;
}
:where(#wrapper) :where(.page-content, .page-footer, .alert, .form-text, .form-check-label) a:not(.btn):hover {
  color: var(--color-accent);
}

/* ===============================================================
   3. Champs de formulaire
   =============================================================== */

:where(#wrapper) .form-label {
  display: block;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-ink);
  margin-bottom: var(--space-2);
}
/* L'astérisque « obligatoire » passe du rouge à l'or ; le rouge reste
   réservé aux erreurs. */
:where(#wrapper) .required::before,
:where(#wrapper) .required::after {
  color: var(--color-accent-600);
}

:where(#wrapper) .form-control,
:where(#wrapper) .form-select {
  width: 100%;
  padding: 0.8rem 1rem;
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  color: var(--color-text);
  /* `background-color` et non `background` : la flèche du `select` est une
     image de fond posée par Bootstrap. */
  background-color: var(--color-bg-alt);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  box-shadow: none;
  transition: border-color var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
:where(#wrapper) .form-select {
  padding-right: 2.5rem;
}
:where(#wrapper) .form-control::placeholder {
  color: var(--color-text-muted);
}
:where(#wrapper) .form-control:focus,
:where(#wrapper) .form-select:focus {
  outline: none;
  color: var(--color-text);
  background-color: var(--color-bg);
  border-color: var(--color-accent);
  box-shadow: 0 0 0 4px rgba(200, 164, 93, 0.18);
}
:where(#wrapper) .form-control.is-invalid,
:where(#wrapper) .form-select.is-invalid {
  border-color: #B42318;
}
:where(#wrapper) textarea.form-control {
  min-height: 9rem;
  resize: vertical;
}

/* Pièce jointe : le bouton gris natif devient une pilule à contour. */
:where(#wrapper) .form-control[type="file"] {
  padding: 0.45rem 0.5rem;
  cursor: pointer;
}
:where(#wrapper) .form-control[type="file"]::file-selector-button {
  margin: 0 var(--space-3) 0 0;
  padding: 0.45rem 1.1rem;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--color-bg);
  box-shadow: inset 0 0 0 1.5px var(--color-border-strong);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  cursor: pointer;
  transition: box-shadow var(--dur-base) var(--ease-out);
}
:where(#wrapper) .form-control[type="file"]:hover::file-selector-button {
  background: var(--color-bg);
  box-shadow: inset 0 0 0 1.5px var(--color-primary);
}

:where(#wrapper) .form-text {
  display: block;
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  margin-top: var(--space-1);
}

/* Mot de passe : l'œil est un `.btn-primary` collé au champ. On fond le
   groupe en un seul champ, bouton compris. */
:where(#wrapper) .input-group.password-field {
  flex-wrap: nowrap;
  background: var(--color-bg-alt);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
:where(#wrapper) .password-field:focus-within {
  background: var(--color-bg);
  border-color: var(--color-accent);
  box-shadow: 0 0 0 4px rgba(200, 164, 93, 0.18);
}
:where(#wrapper) .password-field .form-control,
:where(#wrapper) .password-field .form-control:focus {
  background: transparent;
  border: 0;
  box-shadow: none;
}
:where(#wrapper) .input-group > .form-control {
  flex: 1 1 auto;
  width: 1%;
  min-width: 0;
}

/* Cases à cocher et boutons radio : le bleu Bootstrap -> navy de marque. */
:where(#wrapper) .form-check-input {
  border-color: var(--color-border-strong);
  box-shadow: none;
}
:where(#wrapper) .form-check-input:checked {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}
:where(#wrapper) .form-check-input:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(200, 164, 93, 0.18);
}
:where(#wrapper) .form-check-label {
  font-size: var(--fs-sm);
  color: var(--color-text);
  line-height: var(--lh-normal);
}
[data-theme="dark"] :where(#wrapper) .form-check-input:checked {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
}

/* ===============================================================
   4. Boutons — les pilules de la fiche produit
   =============================================================== */

/* Action principale : pilule navy. */
:where(#wrapper) .btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  background: var(--color-primary);
  border: 0;
  border-radius: var(--radius-pill);
  color: var(--color-text-inverse);
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
  padding: 0.8rem 1.75rem;
  box-shadow: none;
  transition: background-color var(--dur-base) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
:where(#wrapper) .btn-primary:hover,
:where(#wrapper) .btn-primary:focus-visible,
:where(#wrapper) .btn-primary:active {
  background: var(--color-primary-700);
  color: var(--color-text-inverse);
  transform: translateY(-1px);
}
:where(#wrapper) .btn-primary .material-icons {
  font-size: 1.15em;
}
/* En schéma sombre le navy se confond avec le fond : or sur encre, comme
   `.lmcf-btn--primary`. */
[data-theme="dark"] :where(#wrapper) .btn-primary {
  background: var(--color-accent);
  color: #0E1B2C;
}
[data-theme="dark"] :where(#wrapper) .btn-primary:hover {
  background: var(--color-accent-600);
  color: #0E1B2C;
}

/* L'œil du mot de passe reste un ornement transparent — placé après la
   règle ci-dessus, à spécificité supérieure. */
:where(#wrapper) .password-field .btn,
:where(#wrapper) .password-field .btn:hover,
[data-theme="dark"] :where(#wrapper) .password-field .btn {
  background: transparent;
  border: 0;
  box-shadow: none;
  color: var(--color-text-muted);
  padding: 0 var(--space-4);
  transform: none;
}
:where(#wrapper) .password-field .btn:hover {
  color: var(--color-ink);
}

/* Actions secondaires : contour discret, même pilule. */
:where(#wrapper) .btn-outline-primary,
:where(#wrapper) .btn-outline-secondary,
:where(#wrapper) .btn-outline-tertiary,
:where(#wrapper) .btn-secondary,
:where(#wrapper) .btn-tertiary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  background: transparent;
  border: 0;
  border-radius: var(--radius-pill);
  box-shadow: inset 0 0 0 1.5px var(--color-border-strong);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
  padding: 0.8rem 1.75rem;
  transition: box-shadow var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out);
}
:where(#wrapper) .btn-outline-primary:hover,
:where(#wrapper) .btn-outline-secondary:hover,
:where(#wrapper) .btn-outline-tertiary:hover,
:where(#wrapper) .btn-secondary:hover,
:where(#wrapper) .btn-tertiary:hover {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--color-ink);
  color: var(--color-ink);
}
:where(#wrapper) :where(.btn-outline-primary, .btn-outline-secondary, .btn-outline-tertiary, .btn-secondary, .btn-tertiary) .material-icons {
  font-size: 1.15em;
}

/* Bouton « nu » : un lien doré. */
:where(#wrapper) .btn-basic,
:where(#wrapper) .btn-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0;
  background: transparent;
  border: 0;
  color: var(--color-accent-600);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  text-decoration: underline;
  text-underline-offset: 3px;
}
:where(#wrapper) .btn-basic:hover,
:where(#wrapper) .btn-link:hover {
  background: transparent;
  color: var(--color-accent);
}

:where(#wrapper) .buttons-wrapper {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-6);
}
:where(#wrapper) .buttons-wrapper--end {
  justify-content: flex-end;
}
:where(#wrapper) .buttons-wrapper--split {
  justify-content: space-between;
}

/* ===============================================================
   5. Alertes, cartes, tableaux
   =============================================================== */

:where(#wrapper) .alert {
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-accent);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: var(--fs-sm);
  padding: var(--space-4) var(--space-5);
}
:where(#wrapper) .alert-success {
  border-left-color: var(--color-success);
}
:where(#wrapper) .alert-danger {
  border-left-color: #B42318;
}

:where(#wrapper) .card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  color: var(--color-text);
}
:where(#wrapper) .card-header,
:where(#wrapper) .card-footer {
  background: transparent;
  border-color: var(--color-border);
}

:where(#wrapper) .table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--color-text);
  --bs-table-striped-bg: var(--color-surface);
  --bs-table-hover-bg: var(--color-bg-alt);
  --bs-table-border-color: var(--color-border);
  font-size: var(--fs-sm);
  color: var(--color-text);
}
:where(#wrapper) .table > thead th,
:where(#wrapper) .table > thead td {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  border-bottom: 1px solid var(--color-border-strong);
  background: transparent;
}
:where(#wrapper) .table > :not(caption) > * > * {
  padding: var(--space-3) var(--space-4);
  border-bottom-color: var(--color-border);
}

/* Pastilles d'état de commande, badges : pilule. */
:where(#wrapper) .badge {
  border-radius: var(--radius-pill);
  font-weight: var(--fw-semibold);
  padding: 0.35em 0.8em;
}

/* ===============================================================
   6. Espace client
   =============================================================== */

/* -- Colonne de navigation -- */
:where(#wrapper) .account-menu__title {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--color-ink);
  margin: var(--space-8) 0 var(--space-4);
}
:where(#wrapper) .account-menu--sidebar .account-menu__nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
:where(#wrapper) .account-menu--sidebar .account-menu__link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-text);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
  text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
:where(#wrapper) .account-menu--sidebar .account-menu__link:hover {
  background: var(--color-bg-alt);
  color: var(--color-ink);
}
:where(#wrapper) .account-menu--sidebar .account-menu__link--active,
:where(#wrapper) .account-menu--sidebar .account-menu__link--active:hover {
  background: var(--color-accent-100);
  color: var(--color-ink);
  font-weight: var(--fw-semibold);
}
[data-theme="dark"] :where(#wrapper) .account-menu--sidebar .account-menu__link--active {
  background: var(--color-bg-alt);
}
:where(#wrapper) .account-menu__icon {
  flex: none;
  font-size: 1.25rem;
  color: var(--color-text-muted);
}
:where(#wrapper) .account-menu__link--active .account-menu__icon,
:where(#wrapper) .account-menu__link:hover .account-menu__icon {
  color: var(--color-accent-600);
}
/* Déconnexion : du rouge Bootstrap à un lien discret, séparé du reste. */
:where(#wrapper) .account-menu--sidebar .account-menu__link--signout {
  margin-top: var(--space-3);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
  border-radius: 0;
  color: var(--color-text-muted);
}
:where(#wrapper) .account-menu--sidebar .account-menu__link--signout:hover {
  background: transparent;
  color: var(--color-ink);
}

/* -- Tableau de bord : tuiles -- */
:where(#wrapper) .account-menu--main {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-4);
}
:where(#wrapper) .account-menu--main .account-menu__link {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  min-height: 9rem;
  padding: var(--space-6);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  color: var(--color-ink);
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  text-decoration: none;
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
}
:where(#wrapper) .account-menu--main .account-menu__link:hover {
  transform: translateY(-2px);
  border-color: var(--color-accent);
  box-shadow: var(--shadow-md);
  background: var(--color-bg);
  color: var(--color-ink);
}
:where(#wrapper) .account-menu--main .account-menu__icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-accent-100);
  color: var(--color-accent-600);
  font-size: 1.4rem;
}
[data-theme="dark"] :where(#wrapper) .account-menu--main .account-menu__icon {
  background: var(--color-bg-alt);
}
:where(#wrapper) .account-menu--main .account-menu__link--signout {
  color: var(--color-text-muted);
}
:where(#wrapper) .account-menu--main .account-menu__link--signout .account-menu__icon {
  background: var(--color-bg-alt);
  color: var(--color-text-muted);
}

/* « Retour à votre compte » au-dessus des sous-pages. */
:where(#wrapper) .account-menu__back {
  margin-bottom: var(--space-6);
}

/* ===============================================================
   7. Plan du site
   =============================================================== */

:where(#wrapper) .sitemap {
  row-gap: var(--space-8);
}
:where(#wrapper) .sitemap__block h2 {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-accent-600);
  margin-bottom: var(--space-4);
}
/* L'arborescence : filet et tirets bleus (`--bs-primary-border-subtle`)
   -> le trait neutre des bordures du site. */
:where(#wrapper) .sitemap__list--nested {
  border-left-width: 1px;
  border-left-color: var(--color-border-strong);
}
:where(#wrapper) .sitemap__list--nested > .sitemap__item > .sitemap__link::before {
  height: 1px;
  background-color: var(--color-border-strong);
}
:where(#wrapper) .page-content .sitemap__link {
  color: var(--color-text);
  font-size: var(--fs-sm);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
:where(#wrapper) .page-content .sitemap__link:hover {
  color: var(--color-accent-600);
}

/* ===============================================================
   7 bis. Marques — une carte par marque, comme les catalogues
   (`.brand` sert aussi au logo de l'en-tête : on reste sous #wrapper)
   =============================================================== */

:where(#wrapper) .brand__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-4);
}
:where(#wrapper) .brand__list .brand {
  position: relative;
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-content: center;
  column-gap: var(--space-4);
  row-gap: var(--space-1);
  margin: 0;
  padding: var(--space-5);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
}
:where(#wrapper) .brand__list .brand:hover {
  transform: translateY(-2px);
  border-color: var(--color-accent);
  box-shadow: var(--shadow-md);
}
/* Logo à gauche sur deux lignes ; nom puis nombre de produits empilés. */
:where(#wrapper) .brand__image {
  grid-row: 1 / span 2;
  align-self: center;
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  text-align: center;
}
:where(#wrapper) .brand__infos,
:where(#wrapper) .brand__products {
  text-align: left;
}
:where(#wrapper) .brand__infos {
  align-self: end;
  margin: 0;
}
:where(#wrapper) .brand__title {
  color: var(--color-ink);
  font-weight: var(--fw-semibold);
  text-decoration: none;
}
:where(#wrapper) .brand__title:hover {
  color: var(--color-ink);
}
:where(#wrapper) .brand__products {
  align-self: start;
  margin: 0;
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}

/* ===============================================================
   8. Magasins
   =============================================================== */

:where(#wrapper) .store {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
:where(#wrapper) .store__name {
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  color: var(--color-ink);
}
:where(#wrapper) .store__address {
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
}
:where(#wrapper) .store__toggle {
  color: var(--color-accent-600);
  font-weight: var(--fw-semibold);
  background: transparent;
  box-shadow: none;
}

/* ===============================================================
   9. Formulaires en carte
   Une carte blanche cerclée par formulaire, comme la connexion et la
   demande de devis.
   =============================================================== */

/* Le `html` en tête : lmcf.css remet à zéro le padding de
   `body:not(#index) #content.page-content`, à spécificité égale et chargé
   après cette feuille. */
html body#guest-tracking #content.page-content,
html body#identity #content.page-content,
html body#address #content.page-content {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: clamp(1.5rem, 4vw, 2.5rem);
}

/* ===============================================================
   10. Page contact (templates/contact.tpl)
   =============================================================== */

/* -- Bandeau sombre, comme les pages légales -- */
.contact-hero {
  background-color: #0D0D0C;
  color: var(--color-text-inverse);
  padding-block: var(--space-12);
}
.contact-hero__title {
  margin: var(--space-2) 0 0;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: -0.01em;
  color: var(--color-text-inverse);
}
.contact-hero__lede {
  max-width: 38rem;
  margin: var(--space-5) 0 0;
  font-size: var(--fs-md);
  line-height: var(--lh-normal);
  color: rgba(245, 243, 238, 0.78);
}

.contact-body {
  background: var(--color-surface);
  padding-block: var(--space-12) var(--space-16);
}
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
  align-items: start;
}
@media (min-width: 992px) {
  .contact-grid {
    grid-template-columns: minmax(280px, 380px) minmax(0, 1fr);
    gap: var(--space-8);
  }
}

.contact-card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: clamp(1.5rem, 4vw, 2.5rem);
}
.contact-card__title {
  margin: 0 0 var(--space-2);
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  color: var(--color-ink);
}

/* -- Coordonnées -- */
.contact-info__group + .contact-info__group {
  margin-top: var(--space-6);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
}
.contact-info__heading {
  display: block;
  margin-bottom: var(--space-4);
}
.contact-info__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-3);
}
.contact-info__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
  color: var(--color-text);
}
.contact-info__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-accent-100);
  color: var(--color-accent-600);
}
[data-theme="dark"] .contact-info__icon {
  background: var(--color-bg-alt);
}
.contact-info__item a {
  color: var(--color-ink);
  font-weight: var(--fw-semibold);
  text-decoration: none;
}
.contact-info__item a:hover {
  color: var(--color-accent-600);
}

/* -- Formulaire (modules/contactform/…/contactform.tpl) -- */
.contact-form .form-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: var(--space-5);
}
@media (min-width: 768px) {
  .contact-form .form-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .contact-form .contact-form__field--wide {
    grid-column: 1 / -1;
  }
}
.contact-form .form-fields > .mb-3 {
  margin-bottom: var(--space-5) !important;
}
.contact-form .buttons-wrapper {
  justify-content: space-between;
  margin-top: var(--space-2);
}
.contact-form__note {
  margin: 0;
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}
/* Le bouton d'envoi passe à l'or, comme `.lmcf-btn--primary`, en clair
   comme en sombre. */
.contact-form .btn-primary {
  background: var(--color-accent);
  color: #0E1B2C;
  box-shadow: var(--shadow-accent);
}
.contact-form .btn-primary:hover,
.contact-form .btn-primary:focus-visible,
.contact-form .btn-primary:active {
  background: var(--color-accent-600);
  color: #0E1B2C;
}