/* ============================================================================
   mobile.css — corrections de rendu sur petit écran.

   Chargé en dernier, après tous les autres CSS. Il ne redéfinit que ce qui
   casse réellement sous 768px, relevé au navigateur à 390, 360 et 320 px.
   Aucune couleur, aucune échelle typo n'est touchée : la DA ne bouge pas.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   1. Champs de formulaire : 16px minimum sur mobile.
   Sous 16px, Safari iOS zoome la page dès qu'on met le doigt dans un champ,
   et ne dézoome pas ensuite. Tous les champs du site étaient à 14 ou 15px :
   capture email du footer, formulaire de contact, formulaire de checkout.
   --------------------------------------------------------------------------- */
@media screen and (max-width: 767px) {
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  input[type="password"],
  input[type="search"],
  input[type="url"],
  input[type="date"],
  input:not([type]),
  textarea,
  select {
    font-size: 16px !important;
  }
}

/* ---------------------------------------------------------------------------
   2. Mots longs. « l'accompagnement » (/tarifs) et « Financement »
   (/financement) débordaient de leur conteneur sous 360px et élargissaient
   toute la page, ce qui décalait la barre de navigation fixe. La coupure ne
   se déclenche que si le mot ne tient pas : à 390px rien ne change.
   --------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6,
p, li, dt, dd, blockquote, figcaption, th, td {
  overflow-wrap: break-word;
}

/* ---------------------------------------------------------------------------
   3. Cibles tactiles. WCAG 2.2 AA demande 24px, iOS recommande 44pt.
   Les liens du bas de footer faisaient 19px de haut, collés les uns aux
   autres ; le fil d'Ariane et le sommaire des articles, 19 à 21px.
   --------------------------------------------------------------------------- */
@media screen and (max-width: 767px) {
  .footer_links {
    padding-top: 12px;
    padding-bottom: 12px;
  }

  .footer_brand-link {
    display: inline-block;
    padding-top: 12px;
    padding-bottom: 12px;
  }

  .art-fil a,
  .art-cote li a,
  .art-lien-simple {
    display: inline-block;
    padding-top: 7px;
    padding-bottom: 7px;
  }
}

/* ---------------------------------------------------------------------------
   4. La bulle du chatbot recouvrait la barre CTA fixe.
   Bulle Chatbase : 55px, en bas à droite à 16px du bord. Barre « Prendre ma
   place » : pleine largeur, à 15px du bord. Les 60px de droite du bouton
   ouvraient donc le chat au lieu du tunnel. On remonte la bulle au-dessus.
   --------------------------------------------------------------------------- */
@media screen and (max-width: 767px) {
  #chatbase-bubble-button {
    bottom: calc(82px + env(safe-area-inset-bottom)) !important;
  }
  #chatbase-message-bubbles {
    bottom: calc(150px + env(safe-area-inset-bottom)) !important;
  }
}

/* ---------------------------------------------------------------------------
   5. Barres fixes en bas d'écran et encoche iPhone.
   Sans safe-area-inset, la barre passe sous la barre de geste du téléphone.
   --------------------------------------------------------------------------- */
@media screen and (max-width: 767px) {
  .button-solid.in-navigation,
  .button-solid-big.in-navigation,
  .button-solid-2.in-navigation {
    margin-bottom: calc(15px + env(safe-area-inset-bottom));
  }

  .co_stickybar {
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
  }
}

/* ---------------------------------------------------------------------------
   6. Le bouton burger. L'icône fait 25 x 35 px : c'est la seule commande de
   navigation sur mobile, et elle est au bord de l'écran. On élargit la zone
   tactile à 44 x 44 sans bouger l'icône.
   --------------------------------------------------------------------------- */
@media screen and (max-width: 767px) {
  .navigation-burger {
    position: relative;
  }
  .navigation-burger::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
  }
}

/* ---------------------------------------------------------------------------
   7. Menu mobile ouvert : les 16 liens font 1380px de haut dans un écran de
   844. Le menu défile bien, mais son premier tiers passait sous le bandeau et
   le nom du site (le menu est en z-index -1, la barre au-dessus). On lui donne
   la hauteur de la barre en marge haute. Rien d'autre ne bouge.
   --------------------------------------------------------------------------- */
@media screen and (max-width: 767px) {
  .navigation-menu {
    padding-top: 84px;
  }
}

/* ---------------------------------------------------------------------------
   8. La barre de navigation fixe restait transparente : le contenu défilait
   dessous, le nom du site se superposait au texte, et au-dessus des sections
   noires le logo noir disparaissait.

   Le site a pourtant déjà la réponse : une interaction Webflow fait passer la
   barre en pêche opaque au défilement. Elle ne tourne que sur la home et
   /asonrythme/ — sur les 40 autres pages elle n'est jamais déclenchée.

   On reproduit donc son comportement, à sa couleur exacte, et seulement là où
   elle est absente : `:not([style*="background-color"])` laisse la main à
   l'interaction Webflow partout où elle fonctionne. L'état `page-defilee` est
   posé par assets/js/mobile.js.

   Ce bloc n'est pas limité au mobile : la barre passe sous le contenu à toutes
   les largeurs, et c'est le rendu de la home qui fait référence.
   --------------------------------------------------------------------------- */
.navigation-wrapper.cta-hero.padding:not([style*="background-color"]),
.navigation-wrapper.cta-hero.lp:not([style*="background-color"]),
header.navigation-wrapper:not(.cta-hero):not([style*="background-color"]) {
  transition: background-color .25s ease;
}

.page-defilee .navigation-wrapper.cta-hero.padding:not([style*="background-color"]),
.page-defilee .navigation-wrapper.cta-hero.lp:not([style*="background-color"]),
.page-defilee header.navigation-wrapper:not(.cta-hero):not([style*="background-color"]) {
  background-color: rgb(255, 232, 200);
}

/* Au-dessus d'une section noire, le script de page pose `nav-sur-noir` sur le
   body : logo, liens, « Se connecter » et burger passent en off-white. Avec le
   fond pêche ci-dessus, ça donnait de l'off-white sur du pêche — la barre
   devenait illisible dès le premier défilement. La barre suit donc le fond de
   la section qu'elle survole : noire au-dessus du noir, pêche partout ailleurs. */
.page-defilee body.nav-sur-noir .navigation-wrapper.cta-hero.padding:not([style*="background-color"]),
.page-defilee body.nav-sur-noir .navigation-wrapper.cta-hero.lp:not([style*="background-color"]),
.page-defilee body.nav-sur-noir header.navigation-wrapper:not(.cta-hero):not([style*="background-color"]) {
  background-color: var(--colors--black, #121117);
}

/* Sans bandeau noir, la barre gardait la marge haute qui lui était réservée
   (35px desktop, 55px mobile) et flottait sous une bande vide. Deux cas :
   /merci/ n'a jamais le bandeau, et partout ailleurs le script de la navbar le
   retire (avec la classe `bandeau`) une fois `data-bandeau-fin` passée. On
   recolle la barre en haut dès que le bandeau est absent, quelle que soit la
   classe de l'en-tête. */
header.navigation-wrapper:not(:has(.navigation-wrapper.band))
  .navigation-wrapper.cta-hero.padding {
  margin-top: 0;
}

/* ---------------------------------------------------------------------------
   9. Menu mobile. Les liens étaient en VCNudge 50px, centrés : 16 entrées sur
   1380px de haut, illisibles en liste et sans hiérarchie. On repasse sur une
   liste classique — police de labeur, aligné à gauche, une ligne par entrée,
   filet de séparation. Le CTA fixe reste visible par-dessus.
   --------------------------------------------------------------------------- */
@media screen and (max-width: 767px) {
  .navigation-menu {
    align-items: stretch;
    /* 84px = les 64px de la barre de navigation + 20px de dégagement.
       Le padding bas (140px, posé dans la page) dégage le CTA fixe. */
    padding-top: 84px;
    padding-left: 24px;
    padding-right: 24px;
  }

  .navigation-menu-links {
    font-family: Swissnow, Arial, sans-serif;
    font-size: 17px;
    line-height: 24px;
    font-weight: 500;
    letter-spacing: 0;
    text-align: left;
    margin: 0;
    padding: 13px 0;
    border-bottom: 1px solid rgba(18, 17, 23, .12);
  }

  /* Les groupes : intitulé en mono, comme les labels de section du site.
     Le dernier lien d'un groupe n'a pas de filet — le blanc suffit à séparer. */

  .nav-mob_groupe .navigation-menu-links {
    display: block;
  }

  .nav-mob_groupe + .nav-mob_groupe {
    margin-top: 28px;
  }

  .nav-mob_titre {
    margin: 0 0 4px;
    opacity: .45;
  }

  .nav-mob_groupe .navigation-menu-links:last-child {
    border-bottom: 0;
  }

  /* Pied de menu : le secondaire, sur une ligne, en retrait. */
  .nav-mob_groupe--pied {
    display: flex;
    flex-wrap: wrap;
    gap: 0 20px;
    margin-top: 32px;
    padding-top: 20px;
    border-top: 1px solid rgba(18, 17, 23, .12);
  }

  .nav-mob_groupe--pied .navigation-menu-links {
    font-size: 15px;
    padding: 6px 0;
    border-bottom: 0;
    opacity: .6;
  }
}

/* Menu ouvert : ses entrées défilent derrière le nom du site, qui n'a pas de
   fond. Le menu est un enfant de la barre en z-index -1 : le fond de la barre
   passe donc DERRIÈRE lui, le colorer ne sert à rien. On intercale un cache
   blanc en pseudo-élément (z-index 0, au-dessus des enfants négatifs) et on
   remonte le logo et le burger au-dessus (z-index 1). */
@media screen and (max-width: 767px) {
  .menu-ouvert .navigation-wrapper.cta-hero.padding::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: #fff;
    z-index: 0;
  }

  .menu-ouvert .navigation-wrapper.cta-hero.padding > *:not(.navigation-menu) {
    position: relative;
    z-index: 1;
  }

  /* Le cache ci-dessus ne couvre que la boîte de la barre. Tant que le menu
     comptait seize entrées, sa liste remplissait l'écran et personne ne voyait
     le fond. Depuis qu'il n'en a plus que cinq, le hero transparaissait sous
     les liens à partir du deuxième tiers de l'écran. Le menu porte donc son
     propre fond, sur toute la hauteur visible. */
  .menu-ouvert .navigation-menu {
    background-color: #fff;
    min-height: 100vh;
  }
}

/* ---------------------------------------------------------------------------
   10. Le menu mobile groupé débordait à l'horizontale au-dessus de 767px.
   Webflow garde ce menu dans le flux à toutes les largeurs (il est simplement
   passé derrière la barre, en z-index -1). À plat, ses seize liens étaient des
   éléments de la rangée flex et revenaient à la ligne. Groupés, chaque groupe
   est un seul élément large comme la somme de ses liens en VCNudge 50px : la
   page faisait 6206px de large à 1440, avec les liens du menu peints par-dessus
   le haut de page. Les groupes prennent toute la largeur, à toutes les tailles.

   `flex: 0 0 100%` visait cette largeur, mais .navigation-menu est une colonne :
   dans une colonne, flex-basis est la HAUTEUR. Chaque groupe prenait donc toute
   la hauteur du menu (620px à 390x844) quel que soit son nombre de liens, et le
   menu ouvert montrait une entrée par écran, séparées par du blanc. La largeur
   se demande avec `width`, et `flex:none` laisse la hauteur suivre le contenu.
   --------------------------------------------------------------------------- */
.nav-mob_groupe {
  flex: none;
  width: 100%;
  min-width: 0;
}

/* ---------------------------------------------------------------------------
   11. Titres de section de /tarifs. Ils portent leur taille en style en ligne
   (40px, posée pour que les titres de section internes tiennent le rang du
   titre de page sans passer en VCNudge). À 390px, « l'accompagnement » mesure
   plus que la colonne : la règle 2 le coupait en plein milieu, « accompagnemen
   / t ». On redescend le titre à 30/38, la coupure ne se déclenche plus.
   --------------------------------------------------------------------------- */
@media screen and (max-width: 767px) {
  h2[style*="font-size:40px"] {
    font-size: 30px !important;
    line-height: 38px !important;
  }
}

/* ---------------------------------------------------------------------------
   12. La barre CTA fixe du bas recouvrait la dernière ligne du pied de page
   (« Fait avec amour par Marjolaine Grondin ») sur toutes les pages qui la
   portent. Le pied de page se dégage de sa hauteur, safe-area comprise.
   --------------------------------------------------------------------------- */
@media screen and (max-width: 767px) {
  footer.footer_wrapper {
    padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px));
  }
}