/* Réglages partagés par toutes les pages du site, chargés après webflow.css.

   Le plan de site du footer est passé de 8 à 13 entrées : sur une seule ligne il
   se repliait n'importe où, y compris au milieu d'un libellé (« Cas / clients »).
   Même règle que celle de pages-maquettes.css, mais appliquée à toutes les pages
   et pas seulement à celles portées depuis les maquettes. */

.footer_bottom-row > div:not(.text-mono):not(.text-align-right) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  row-gap: 6px;
}

.footer_links { white-space: nowrap; }


/* Bande « Ressources gratuites » (2 lead magnets), reprise sur la home et juste
   au-dessus du footer des pages secondaires. Deux cartes pastel côte à côte, le
   visuel incliné déborde en bas de la carte. Conteneur .container-xl, le même que
   le footer, pour que les bords s'alignent. Le footer est déjà noir : la bande s'y
   fond et forme le haut de la zone de pied de page. */
.lm_head{margin-bottom:32px}
.lm_head .text-mono{opacity:.6}
.lm_head-title{margin:12px 0 0}
.lm_grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:stretch}
.lm_card{position:relative;display:flex;flex-direction:column;padding:32px 36px 0;border-radius:18px;overflow:hidden;color:#121117}
.lm_card.is-kit{background:linear-gradient(160deg,#eae7fb,#ffe8e0)}
.lm_card.is-mc{background:linear-gradient(160deg,#ffe8c8,#ffeadf)}
.lm_badge{position:absolute;top:22px;right:24px;background-color:#121117;color:#f8f9ec;border-radius:999px;padding:8px 14px;font-family:Abcfavoritmono Book,Arial,sans-serif;font-size:11px;letter-spacing:.4px;line-height:16px;text-transform:uppercase}
.lm_title{letter-spacing:.5px;margin:0 0 10px;max-width:15ch;font-family:Vcnudge,Arial,sans-serif;font-size:30px;font-weight:600;line-height:36px}
.lm_text{margin:0 0 22px;max-width:40ch;color:#121117cc}
.lm_cta{display:inline-block;align-self:flex-start;background-color:#121117;color:#f8f9ec;border:1px solid #121117;border-radius:4px;padding:14px 20px;line-height:1em;letter-spacing:-.2px;white-space:nowrap;text-decoration:none;transition:background-color .2s,color .2s}
.lm_cta:hover{background-color:#0000;color:#121117}
.lm_shot{display:block;width:78%;height:auto;aspect-ratio:16/9;object-fit:cover;margin:22px 0 -78px;border-radius:10px;border:1px solid #1211171f;box-shadow:0 20px 40px #1211172e;transform:rotate(-1.6deg)}
.lm_card.is-mc .lm_shot{transform:rotate(1.6deg)}
.section_email-capture.is-prefooter{padding-top:80px;padding-bottom:30px;border-top:1px solid #f8f9ec1f}

@media screen and (max-width:991px){
.lm_card{padding:28px 28px 0}
.lm_title{font-size:26px;line-height:32px}
.lm_shot{width:84%;margin-bottom:-66px}
}
@media screen and (max-width:767px){
.lm_head{margin-bottom:26px}
.lm_grid{grid-template-columns:1fr;gap:24px}
.lm_card{padding:26px 24px 0}
.lm_badge{position:static;align-self:flex-start;margin-bottom:16px}
.lm_title{max-width:none}
.lm_text{max-width:none}
.lm_cta{align-self:stretch;text-align:center;white-space:normal}
.lm_shot{width:92%;margin-bottom:-52px}
.section_email-capture.is-prefooter{padding-top:56px;padding-bottom:20px}
}


/* Pages internes construites à la main (/tarifs, /financement, /programme).
   Leurs grilles à deux colonnes sont posées en style inline, comme les maquettes :
   sans règle dédiée elles restent côte à côte en mobile et débordent de l'écran.
   Ici on les replie sur une colonne sous 992px et on resserre les écarts. Aucune
   taille ni couleur du desktop n'est touchée. */

@media screen and (max-width:991px){
  .page-premium [style*="grid-template-columns"]{grid-template-columns:1fr!important}
  .page-premium [style*="gap:80px"]{gap:34px!important}
  .page-premium [style*="gap:30px"]{gap:24px!important}
  /* Les cales qui alignent prix et listes d'une carte à l'autre en desktop
     n'ont plus d'objet une fois les cartes empilées : elles ne laisseraient
     qu'un trou sous le sous-titre. */
  .page-premium .pricing_content-wrapper [style*="min-height"]{min-height:0!important}
  /* Une carte de tarif seule sur toute la largeur d'une tablette étire la
     ligne de texte et vide la colonne : la pile reste dans une mesure lisible. */
  .page-premium .pricing_grid{max-width:560px;margin-left:auto;margin-right:auto}
}

@media screen and (max-width:767px){
  .page-premium .pricing_content-wrapper{padding:28px 24px 32px!important}
  .page-premium .cta-inscription{display:block;text-align:center;white-space:normal}

  /* Tableau comparatif : sur un téléphone, deux colonnes côte à côte imposent un
     défilement horizontal, et on ne voit jamais que la moitié de la comparaison
     — soit exactement ce qu'on est venu chercher. Chaque ligne devient donc un
     bloc : le critère en tête, puis les deux réponses, chacune sous le nom de sa
     formule (repris de l'attribut data-col, l'en-tête étant masqué). */
  .page-premium .compare_scroll{overflow-x:visible}
  .page-premium .compare_table{min-width:0!important}
  .page-premium .compare_table thead{display:none}
  .page-premium .compare_table,
  .page-premium .compare_table tbody,
  .page-premium .compare_table tr,
  .page-premium .compare_table th,
  .page-premium .compare_table td{display:block;width:auto!important}
  .page-premium .compare_table tr{border-top:1px solid rgba(18,17,23,.14);padding:18px 0}
  .page-premium .compare_table th[scope="row"]{padding:0!important;border:0!important;
    font-size:18px!important;line-height:24px!important;opacity:1!important;font-weight:600!important}
  .page-premium .compare_table td{padding:10px 0 0!important;border:0!important;opacity:1!important}
  .page-premium .compare_table td::before{content:attr(data-col);display:block;margin-bottom:2px;
    font-family:"Abcfavoritmono Book",Arial,sans-serif;font-size:11px;line-height:16px;
    letter-spacing:.4px;text-transform:uppercase;opacity:.45}
  .page-premium .compare_table td[data-col="À son rythme"]{opacity:.6!important}
}

/* Rythme vertical : deux sections qui s'enchaînent sur le même fond pastel n'ont
   pas de frontière visible, et 100 + 100 px d'écart creusent un trou. L'écart
   plein est gardé quand le fond change (pastel ↔ bande noire), là où la
   respiration se voit. Même règle que pages-maquettes.css. */

.page-premium .section_hero + .section_for,
.page-premium .section_for + .section_for,
.page-premium .section_for + .section_faq,
.page-premium .section_hero + .section_faq{padding-top:24px}

@media screen and (max-width:767px){
  .page-premium .compare_card{padding:26px 22px!important}
  /* Le titre de page est calé pour une mesure desktop ; à 390px il mange
     la moitié de l'écran avant qu'on ait vu un prix. */
  .page-premium .section_hero h1{font-size:44px!important;line-height:50px!important}
}

/* ============================================================================
   Hero des pages formules (/produit/*) — variante « une semaine type ».
   Posé par _mockups/port_produit.py à la place du hero de la LP d'origine.
   Portée stricte : rien en dehors de .hero-formule n'est touché.
   ========================================================================= */
.hero-formule{padding-top:170px;padding-bottom:110px}
.hero-formule .hf_row{display:grid;grid-template-columns:1fr 1.06fr;gap:56px;align-items:center}
.hero-formule .hf_kicker{margin-top:18px}
.hero-formule h1{font-size:76px;line-height:80px;margin:10px 0 0;text-wrap:balance}
.hero-formule .hf_chapo{font-size:20px;line-height:30px;margin:20px 0 0;max-width:600px}

/* La semaine type : un libellé mono à gauche, ce qui se passe à droite. */
.hero-formule .hf_semaine{margin-top:34px;border-top:1px solid rgba(18,17,23,.12)}
.hero-formule .hf_l{display:grid;grid-template-columns:26px 1fr;gap:18px;align-items:start;
  padding:16px 0;border-bottom:1px solid rgba(18,17,23,.12)}
.hero-formule .hf_ico{display:block;width:26px;height:26px;color:var(--noir,#121117)}
.hero-formule .hf_ico svg{width:100%;height:100%;display:block}
.hero-formule .hf_l > strong{font-size:17px;line-height:26px;font-weight:500}

.hero-formule .hf_cta{margin-top:34px;display:flex;flex-wrap:wrap;gap:12px;align-items:center}

/* Emplacement réservé à l'illustration, tant qu'elle n'est pas arbitrée. */
.hero-formule .hf_media{position:relative;aspect-ratio:1/1;border-radius:24px;
  background:rgba(18,17,23,.03);border:1px dashed rgba(18,17,23,.22);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  color:rgba(18,17,23,.45);text-align:center;padding:24px}
.hero-formule .hf_media svg{width:44px;height:44px;opacity:.5}
.hero-formule .hf_media b{font-family:ABCFavoritMono,'Roboto Mono',monospace;font-size:11px;
  letter-spacing:.07em;text-transform:uppercase;font-weight:400}
.hero-formule .hf_media i{font-style:normal;font-size:14px;line-height:20px;max-width:260px}

/* Le visuel du hero : pas de cadre, pas de fond. Juste l'image. */
.hero-formule .hf_visuel{position:relative}
.hero-formule .hf_visuel > img,
.hero-formule .hf_visuel .hero_main-img{width:100%;height:auto;display:block}

@media (max-width:991px){
  .hero-formule{padding-top:120px;padding-bottom:64px}
  .hero-formule .hf_row{grid-template-columns:1fr;gap:36px}
  .hero-formule h1{font-size:56px;line-height:60px}
  .hero-formule .hf_chapo{font-size:18px;line-height:27px}
  .hero-formule .hf_media{aspect-ratio:4/3}
}
@media (max-width:479px){
  .hero-formule h1{font-size:44px;line-height:50px}
  .hero-formule .hf_l{gap:14px}
}