/**
 * Finances d'ici — Expérience mobile simplifiée
 * =============================================
 * Sur cellulaire (768px et moins), on ne garde que l'essentiel, en version
 * courte : hero, plus-value, profils + étapes (conseils par situation),
 * calculateurs, contact, articles du moment. Les sections lourdes (bio,
 * produits, stratégie fiscale, blogue complet) restent sur ordinateur —
 * et restent lisibles par les moteurs de recherche.
 *
 * Le style est aussi allégé : moins d'effets, moins de stock visuel.
 */

@media (max-width: 768px) {

  /* ---- Sections lourdes : cachées sur mobile ---- */
  #biographie,
  #produits,
  #strategie-fiscale,
  #blog {
    display: none;
  }

  /* ---- Hero : un message, un bouton ---- */
  canvas.pr-flow {
    display: none; /* pas d'animation lourde sur mobile */
  }
  .pr-hero {
    min-height: 0;
    padding-top: calc(var(--space-8) + 56px);
    padding-bottom: var(--space-8);
  }
  .pr-hero-inner { padding: 1.8rem 0 2rem; }
  .pr-title {
    font-size: clamp(2rem, 9vw, 2.6rem);
  }
  .pr-lede,
  #pr-stats {
    display: none;
  }
  .pr-preuve {
    font-size: var(--font-size-sm);
    margin-top: var(--space-4);
  }
  .pr-cta {
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
  }
  .pr-cta .pr-btn {
    width: auto;
    max-width: 100%;
    justify-content: center;
    text-align: center;
    padding: .8rem 1.6rem;
    font-size: .95rem;
  }

  /* ---- Calculateurs : liste simple, pas de cartes lourdes ---- */
  .pr-filtres {
    overflow-x: visible;
    flex-wrap: wrap;
    gap: .5rem;
    padding-bottom: var(--space-2);
  }
  .pr-filtres .pr-chip {
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    text-align: center;
    font-size: .8rem;
    padding: .55rem .7rem;
  }
  .pr-tool {
    box-shadow: none;
    border: 1px solid var(--color-border, #e2e8f0);
  }
  .pr-tool p {
    display: none; /* la description reste sur ordinateur */
  }
  .pr-tool h3 {
    font-size: 1.05rem;
  }

  /* ---- Allègement visuel général ---- */
  .section {
    padding-top: var(--space-8);
    padding-bottom: var(--space-8);
  }
  .card, .fiscal-card, .bl-carte {
    box-shadow: none;
  }

  /* ---- Pages calculateurs : chiffres et boutons nets ---- */
  .h2o-hero-val {
    font-size: clamp(2rem, 10vw, 2.8rem);
  }
  .h2o-actions .btn {
    width: 100%;
    justify-content: center;
  }
  .h2o-actions {
    flex-direction: column;
    align-items: stretch;
  }
}

/* --- Lecture : plus petite typo = moins de scroll --- */
@media (max-width: 768px) {
  html { font-size: 15px; }
  .section-title { font-size: 1.65rem; }
  .section-description { font-size: .95rem; }

  /* --- Calculateurs : 1 colonne propre, compacte, aucun scroll horizontal --- */
  .h2o-fields {
    grid-template-columns: 1fr;
    gap: .9rem;
  }
  .h2o-field { gap: .3rem; min-width: 0; }
  .h2o-field label { font-size: .85rem; line-height: 1.35; }
  .h2o-field label em { font-size: .78rem; }
  .h2o-field input,
  .h2o-field select {
    min-width: 0;
    width: 100%;
    max-width: 100%;
    padding: .6rem .65rem;
    font-size: 16px; /* pas de zoom auto sur iOS */
  }
  .h2o-form, .h2o-fields, .h2o-field { overflow-x: clip; }
  .hero-title { font-size: clamp(1.7rem, 8vw, 2.2rem); }
  .h2o-hero { padding-top: 1.2rem; padding-bottom: 1.2rem; }
  .h2o-avert { font-size: .8rem; }

  /* --- Sur mobile, la pilule « Texter Julien » remplace la barre du bas --- */
  .en-bar { display: none; }
}

/* --- Photos plus petites sur mobile --- */
@media (max-width: 768px) {
  .pr-tool-img img { height: 96px; }
  .bl-carte-bande { height: 92px; }
}

/* --- Blogue : 2 cartes par rangée pour balayer vite --- */
@media (max-width: 768px) {
  .bl-grille {
    grid-template-columns: repeat(2, 1fr);
    gap: .8rem;
  }
  .bl-carte.est-vedette { grid-column: 1 / -1; }
  .bl-carte-bande { height: 84px; }
  .bl-carte-corps { padding: .85rem; gap: .5rem; }
  .bl-carte h3 { font-size: .92rem; line-height: 1.3; }
  .bl-carte-sous { display: none; }
  .bl-carte-meta { font-size: .68rem; }
  .bl-carte-pied { font-size: .8rem; }
}

/* --- Calculateurs : 2 cartes par rangée pour s'y retrouver vite --- */
@media (max-width: 768px) {
  .pr-tools {
    grid-template-columns: repeat(2, 1fr);
    gap: .8rem;
  }
  .pr-tool { padding: 1rem .9rem .9rem; gap: .55rem; }
  .pr-tool-img { margin: -1rem -.9rem 0; }
  .pr-tool-img img { height: 84px; }
  .pr-tool h3 { font-size: .92rem; line-height: 1.3; }
  .pr-tool p { display: none; }
  .pr-tool .pr-tool-go { font-size: .8rem; }
}

/* --- Première section courte : la carte « Saison 2027 » reste sur ordinateur --- */
.fdi-plusvalue { display: none; }
@media (max-width: 768px) {
  .pr-impot { display: none; }

  /* --- Notre plus-value, juste après le hero --- */
  .fdi-plusvalue {
    display: block;
    background: #fff;
    padding: 1.6rem 0 1.4rem;
    border-bottom: 1px solid var(--color-border, #e2e8f0);
  }
  .fdi-plusvalue-kicker {
    font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
    color: #8a6a2c; margin: 0 0 .9rem;
  }
  .fdi-plusvalue ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; }
  .fdi-plusvalue li { position: relative; padding-left: 1.1rem; }
  .fdi-plusvalue li::before {
    content: ""; position: absolute; left: 0; top: .35rem; bottom: .35rem;
    width: 3px; border-radius: 2px; background: #dcbb72;
  }
  .fdi-plusvalue li p { margin: 0; font-size: .92rem; line-height: 1.5; color: #334155; }
  .fdi-plusvalue li b { color: #0f2a2e; }
}

/* --- Calculateurs : 4 par défaut + « Afficher plus » --- */
@media (max-width: 768px) {
  .pr-plus {
    grid-column: 1 / -1;
    justify-self: center;
    appearance: none; cursor: pointer; font: inherit;
    font-size: .9rem; font-weight: 600;
    padding: .7rem 1.4rem;
    border-radius: 999px;
    border: 1.5px solid var(--color-primary-500, #2f6f74);
    background: transparent;
    color: var(--color-primary-700, #1f4a50);
    margin-top: .2rem;
  }
  .pr-plus span { font-weight: 400; opacity: .75; }
  .pr-plus:active { transform: scale(.97); }
}

/* --- Contact : version courte sur mobile --- */
@media (max-width: 768px) {
  #contact { padding-top: 1.2rem; padding-bottom: 1.4rem; }
  #contact .section-description { display: none; }
  #contact .section-header { margin-bottom: .9rem; }
  #contact .section-title { font-size: 1.35rem; margin-bottom: 0; }
  #contact .fdi-legit { display: none; }
  #contact .contact-inner { margin-top: 0; gap: .6rem; }
  #contact .contact-info { padding-bottom: .4rem; }
  /* Carte contact centrée : le nom, un bouton qui déplie les 2 options. */
  #contact .fdi-contact-desc,
  #contact .fdi-contact-meta { display: none; }
  #contact .fdi-contact-carte {
    background: #fff;
    border: 1px solid var(--color-neutral-200);
    border-radius: 1.2rem;
    box-shadow: var(--shadow-sm);
    padding: 1.1rem 1rem;
    text-align: center;
  }
  #contact .fdi-contact-nom {
    font-family: var(--font-serif);
    font-size: 1.35rem;
    color: var(--color-primary-900);
    margin: 0 0 .8rem;
  }
  #contact .fdi-contact-cta {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: var(--color-primary-700);
    color: #fff;
    border: none;
    border-radius: 999px;
    padding: .75rem 1.4rem;
    font-weight: var(--font-weight-semibold);
    font-size: .95rem;
    cursor: pointer;
  }
  #contact .fdi-contact-chevron {
    font-size: 1.25rem;
    line-height: 1;
    transition: transform .2s ease;
  }
  #contact .fdi-contact-options { display: none; }
  #contact .fdi-contact-carte.ouvert .fdi-contact-options {
    display: grid;
    gap: .6rem;
    margin-top: 1rem;
    text-align: left;
  }
  #contact .fdi-contact-carte.ouvert .fdi-contact-chevron { transform: rotate(90deg); }
  #contact .fdi-contact-option {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    background: var(--color-neutral-50);
    border: 1px solid var(--color-neutral-200);
    border-radius: .9rem;
    padding: .8rem .95rem;
    text-decoration: none;
  }
  #contact .fdi-contact-option b {
    display: block;
    color: var(--color-primary-900);
    font-size: .95rem;
  }
  #contact .fdi-contact-option span {
    color: var(--color-primary-600);
    font-size: .9rem;
    overflow-wrap: anywhere;
  }
  #contact .contact-form { padding: 1.1rem .95rem; gap: .7rem; }
  #contact .contact-form .form-group { margin-bottom: 0; }
  #contact .form-group label { margin-bottom: .3rem; font-size: .82rem; }
  #contact .form-group input,
  #contact .form-group select,
  #contact .form-group textarea { padding: .6rem .8rem; font-size: .92rem; }
  #contact .form-group textarea { min-height: 5.5rem; }
  #contact .contact-form .btn { padding: .8rem 1rem; }
  #contact .contact-form > p:last-child { display: none; }
}

/* --- Articles du moment : mobile seulement, après le contact --- */
.fdi-articles-moment { display: none; }
@media (max-width: 768px) {
  .fdi-articles-moment {
    display: block;
    padding: 1.4rem 0 1.8rem;
    background: var(--color-neutral-100, #f5f3ec);
  }
  .fdi-articles-moment .section-title { font-size: 1.35rem; margin-bottom: 1rem; }
  .fdi-articles-cta { text-align: center; margin: 1.2rem 0 0; }
  .fdi-articles-cta a {
    font-weight: 600; font-size: .95rem;
    color: var(--color-primary-700, #1f4a50); text-decoration: none;
  }
}

/* ============================================================
   Profils + Étapes — version courte sur mobile.
   En haut : « qui êtes-vous » (4 choix). En dessous : les 6 étapes
   en cartes compactes, en accordéon. Choisir un profil met en
   évidence les étapes prioritaires (pr-hot) et estompe les autres.
   ============================================================ */
@media (max-width: 768px) {

  #profils { padding-top: 1.4rem; padding-bottom: 1.2rem; }
  #profils .section-header { margin-bottom: .8rem; }
  /* Même accroche que les sections claires : pas de boîte sur fond sombre. */
  #profils .section-eyebrow {
    display: block;
    background: none;
    border: none;
    padding: 0 0 .7rem;
    margin-bottom: .8rem;
  }
  #profils .section-title { font-size: 1.35rem; margin-bottom: 0; }
  #profils .section-description { display: none; }
  .pr-profils {
    grid-template-columns: 1fr 1fr;
    gap: .5rem;
    margin-top: .9rem;
  }
  .pr-profil {
    padding: .6rem .5rem;
    gap: .2rem;
    align-items: center;
    text-align: center;
  }
  .pr-profil .nm { font-size: .85rem; }
  .pr-profil .ds { display: none; }
  .pr-profil-out { margin-top: 1.1rem; padding: 1.1rem 1rem; }
  .pr-profil-out:empty { display: none; }
  .pr-profil-out .angle { font-size: .92rem; }

  #etapes { padding-top: 1.2rem; padding-bottom: 1.4rem; }
  #etapes .section-header { margin-bottom: .8rem; }
  #etapes .section-eyebrow { margin-bottom: .35rem; }
  #etapes .section-title { font-size: 1.25rem; margin-bottom: 0; }
  #etapes .section-description { display: none; }
  .steps-grid {
    grid-template-columns: 1fr 1fr;
    gap: .5rem;
    margin-top: .9rem;
  }
  .step-card {
    padding: .6rem .6rem;
    gap: .15rem;
    border-top-width: 2px;
  }
  .step-card .step-motif { display: none; }
  .step-card .step-number { font-size: .64rem; }
  .step-card .step-name { font-size: .95rem; }
  .step-card .step-promesse,
  .step-card .step-arrow { display: none; }
  /* Le panneau accordéon prend toute la largeur sous la carte tapée,
     avec l'esthétique du site : carte blanche, 2 colonnes, texte ajusté. */
  .steps-grid .etape-detail {
    grid-column: 1 / -1;
    background: #fff;
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: 1rem;
    box-shadow: var(--shadow-sm);
    padding: 1.2rem 1rem 1.1rem;
  }
  .etape-detail .container,
  .etape-detail .container-narrow { padding: 0; max-width: none; }
  .etape-detail h3 { font-size: 1.2rem; margin-bottom: .6rem; }
  .etape-detail > .container > .container-narrow > p:first-of-type { font-size: .9rem; }
  .etape-detail .fiscal-grid {
    grid-template-columns: 1fr 1fr;
    gap: 1rem 1.1rem;
    margin-top: 1rem;
  }
  .etape-detail .fiscal-card h3 {
    font-size: .7rem;
    margin-bottom: .4rem;
    padding-bottom: .4rem;
  }
  .etape-detail .fiscal-summary { font-size: .83rem; line-height: 1.45; margin-bottom: 0; }
  /* Sur mobile on montre peu : le résumé suffit, le long texte reste sur ordinateur. */
  .etape-detail .fiscal-card p:not(.fiscal-summary) { display: none; }
  .etape-detail .en-pont { margin: 1.1rem 0 0; padding: 1rem 1.1rem; gap: .8rem; }
  .etape-detail .en-pont-txt b { font-size: .9rem; }
  .etape-detail .en-pont-txt span { font-size: .82rem; }
}

/* ============================================================
   Page « Qui suis-je » — lisible sur mobile.
   Texte aligné à gauche (pas centré), hero raccourci, repères
   compacts. La mise en page est déjà en une colonne.
   ============================================================ */
@media (max-width: 768px) {
  .qsj-hero { padding-top: calc(var(--space-8) + 56px); }
  .qsj-hero h1 { font-size: clamp(1.7rem, 7.5vw, 2.1rem); max-width: none; }
  .qsj-hero .qsj-hero-txt p { display: none; }
  .qsj-portrait { max-width: 240px; }
  .biography-controls { margin-bottom: var(--space-5); gap: var(--space-2); }
  .biography-tab { padding: .6rem 1rem; font-size: .85rem; }
  .biography-long { text-align: left; font-size: .95rem; }
  .qsj-reperes { margin-top: var(--space-6); }
  .qsj-reperes dl > div { padding: .55rem 0; }
}

/* ============================================================
   Pied de page — version courte sur mobile.
   Listes de liens en 2 colonnes. L'avis de divulgation est
   replié : seul son nom est visible et cliquable.
   ============================================================ */
/* Base (tous écrans) : le bouton ressemble à un simple titre. */
.disclaimer-toggle {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: inherit;
  text-align: left;
}
.disclaimer-toggle .disclaimer-chevron { display: none; }

@media (max-width: 768px) {
  .footer-grid { gap: 1.2rem; margin-bottom: 1.4rem; }
  .footer-col h4 { margin-bottom: .5rem; }
  .footer-col ul {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .45rem 1rem;
  }
  .footer-col li a { font-size: .88rem; }

  .disclaimer-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .8rem;
    width: 100%;
    cursor: pointer;
  }
  .disclaimer-toggle strong { font-size: .85rem; }
  .disclaimer-toggle .disclaimer-chevron {
    display: inline;
    font-size: 1.3rem;
    line-height: 1;
    color: #dcbb72;
    transition: transform .2s ease;
  }
  .disclaimer-collapse .disclaimer-body { display: none; }
  .disclaimer-collapse.ouvert .disclaimer-body { display: block; margin-top: .7rem; }
  .disclaimer-collapse.ouvert .disclaimer-chevron { transform: rotate(90deg); }
}