/** Shopify CDN: Minification failed

Line 698:1 Expected "}" to go with "{"

**/
/* ============================================================
   Architecture Québec — Surcharges CSS globales du thème Aurora
   ============================================================

   Ce fichier contient toutes les règles CSS personnalisées
   appliquées globalement au thème, en complément du CSS Aurora
   natif. Il est chargé via layout/theme.liquid après main.css
   pour avoir priorité.

   Convention : organiser les règles par thème (typographie,
   couleurs, espacements, etc.) avec un commentaire d'en-tête
   indiquant la date d'ajout et la raison.
   ============================================================ */

/* --- Police principale Inter Tight (Google Fonts) sur tout le site. */
:root {
  --gsc-body-font-family:               'Inter Tight', Inter, system-ui, -apple-system, sans-serif;
  --gsc-headings-font-family:           'Inter Tight', Inter, system-ui, -apple-system, sans-serif;
  --gsc-button-font-family:             'Inter Tight', Inter, system-ui, -apple-system, sans-serif;
  --gsc-header-font-family:             'Inter Tight', Inter, system-ui, -apple-system, sans-serif;
  --gsc-drawer-font-family:             'Inter Tight', Inter, system-ui, -apple-system, sans-serif;
  --gsc-header-icons-font-family:       'Inter Tight', Inter, system-ui, -apple-system, sans-serif;
  --gsc-product-card-title-font-family: 'Inter Tight', Inter, system-ui, -apple-system, sans-serif;
  --gsc-product-card-price-font-family: 'Inter Tight', Inter, system-ui, -apple-system, sans-serif;
  --gsc-body-font-weight: 400;
  --gsc-drawer-font-weight: 300;

  /* 2026-05-25 — Header en poids 600 (semibold). Override Aurora.
     Cascade automatique sur .header__item, .header__icon-label, et toutes
     les classes qui consomment ces variables natives. */
  --gsc-header-font-weight: 600;
  --gsc-header-icons-font-weight: 600;
  --gsc-drawer-font-weight: 600;
}

/* Menu de navigation : suit la police d'en-tete du site (Inter Tight). Le reglage
   menu_font_family d'Aurora est vestigial (jamais applique dans le code). */
.header__menu,
.header__menu-item,
.header__menu-item-wrap,
.header__menu-item-label {
  font-family: var(--gsc-header-font-family) !important;
}

/* --- 2026-05-18 — Display 1/2/3 toujours en majuscules */
.display1,
.display2,
.display3 {
  text-transform: uppercase;
}

/* --- 2026-05-22 — Mobile : Display 1/2/3 scale auto, jamais de coupure
   Pour les titres composés d'un seul long mot (ex: _naturehumaine, AaP+Sustainability)
   qui dépassent la largeur viewport. Quatre mesures combinées :
   1. font-size avec min() : taille Aurora OU vw-based — la plus petite
   2. hyphens + word-break : aucune coupure de mot
   3. max-width: 100% + box-sizing border-box : titre confiné dans son parent
   4. padding-inline natif Aurora pour matcher l'inset des autres éléments
      (utilise --gsc-aside-padding-size avec fallback) — n'a d'effet que si
      le parent ne padding pas déjà.
   Coefficients vw calibrés pour qu'un mot de ~14 caractères tienne dans
   une viewport de 360px sans déborder. */
@media (max-width: 749px) {
  .display1 {
    font-size: min(var(--gsc-display-1-font-size), 10vw) !important;
  }
  .display2 {
    font-size: min(var(--gsc-display-2-font-size), 8vw) !important;
  }
  .display3 {
    font-size: min(var(--gsc-display-3-font-size), 6.8vw) !important;
  }
  .display1,
  .display2,
  .display3 {
    hyphens: none !important;
    -webkit-hyphens: none !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    /* line-height naturelle réduite pour les longs mots qui se rétrécissent
       (sinon line-box trop haute par rapport au texte réduit) */
    line-height: 1.05 !important;
  }
}

/* --- 2026-05-19 — Boutons style « link » : underline-track */
.link__text {
  --vwl-track-thickness: 2.5px;
  --vwl-track-opacity-pct: 18%;
  background-image:
    linear-gradient(to right, currentColor, currentColor),
    linear-gradient(
      to right,
      color-mix(in srgb, currentColor var(--vwl-track-opacity-pct), transparent),
      color-mix(in srgb, currentColor var(--vwl-track-opacity-pct), transparent)
    );
  background-position: 0 100%, 0 100%;
  background-size: 0 var(--vwl-track-thickness), 100% var(--vwl-track-thickness);
  background-repeat: no-repeat, no-repeat;
  padding-bottom: 6px;
}
.link-parent-for-hover:hover .link__text,
.link:hover .link__text {
  background-size: 100% var(--vwl-track-thickness), 100% var(--vwl-track-thickness);
}

/* --- 2026-05-21 — Homepage : vendor name de « Projet du Jour » en Heading 6
   La section projet-du-jour ne vit que sur la home, mais on scope quand même
   à body.template-index par cohérence avec le pattern --project ci-dessus.
   line-height: 1 pour conserver l'underline-track à la bonne distance. */
body.template-index .projet-du-jour__vendor-below .vendor-with-logo__name {
  font-size: var(--gsc-heading-6-font-size);
  font-weight: var(--gsc-headings-font-weight);
  line-height: 1;
}

/* --- 2026-05-21 — Homepage : tous les types de boutons en Body 3
   Diagnostic : Aurora rend les link buttons via <a class="link"> avec
   <span class="link__text"> INSIDE — donc PAS de classe .btn sur les
   link buttons. Pour les couvrir tous, on cible à la fois .btn (primary,
   secondary) ET .link__text (link buttons).
   Les link buttons reçoivent en plus font-weight: 700 (gras) pour
   rester visuellement saillants malgré l'absence de fond plein. */
body.template-index .btn,
body.template-index .link__text {
  font-size: var(--gsc-body-font-size-m);
  line-height: var(--gsc-body-line-height-m);
}
body.template-index .link__text {
  font-weight: 700;
}

/* --- 2026-05-22 — Header : boutons « Pro » + « Soumettre un projet »
   Caractéristiques IDENTIQUES à la pilule date de la section projet-du-jour :
   padding 0.35em 0.9em, border-radius 999px, line-height 1.2.
   - Pro : fond noir + texte blanc (variant rempli)
   - Soumettre un projet : transparent + bordure pâle (variant outline, identique
     à la pilule date) */
.header__aq-btn {
  /* Caractéristiques IDENTIQUES aux boutons du profil (Nous joindre / Site web, style header mobbin). */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.6rem !important;
  padding: 0 1.8rem !important;
  border-radius: 999px !important;
  border: 0 !important;
  font-size: 1.4rem !important;
  font-weight: 600 !important;
  letter-spacing: .2px !important;
  line-height: 1.2 !important;
  white-space: nowrap;
  text-decoration: none;
  flex-shrink: 0;
  background-color: color-mix(in srgb, currentColor 8%, transparent) !important;
  color: rgba(var(--gsc-text-color), 1) !important;
  transition: background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease !important;
}
.header__aq-btn:hover {
  background-color: color-mix(in srgb, currentColor 14%, transparent) !important;
}
@media (max-width: 749px) {
  .header__aq-btn { min-height: 3rem !important; padding: 0 1.3rem !important; font-size: 1.3rem !important; }
}
.header__icons-right .header__aq-btn {
  margin-left: 0.6rem;
}

/* Override Aurora's intentional margin-right: -0.8rem on .header__icons-right
   (qui tire les icônes au-delà du padding pour aligner visuellement).
   Avec nos boutons à la fin de cette zone, on veut qu'ils respectent le
   padding du header configuré dans le theme editor (Left and right). */
.header__icons-right {
  margin-right: 0 !important;
}
.header__aq-btn--pro {
  background-color: rgba(var(--gsc-text-color), 1) !important;
  color: rgba(var(--gsc-background-color), 1) !important;
}
.header__aq-btn--pro:hover {
  background-color: rgba(var(--gsc-text-color), 1) !important;
  opacity: .88;
}
.header__aq-btn--submit {
  background-color: color-mix(in srgb, currentColor 8%, transparent) !important;
  color: rgba(var(--gsc-text-color), 1) !important;
  border: 0 !important;
}
.header__aq-btn--submit:hover {
  background-color: color-mix(in srgb, currentColor 14%, transparent) !important;
  color: rgba(var(--gsc-text-color), 1) !important;
}

/* --- 2026-05-21 — « par » universel en taille Body 6
   S'applique partout sur le site (product card, vendor-with-logo, product-vendor-block).
   Spécificité boostée via chaînage de classes pour battre les <style> inline
   des snippets qui posent leurs propres font-size (0.85em par défaut). */
.product-card .product-card__vendor-by,
.vendor-with-logo .vendor-with-logo__by,
.product-vendor-row .product-vendor-row__by {
  font-size: var(--gsc-body-font-size-xxs);
  line-height: var(--gsc-body-line-height-xxs);
}

/* --- 2026-05-19 — Product card style par défaut (TOUT sauf homepage)
   2026-05-21 — Mise à jour : le titre est RÉAFFICHÉ au-dessus du vendor,
   à la même taille que le vendor (Aurora natif fz-12 + lh-5). Le « par »
   reste masqué et le logo reste petit (24px). */
body:not(.template-index) .product-card__title {
  font-size: var(--gsc-fz-12);
  line-height: var(--gsc-lh-5);
}
body:not(.template-index) .product-card__vendor-by {
  display: none;
}
body:not(.template-index) .product-card__vendor-logo {
  width: 24px;
  height: 24px;
}
/* --- AQ multi-acteurs : avatars à la MÊME taille que le logo simple (24px hors-accueil) --- */
body:not(.template-index) .product-card__avatars .product-card__avatar {
  width: 24px;
  height: 24px;
  margin-left: -8px;
}
body:not(.template-index) .product-card__avatars .product-card__avatar:first-child { margin-left: 0; }

/* --- 2026-05-19 — Placeholder Shopify : cacher l'icône casquette */
svg[class*="placeholder"] {
  background: var(--gsc-foreground-color-100);
}
svg[class*="placeholder"] > * {
  display: none;
}

/* --- 2026-05-19 — Header : items du menu collés au logo (à gauche) */
.header__grid--logo-left-menu-top-left .header__nav {
  justify-content: flex-start;
}

/* --- 2026-05-22 — Mobile : logo collé au hamburger quand alignement = Left
   Aurora par défaut applique `grid-template-columns: 1fr auto 1fr` sur le grid
   du header en mobile, ce qui force le logo en CENTRE visuellement, même quand
   l'utilisateur a choisi « Logo alignment = Left » dans le theme editor.
   On override avec `auto auto 1fr` : hamburger auto + logo auto (juste à côté)
   + icons-right 1fr (push à droite). */
@media (max-width: 749px) {
  .header__grid[class*="logo-left"] {
    grid-template-columns: auto auto 1fr !important;
  }
}

/* ============================================================
   2026-05-21 — Product Card Job (3e style)
   Carte 100% texte pour les Jobs (product.template_suffix == 'job').
   3 zones empilées séparées par des hairlines :
   1) Vendor (logo + nom)  2) Titre + excerpt  3) Infos + CTA
   ============================================================ */
.product-card-job {
  --pcj-radius: var(--gsc-base-radii, 1.2rem);
  --pcj-border: 1px solid color-mix(in srgb, currentColor 12%, transparent);
  --pcj-padding-x: 4rem;            /* horizontal (2026-05-24 — match référence) */
  --pcj-padding-y: 4rem;            /* vertical main zone (titre + excerpt) */
  --pcj-padding-y-vendor: 3rem;     /* vertical vendor-zone — AÉRÉ autour du logo */
  --pcj-padding-y-row: 2rem;        /* vertical info-rows — plus SERRÉ (Location/Website/Date) */
  display: flex;
  flex-direction: column;
  background-color: #ffffff;
  color: #000000;
  border-radius: var(--pcj-radius);
  overflow: hidden;
  height: 100%;
}
.product-card-job__zone {
  padding: var(--pcj-padding-y) var(--pcj-padding-x);
}
.product-card-job__zone + .product-card-job__zone {
  border-top: var(--pcj-border);
}

/* Zone 1 — Vendor — caractéristiques IDENTIQUES à .product-card-job__info-row
   (la date row du bas) pour que le haut et le bas de la carte aient la même
   présence visuelle. Override le padding shorthand de .product-card-job__zone. */
.product-card-job__vendor-zone {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.8rem;
  padding: var(--pcj-padding-y-vendor) var(--pcj-padding-x) !important;
  /* Hauteur FIXE du contenu = 36px (logo). Cards sans logo voient leur texte
     centré dans cette zone de 36px grâce à align-items: center. */
  height: 36px !important;
  box-sizing: content-box !important;
}
/* Force la line-height compacte du vendor name pour éviter qu'il déborde
   le 36px de la zone et ne casse l'alignement. */
.product-card-job__vendor-name {
  line-height: 1 !important;
}
.product-card-job__vendor-logo {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background-color: rgba(var(--gsc-foreground-color-100), 1);
}
.product-card-job__vendor-name {
  font-weight: 600;
  text-decoration: none;
  color: inherit;
  line-height: 1;
  --vwl-track-thickness: 2.5px;
  --vwl-track-opacity-pct: 18%;
  background-image:
    linear-gradient(to right, currentColor, currentColor),
    linear-gradient(
      to right,
      color-mix(in srgb, currentColor var(--vwl-track-opacity-pct), transparent),
      color-mix(in srgb, currentColor var(--vwl-track-opacity-pct), transparent)
    );
  background-position: 0 100%, 0 100%;
  background-size: 0 var(--vwl-track-thickness), 100% var(--vwl-track-thickness);
  background-repeat: no-repeat, no-repeat;
  padding-bottom: 6px;
  transition: background-size 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.product-card-job__vendor-name:hover {
  background-size: 100% var(--vwl-track-thickness), 100% var(--vwl-track-thickness);
}

/* Zone 2 — Titre + extrait */
.product-card-job__main-zone {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.product-card-job__title {
  margin: 0;
}
.product-card-job__title a {
  color: inherit;
  text-decoration: none;
}
.product-card-job__title a:hover {
  opacity: 0.75;
}
.product-card-job__excerpt {
  margin: 0;
  opacity: 0.75;
}

/* Zone 3 — Infos + CTA */
.product-card-job__info-zone {
  display: flex;
  flex-direction: column;
  padding: 0;
}
.product-card-job__info-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: var(--pcj-padding-y-row) var(--pcj-padding-x);
}
.product-card-job__info-row + .product-card-job__info-row {
  border-top: var(--pcj-border);
}
.product-card-job__info-label {
  font-weight: 600;
  flex-shrink: 0;
}
.product-card-job__info-value {
  text-align: right;
  opacity: 0.85;
}

/* Ligne du bas — date + flèche CTA */
.product-card-job__date {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  opacity: 0.85;
}
.product-card-job__date-icon {
  flex-shrink: 0;
  opacity: 0.85;
}
.product-card-job__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  color: inherit;
  text-decoration: none;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.product-card-job__cta:hover {
  transform: translateX(3px);
  opacity: 0.7;
}

/* --- 2026-05-19 — Header transparent : match automatique avec body / 1re section
   Diagnostic : le setting color_scheme du header (color-1) diffère du
   default_color_scheme du thème (scheme-{uuid}). Le body porte la classe
   color-{default} et la première section utilise aussi default — donc
   body et 1re section ont le MÊME background, mais le header en a un
   différent à cause de color-1.

   Solution CSS-only : background du header transparent. Le body étant
   l'ancêtre du header, son background montre à travers. Résultat :
   header prend automatiquement le default_color_scheme et match avec
   la 1re section dans la majorité des cas (toute section qui utilise
   color_scheme_variant: default).

   Pas de JS, pas de race condition, pas de coordination manuelle.
   ----------------------------------------------------------- */
/* 1) Le body PEINT son background avec sa variable de scheme (default).
   Sans ça, le body est "vide" et HTML element (blanc) montre à travers
   le header transparent — d'où le mismatch persistant qu'on observait. */
body {
  background-color: var(--gsc-background-color-100);
}

/* 2) On vise TOUS les éléments du header qui pourraient avoir un fond,
   une ombre, une bordure ou un filtre — pour éviter toute séparation
   visuelle avec le body / la 1re section. */
.shopify-section-header,
.shopify-section-header > *,
header-component,
header-component.header,
.shopify-section-header .header,
.shopify-section-header .header__container,
.shopify-section-header .header__container--with-bg {
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  border-bottom: none !important;
  border-top: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* --- 2026-05-25 — Header : RETIRER tous les soulignements natifs Aurora
   ============================================================
   Aurora applique un soulignement animé (background-image gradient
   linear) sur les items de menu via plusieurs classes. Convention AQ :
   header SANS aucun soulignement. Le reste du site garde l'underline-track
   AQ (V42) sur les 4 classes documentées : .vendor-with-logo__name,
   .product-card__vendor, .product-card-job__vendor-name, .link__text.

   Approche AGRESSIVE : neutralise text-decoration + background-image sur
   TOUS les descendants du header/drawer (links, spans, items, labels).
   ============================================================ */

/* === AQ-HEADER-NO-UNDERLINE-V4-2026-05-25 ===
   VRAIE source du soulignement : pseudo-élément ::before sur
   .underline-text__label (top-level menu items Aurora).

   Aurora crée un trait absolument positionné en bas du label, avec
   transform: translateX(-101%) caché. Au hover/active, transform passe
   à translateX(0%) pour révéler. Pour le faire disparaître, on cache
   le pseudo entièrement.

   Cible aussi .header__menu-item-label (dropdowns) au cas où. */
.underline-text__label::before,
.underline-text:hover .underline-text__label::before,
.underline-text.active .underline-text__label::before,
.header__dropdown-toggle[data-aria-expanded='true'] .underline-text__label::before {
  display: none !important;
  content: none !important;
  background: none !important;
  width: 0 !important;
  height: 0 !important;
  transform: translateX(-101%) !important;
}

/* Sécurité : dropdowns menu items (cas où Aurora utilise .header__menu-item-label) */
.header__menu-item-label,
.header__menu-item:hover .header__menu-item-label,
.header__menu-item.active .header__menu-item-label,
.header__menu-item--mega-subtitle--current .header__menu-item-label,
.header__menu-item-wrap[data-aria-expanded='true'] .header__menu-item-label,
.drawer-menu__menu-item-label,
.drawer-menu__menu-item:hover .drawer-menu__menu-item-label,
.drawer-menu__menu-item.active .drawer-menu__menu-item-label {
  background: none !important;
  background-image: none !important;
  background-size: 0 !important;
  text-decoration: none !important;
}

/* --- 2026-05-25 — Product details tabs : underline-track AQ au lieu de border 1px
   ============================================================
   Aurora natif applique `border-bottom: 1px solid transparent` sur
   `.product-details__tab-name`, puis `border-color: var(--gsc-text-color-100)`
   sur `.selected`. Visuellement : trait fin 1px qui apparaît seulement
   sur l'onglet actif.

   Convention AQ : underline-track 3px partout, currentColor pour
   adaptation auto color scheme. Inactif = track pâle (18 % opacity),
   actif = fill opaque. Transition fluide entre les deux. */
.product-details__tab-name {
  /* Annule le border Aurora pour passer en background-image gradient */
  border-bottom: none !important;
  /* Track pâle visible toujours (18 % opacity currentColor) */
  background-image: linear-gradient(
    to right,
    currentColor, currentColor
  ),
  linear-gradient(
    to right,
    color-mix(in srgb, currentColor 18%, transparent),
    color-mix(in srgb, currentColor 18%, transparent)
  );
  background-position: 0 100%, 0 100%;
  /* Fill foncé caché par défaut (size 0), track pâle visible (100%) */
  background-size: 0 var(--vwl-track-thickness, 2.5px), 100% var(--vwl-track-thickness, 2.5px);
  background-repeat: no-repeat, no-repeat;
  /* Transition fluide quand l'onglet devient actif */
  transition: background-size 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  /* Padding-bottom canonique AQ (V42) au lieu du 1.6rem Aurora */
  padding-bottom: 6px !important;
}
/* Onglet actif : fill foncé révèle (100% width) */
.product-details__tab-name.selected {
  background-size: 100% var(--vwl-track-thickness, 2.5px), 100% var(--vwl-track-thickness, 2.5px);
}
/* Hover sur onglet inactif : preview du fill */
.product-details__tab-name:hover:not(.selected) {
  background-size: 100% var(--vwl-track-thickness, 2.5px), 100% var(--vwl-track-thickness, 2.5px);
  opacity: 0.7;
}

/* --- 2026-05-24 — Content tab (Product information) : resserrer label↔valeur
   Snippet Aurora `snippets/product-content-tab-block.liquid`.
   Aurora natif applique `.product-content-tab__title { margin: 0 0 2rem }`
   (32 px de margin-bottom entre le titre "Architecture" et le content
   "T B A"). Trop d'air. Override à 0.4rem (~6.4 px). */
.product-content-tab__title {
  margin-bottom: 0.4rem !important;
}

/* --- 2026-05-25 — Boutons style "pill" inspiré du thème Basho (Ghost)
   ============================================================
   Adoption visuelle des boutons Basho : padding généreux, pill complète
   au hover/idle, transition fluide. Préserve les settings du theme editor
   Aurora : la couleur, la bordure, la police, la casse, le letter-spacing,
   et le BORDER-RADIUS (round_level dans Customize) restent configurables.
   On ne touche QUE les variables CSS de padding (Aurora ne les expose
   pas en theme editor).

   ARCHITECTURE :
   - Override `--gsc-button-padding-*` au niveau .btn pour padding généreux par
     défaut (CTA principaux : hero, formulaires, page actions)
   - Override compact dans contextes denses : .product-card, .header, .cart
   - Media query mobile pour réduire progressivement

   SETTINGS THEME EDITOR À CONFIGURER MANUELLEMENT (Customize → Theme settings) :
   - Typography → Button text transform = "normal"     (Basho ≠ uppercase)
   - Typography → Button letter spacing = 0
   - Typography → Button font scale = 100 ou 110 (au goût)
   - Buttons → Primary border width = 0                (Basho sans bordure)
   - Appearance → Edge rounding (round_level) = 8 (max) pour effet pill complet
   - Color schemes → Primary button bg = dark / hover bg = couleur accent
   ============================================================ */

/* IMPORTANT (correction 2026-05-25) : Aurora hard-code `padding: 1.2rem 3.2rem`
   et `min-height: 4.8rem` DIRECTEMENT dans la règle .btn — les variables
   --gsc-button-padding-* ne sont utilisées QUE par .navigation-buttons__button-title
   (un composant spécifique). Donc on override les propriétés finales, pas les
   variables. Les `!important` battent la cascade Aurora à spécificité égale. */

/* 2026-05-25 — Boutons : adopter le look compact Basho UNIQUEMENT sur les
   boutons sans modificateur de taille Aurora. Les types Aurora .btn--lg,
   .btn--md, .btn--sm gardent leur padding/min-height natifs (système de
   tailles préservé). Le border-radius reste géré par Aurora via
   --gsc-button-radii (setting round_level dans Customize → Appearance). */

/* Padding compact pour .btn sans modificateur de taille (cas par défaut) */
.btn:not(.btn--lg):not(.btn--md):not(.btn--sm) {
  padding: 8px 14px;
  min-height: 0;
  height: auto;
}

/* Mobile : padding encore plus serré */
@media (max-width: 749px) {
  .btn:not(.btn--lg):not(.btn--md):not(.btn--sm) {
    padding: 6px 12px;
  }
}

/* Transition fluide pour les hover states (Basho : 0.2s ease).
   Aurora a déjà des transitions mais pas toujours sur toutes les propriétés.
   On élargit aux 4 propriétés que Basho fait transiter. */
.btn {
  transition: color 0.2s ease,
              background-color 0.2s ease,
              border-color 0.2s ease,
              opacity 0.2s ease !important;
}
/* --- 2026-06-29 — Page Contact en 2 colonnes (texte à gauche, formulaire à droite), refonte style awwwards.
   La section native contact-form empile .contact__content puis .contact__form ; on les met en grille. --- */
@media (min-width: 750px) {
  .contact .contact__container {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: clamp(3.2rem, 6vw, 7rem);
    align-items: start;
  }
  .contact .contact__content { margin-bottom: 0; max-width: 42ch; }
  .contact .contact__form { margin-top: 0; }
}
/* --- 2026-06-29 — Footer : filet de la barre du bas en pointillé (identique au tableau du répertoire) --- */
.footer__utils--bordered {
  border-top: none !important;
  background-image: linear-gradient(
    to right,
    rgba(var(--gsc-text-color), 1) 0,
    rgba(var(--gsc-text-color), 1) 10%,
    rgba(var(--gsc-text-color), 0) 10%
  ) !important;
  background-size: 8px 1px !important;
  background-position: 50% 0 !important;
  background-repeat: repeat-x !important;

/* --- 2026-07 — Commutateur d'entité unique (Mon espace / account-page-menu).
   Direction validée : un seul commutateur persistant en haut de la sidebar,
   remplace l'ancien couple menu déroulant + cartes-pills. Profil monochrome
   fidèle au site ; accent neutre. Placé ici (fichier SAFE) car le commutateur
   vit dans account-page-menu, rendu sur toutes les pages de compte. --- */
.aq-firmswitch { position: relative; margin-bottom: 1.6rem; }
.aq-firmswitch__btn {
  width: 100%; display: flex; align-items: center; gap: 1.2rem;
  background: #fff; border: 1px solid #E6E6E6; border-radius: 1.4rem;
  padding: 1rem 1.2rem; cursor: pointer; text-align: left;
  font-family: 'Inter Tight', sans-serif; transition: border-color .15s, box-shadow .15s;
}
.aq-firmswitch__btn[data-single='true'] { cursor: default; }
.aq-firmswitch__btn:hover { border-color: #DEDEDE; box-shadow: 0 1px 3px rgba(0,0,0,.04); }
.aq-firmswitch__logo {
  width: 3.8rem; height: 3.8rem; flex: 0 0 3.8rem; border-radius: .9rem;
  background: #222; color: #fff; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.aq-firmswitch__logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.aq-firmswitch__logo--sm { width: 3rem; height: 3rem; flex-basis: 3rem; border-radius: .7rem; }
.aq-firmswitch__logo-txt { font-size: 1.1rem; font-weight: 600; }
.aq-firmswitch__meta { flex: 1; min-width: 0; }
.aq-firmswitch__eyebrow { display: block; font-size: 1.1rem; color: #8A8A8A; font-weight: 500; }
.aq-firmswitch__name {
  display: block; font-size: 1.5rem; font-weight: 600; line-height: 1.2;
  color: #222; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.aq-firmswitch__chev { color: #8A8A8A; flex: 0 0 auto; transition: transform .18s; }
.aq-firmswitch.is-open .aq-firmswitch__chev { transform: rotate(180deg); }
.aq-firmswitch__menu {
  position: absolute; top: calc(100% + .6rem); left: 0; right: 0; z-index: 30;
  background: #fff; border: 1px solid #E6E6E6; border-radius: 1.4rem;
  box-shadow: 0 1.2rem 3.2rem rgba(0,0,0,.10); padding: .6rem;
  opacity: 0; visibility: hidden; transform: translateY(-.4rem); transition: .16s;
}
.aq-firmswitch.is-open .aq-firmswitch__menu { opacity: 1; visibility: visible; transform: none; }
.aq-firmswitch__cap {
  font-size: 1.1rem; color: #8A8A8A; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; padding: .8rem 1rem .6rem; font-family: 'Inter Tight', sans-serif;
}
.aq-firmswitch__item {
  width: 100%; display: flex; align-items: center; gap: 1rem; padding: .8rem 1rem;
  border: none; background: none; border-radius: .9rem; cursor: pointer;
  font-family: 'Inter Tight', sans-serif; text-align: left; transition: background .12s;
}
.aq-firmswitch__item:hover { background: #F8F8F8; }
.aq-firmswitch__item-name { flex: 1; font-size: 1.4rem; font-weight: 500; color: #222; }
.aq-firmswitch__check { color: #222; opacity: 0; flex: 0 0 auto; }
.aq-firmswitch__item.is-active .aq-firmswitch__check { opacity: 1; }
.aq-firmswitch__item.is-active .aq-firmswitch__item-name { font-weight: 600; }
.aq-firmswitch__sep { height: 1px; background: #EDEDED; margin: .6rem .4rem; }
.aq-firmswitch__add {
  display: flex; align-items: center; gap: 1rem; padding: .9rem 1rem; border-radius: .9rem;
  text-decoration: none; color: #222; font-size: 1.4rem; font-weight: 500;
  font-family: 'Inter Tight', sans-serif; transition: background .12s;
}
.aq-firmswitch__add:hover { background: #F8F8F8; }
.aq-firmswitch__add-plus {
  width: 3rem; height: 3rem; flex: 0 0 3rem; border-radius: .7rem; border: 1px dashed #DEDEDE;
  display: flex; align-items: center; justify-content: center; color: #8A8A8A;
}