/* ============================================================
   home-fr.css — sections FR-spécifiques de lancemonshop.com.
   Chargé APRÈS home.css. N'ajoute QUE les 3 sections demandées
   (Calculateur · Guides · À-propos). Aucune nouvelle couleur :
   tout réutilise les tokens --home-* / --color-brand de la base.
   Aucun nouveau pattern de bouton : les CTA reprennent .tool-card__open
   (lien teal + flèche), la carte reprend .tool-card (surface/rayon/ombre).
   Insertion : after host-note → Calculateur → Guides → À-propos → notify.
   ============================================================ */

/* ============================================================
   @font-face — DÉMÉNAGÉ vers /css/lms-chrome.css au chantier
   d'alignement chrome contenu FR. Source unique des polices
   auto-hébergées (Schibsted Grotesk + JetBrains Mono via
   /assets/fonts/*.woff2). home-fr.css ne détient plus les
   déclarations ; il continue d'être chargé sur la home FR pour
   les sections FR spécifiques (Calculateur, Guides, À-propos).
   lms-chrome.css est chargé en amont, donc les polices sont
   disponibles ici par cascade.
   ============================================================ */

/* En-têtes de section partagés (même métrique que .how__head h2) */
.fr-sec { padding: 5.5rem 0 0; }
.fr-head { margin-bottom: 1.9rem; max-width: 60ch; }
.fr-head h2 {
  font-size: clamp(1.75rem, 3.4vw, 2.4rem);
  letter-spacing: -0.025em;
  font-weight: 700;
  margin: 0;
}
.fr-head p { color: var(--home-muted); margin: .65rem 0 0; max-width: 52ch; }

/* CTA lien — clone strict de .tool-card__open */
.fr-open {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-weight: 600;
  font-size: .95rem;
  color: var(--color-brand);
  text-decoration: none;
  transition: gap .15s;
}
.fr-open svg { transition: transform .15s; }
.fr-open:hover { gap: .85rem; }

/* ===== Nav FR — repli progressif (libellés FR plus longs qu'en EN) =====
   Ordre de DISPARITION quand la largeur diminue :
     1) la pill « Gratuit · sans inscription »   → masquée  ≤ 1024px
     2) « Comment ça marche »                     → masquée  ≤ 760px
     3) les 3 liens outils (en DERNIER)           → masqués  ≤ 620px
   Le wordmark « Lance Mon Shop » reste visible à TOUTES les largeurs.
   Seuils calculés sur la largeur réelle des libellés FR (brand 186 ·
   Redimensionner 117 / Mockup 58 / Créateur de PDF 110 · how 70 ·
   pill 228 · gap 30). On ré-affiche d'abord --tool et --how pour
   neutraliser les seuils EN de home.css (760 / 540), puis on applique
   l'ordre FR ci-dessus. ===== */
.home-nav__link--tool,
.home-nav__link--how { display: inline-flex; }

@media (max-width: 1024px) { .home-nav__pill { display: none; } }
@media (max-width: 760px)  { .home-nav__link--how { display: none; } }
@media (max-width: 620px)  { .home-nav__link--tool { display: none; } }

/* ===== 1 · Calculateur — 2 cartes (frais + ROAS) =====
   Grille 2 colonnes desktop ; 1 colonne sous 920 px. Ajustée au
   chantier folding É1 (ajout 2e carte ROAS). Les cartes individuelles
   restent en layout horizontal interne (viz + body). */
.calc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}
@media (max-width: 920px) {
  .calc-grid { grid-template-columns: 1fr; }
}

.calc-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.9rem;
  align-items: center;
  text-decoration: none;
  color: inherit;
  background: var(--home-surface);
  border: 1px solid var(--home-line);
  border-radius: 22px;
  box-shadow: 0 2px 4px rgba(29, 27, 22, 0.04), 0 16px 36px -20px rgba(29, 27, 22, 0.22);
  padding: 1.75rem 2rem;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.calc-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 2px 6px rgba(29, 27, 22, 0.05), 0 30px 60px -28px rgba(29, 27, 22, 0.3);
  border-color: var(--home-line-strong);
}
/* viz « ticket » — même langage que les viz-* (fond crème + mono) */
.calc-card__viz {
  width: 158px;
  flex: none;
  background:
    repeating-linear-gradient(45deg, transparent 0 13px, rgba(29, 27, 22, 0.022) 13px 14px),
    linear-gradient(180deg, #f6f1e7, #efe9dc);
  border: 1px solid var(--home-line);
  border-radius: 14px;
  padding: 1rem 1.05rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.calc-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: .68rem;
  color: var(--home-muted);
  font-variant-numeric: tabular-nums;
}
.calc-row span:last-child { color: var(--home-ink-soft); }
.calc-row--total {
  border-top: 1px solid var(--home-line-strong);
  padding-top: .5rem;
  margin-top: .1rem;
  font-weight: 700;
}
.calc-row--total span { color: var(--color-brand) !important; }
.calc-card__body { display: flex; flex-direction: column; gap: .4rem; }
.calc-card__body h3 {
  font-size: 1.5rem;
  letter-spacing: -0.02em;
  font-weight: 700;
  margin: 0;
}
.calc-card__body p {
  color: var(--home-muted);
  font-size: 1.05rem;
  line-height: 1.5;
  margin: 0;
  max-width: 46ch;
}
.calc-card__body .fr-open { margin-top: .55rem; }

@media (max-width: 620px) {
  .calc-card { grid-template-columns: 1fr; gap: 1.3rem; padding: 1.5rem 1.4rem; }
  .calc-card__viz { width: 100%; }
  .calc-row { font-size: .72rem; }
}

/* ===== 2 · Guides — cartes d'articles (shell = .tool-card) =====
   Grille passée à 4 cartes au chantier intégration Guide N°2 (tailles
   d'affiches) — 4e carte = guide technique formats. Breakpoint
   intermédiaire 1024px → 3 colonnes (cohérence pill nav qui passe en
   off au même seuil). 860px → 2 colonnes, 560px → 1 colonne. Pour
   une éventuelle 5e carte, repasser à repeat(5, 1fr) et ajuster le
   palier 1024px à 1fr 1fr (les paliers du bas restent valides). */
.guides__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.2rem;
}
.guide-card {
  background: var(--home-surface);
  border: 1px solid var(--home-line);
  border-radius: 22px;
  box-shadow: 0 2px 4px rgba(29, 27, 22, 0.04), 0 16px 36px -20px rgba(29, 27, 22, 0.22);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.guide-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 2px 6px rgba(29, 27, 22, 0.05), 0 30px 60px -28px rgba(29, 27, 22, 0.3);
  border-color: var(--home-line-strong);
}
.guide-card__thumb {
  aspect-ratio: 16 / 10;
  border-bottom: 1px solid var(--home-line);
  background: none;
  overflow: hidden;
}
.guide-card__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .3s cubic-bezier(.2,.7,.3,1);
}
.guide-card:hover .guide-card__thumb img { transform: scale(1.03); }
.guide-card__body {
  padding: 1.4rem 1.5rem 1.55rem;
  display: flex;
  flex-direction: column;
  gap: .55rem;
  flex: 1;
}
.guide-card__cat {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-brand);
}
.guide-card__title {
  font-size: 1.18rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.32;
  margin: 0;
  text-wrap: pretty;
}
.guide-card .fr-open { margin-top: auto; padding-top: .4rem; font-size: .9rem; }

/* « Voir tous les guides → » : passerelle vers /blog/ exhaustif sous la
   grille des 4 cartes. Hérite tout le visuel de .fr-open (couleur,
   poids, flèche, hover gap) ; n'ajoute qu'un espace au-dessus pour la
   séparer de la grille. Aligné gauche par flux naturel (inline-flex
   dans .home-wrap en block). */
.guides__see-all { margin-top: 1.5rem; }

@media (max-width: 1024px) {
  .guides__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 860px) {
  .guides__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .guides__grid { grid-template-columns: 1fr; }
}

/* ===== 3 · À-propos — bande douce brand-tint, SANS portrait (texte + lien) ===== */
.about-card {
  background: var(--home-brand-tint);
  border: 1px solid var(--home-brand-tint-2);
  border-radius: 22px;
  padding: 2.6rem 2.85rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
}
.about-card .home-eyebrow { margin: 0; }
.about-card__text {
  font-size: 1.35rem;
  line-height: 1.5;
  color: var(--home-ink);
  margin: 0;
  max-width: 60ch;
  letter-spacing: -0.005em;
  text-wrap: pretty;
}
.about-card__text b { font-weight: 700; }
.about-card .fr-open { margin-top: .35rem; }

@media (max-width: 620px) {
  .about-card { padding: 2rem 1.6rem; gap: .85rem; }
  .about-card__text { font-size: 1.15rem; }
}