/* ============================================================
   H AUTO NETTOYAGE — couche de rafraîchissement visuel
   ------------------------------------------------------------
   Une seule feuille, chargée en dernier. Elle ne touche à AUCUN
   contenu : mêmes textes, mêmes titres, mêmes liens, mêmes données
   structurées. Google voit exactement la même page qu'avant.

   Parti pris : clair et aéré, rouge en accent.
   - on sort des gros titres condensés tout en majuscules
   - on respire : plus d'air entre les sections
   - les cartes deviennent blanches, bordées, légèrement ombrées
   - les boutons s'arrondissent et réagissent au survol
   ============================================================ */

:root {
  --ha-rouge: #dc2626;
  --ha-rouge-fonce: #b91c1c;
  --ha-encre: #111114;
  --ha-gris: #6b6b76;
  --ha-trait: #e7e7ec;
  --ha-fond: #fafafa;
  --ha-rayon: 18px;
  --ha-ombre: 0 1px 2px rgba(17, 17, 20, .04), 0 8px 24px -12px rgba(17, 17, 20, .12);
  --ha-ombre-forte: 0 2px 4px rgba(17, 17, 20, .05), 0 18px 40px -16px rgba(17, 17, 20, .22);
}

/* ---------- 1. Typographie : on quitte le condensé tout en capitales ----------
   Titres en Bricolage Grotesque : du caractère sans tomber dans la police
   qu'on voit sur un site sur deux. Le texte courant reste en Inter, déjà
   chargée par le thème. La police des titres est hébergée ici : l'adresse
   Google Fonts change de version sans prévenir (v7 -> v9) et le fichier
   disparaît, les titres retombant alors sur Inter sans qu'on le voie.   */

@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 600 800;
  font-display: swap;
  src: url(/actifs/css/bricolage-grotesque.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


h1, h2, h3, h4, h5, h6,
.h0, .h1, .h2, .h3, .h4, .h5, .h6,
.title, .pricing-table__item-title, .pricing-table__title {
  font-family: 'Bricolage Grotesque', Inter, -apple-system, "Segoe UI", sans-serif !important;
  text-transform: none !important;
  font-weight: 700 !important;
  letter-spacing: -0.028em !important;
  line-height: 1.12 !important;
  text-wrap: balance;
  /* Pas de `color` ici : certaines sections ont un fond sombre et leur titre
     doit rester blanc. On ne touche qu'à la forme, jamais à la couleur. */
}

h1, .h1, .title { font-size: clamp(38px, 4.6vw, 60px) !important; }
h2, .h2 { font-size: clamp(30px, 3.6vw, 46px) !important; }
h3, .h3 { font-size: clamp(22px, 2.4vw, 30px) !important; }

p, li, .content { line-height: 1.65; }

/* Le trait rouge ondulé sous les titres : trop chargé, on le retire. */
.title--rounded::after,
.title--rounded::before,
.title__line,
.section-title__decoration { display: none !important; }

/* ---------- 2. De l'air ---------- */

.shopify-section > .section,
.shopify-section > .page-width,
.section-template { padding-block: clamp(56px, 7vw, 104px); }

.pricing-table__content > * + * { margin-top: 26px; }

/* ---------- 3. Cartes ---------- */

.pricing-table__item[class*="color-background-1"],
.pricing-table__item[class*="color-background-2"],
.card[class*="color-background-1"],
.card[class*="color-background-2"],
.collapsible-content__item {
  /* Jamais de fond imposé sur une carte au schéma sombre ou coloré :
     le texte y est blanc, un fond blanc le rendrait illisible. */
  background-color: #fff !important;
}

.pricing-table__item,
.card,
.testimonial,
.multicolumn-card,
.collapsible-content__item {
  border: 1px solid var(--ha-trait) !important;
  border-radius: var(--ha-rayon) !important;
  box-shadow: var(--ha-ombre);
  transition: transform .25s cubic-bezier(.2, .7, .3, 1), box-shadow .25s ease;
}

.pricing-table__item:hover,
.multicolumn-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--ha-ombre-forte);
}

.pricing-table__item--price { padding: 30px 26px !important; }

.pricing-table__item-price {
  font-family: 'Bricolage Grotesque', Inter, sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: -0.04em !important;
  font-variant-numeric: tabular-nums;
}

[class*="color-background-1"] .pricing-table__item-description,
[class*="color-background-2"] .pricing-table__item-description { color: var(--ha-gris) !important; }

.pricing-table__badge {
  border-radius: 999px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  padding: 6px 14px !important;
}

/* ---------- 4. Boutons ---------- */

.button,
.btn,
button.button,
a.button {
  border-radius: 999px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  padding: 15px 30px !important;
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease !important;
}

.button--primary,
.button--solid {
  background-color: var(--ha-rouge) !important;
  border-color: var(--ha-rouge) !important;
  box-shadow: 0 10px 20px -10px rgba(220, 38, 38, .55);
}

.button--primary:hover,
.button--solid:hover {
  background-color: var(--ha-rouge-fonce) !important;
  transform: translateY(-2px);
  box-shadow: 0 14px 26px -10px rgba(220, 38, 38, .6);
}

.button--secondary {
  background: #fff !important;
  color: var(--ha-encre) !important;
  border: 1px solid var(--ha-trait) !important;
}
.button--secondary:hover { border-color: var(--ha-encre) !important; transform: translateY(-2px); }

/* Boutons de type lien (« Voir les formules ») : on ne leur met ni fond,
   ni pastille — ils doivent rester des liens. */
.button--simple,
.button--link,
.button--tertiary,
.compare__button {
  background: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
}

/* ---------- 5. En-tête ---------- */

.header,
.header-wrapper {
  /* Un simple filet de séparation. Pas de fond imposé : le thème gère déjà
     le sien, et un blanc translucide par-dessus rendait la barre grisâtre. */
  border-bottom: 1px solid var(--ha-trait);
}

.header__menu-item,
.header__menu-item span {
  font-weight: 500 !important;
  letter-spacing: -0.01em !important;
  text-transform: none !important;
}

/* ---------- 6. Images ---------- */

.media img,
.card__media img,
.banner__media img { border-radius: calc(var(--ha-rayon) - 4px); }

/* ---------- 7. Sélecteur de gabarit : accordé au reste ---------- */

.gab-row {
  background: #fff;
  border: 1px solid var(--ha-trait);
  box-shadow: var(--ha-ombre);
}
.gab-btn[aria-pressed="true"] {
  background: var(--ha-rouge);
  box-shadow: 0 8px 16px -8px rgba(220, 38, 38, .6);
}
.gab-label { color: var(--ha-gris); letter-spacing: -0.01em; }

/* ---------- 8. Détails ---------- */

::selection { background: var(--ha-rouge); color: #fff; }

a { text-underline-offset: 3px; }

hr, .divider { border-color: var(--ha-trait) !important; }

/* La page de réservation a sa propre mise en page : on n'y touche pas. */
body.template-page-reserver .pricing-table__item,
body.template-page-reserver .button { box-shadow: none; transform: none; }

/* ---------- 9. Barre « Continuer » du moteur de réservation ----------
   Le thème ouvre <sticky-header> mais ne le referme jamais : le navigateur
   range donc TOUTE la page à l'intérieur de cet élément. Comme il porte un
   `transform`, il devient le bloc conteneur des éléments `position: fixed`
   qu'il contient — et la barre « Continuer », au lieu de rester collée en bas
   de l'écran, se retrouve à 8 800 px, tout en bas du document. Résultat :
   plus aucun moyen de passer à l'étape suivante, donc plus de réservation.

   On neutralise le transform : il ne servait qu'à l'animation de masquage de
   l'en-tête, alors que la barre de réservation, elle, est vitale. */
sticky-header,
sticky-header.header-wrapper {
  transform: none !important;
}