/* ============================================================================
   REKOV — mobile.css
   ----------------------------------------------------------------------------
   Couche mobile uniquement. Chargée en dernier ; TOUTES les règles vivent
   dans des requêtes max-width : au-dessus de 860 px, ce fichier n'a aucun
   effet et la version ordinateur validée reste strictement identique.
   ============================================================================ */

/* Bouton injecté par js/mobile.js dans le titre de chaque poste (02).
   Hors mobile, il est transparent : même rendu que le titre d'origine. */
.on__acc {
  font: inherit; color: inherit; letter-spacing: inherit; text-align: inherit;
  background: none; border: 0; padding: 0; margin: 0; cursor: inherit;
}
.on__ic { display: none; }

/* ---- ≤ 900 px : 02 · les cinq postes en encarts dépliables ---- */
@media (max-width: 900px) {
  .on__pane {
    padding: 0; margin: 0;
    border-bottom: 1px solid var(--rule);
  }
  .on__pane:last-child { border-bottom: 1px solid var(--rule); }
  .on__k { margin: 0; padding-top: 1.1rem; cursor: pointer; }
  .on__t { margin: 0; font-size: 1.125rem; }
  .on__acc {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    width: 100%; min-height: 44px; cursor: pointer;
    padding: 0.35rem 0 1.05rem; text-align: left;
  }
  .on__ic {
    display: block; flex: none; position: relative;
    width: 2rem; height: 2rem;
    border: 1px solid var(--rule);
    transition: border-color var(--t-med) var(--ease), background-color var(--t-med) var(--ease);
  }
  .on__ic::before, .on__ic::after {
    content: ""; position: absolute; left: 50%; top: 50%;
    width: 11px; height: 1.5px; margin: -0.75px 0 0 -5.5px;
    background: var(--accent);
    transition: transform 0.35s var(--ease);
  }
  .on__ic::after { transform: rotate(90deg); }
  .on__pane.is-open .on__ic { border-color: var(--accent); }
  .on__pane.is-open .on__ic::after { transform: rotate(0deg); }
  .on__acc:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

  .on__body {
    display: grid; grid-template-rows: 0fr;
    transition: grid-template-rows 0.4s var(--ease);
  }
  .on__body-in { overflow: hidden; min-height: 0; }
  .on__pane.is-open .on__body { grid-template-rows: 1fr; }
  .on__body-in > :last-child { margin-bottom: 1.3rem; }
  .on__pane:not(.is-open) .on__body-in { visibility: hidden; transition: visibility 0s 0.4s; }
}

/* ---- ≤ 860 px : le header perd la phrase-réponse, le CTA se cale à droite ---- */
@media (max-width: 860px) {
  .header__in > .btn { margin-left: auto; }
  html { scroll-padding-top: 4.5rem; }
}

/* ---- ≤ 1080 px : simulateur en une colonne ----
   Le résultat remonte juste sous le budget : il réagit sous le pouce, sans
   défilement. Ordre : budget → fourchette → facteurs aggravants → CTA. */
@media (max-width: 1080px) {
  .sim__grid { display: flex; flex-direction: column; align-items: stretch; }
  .sim__grid > div { display: contents; }
  .sim-field, .sim-plate, .sim-checks, .sim-foot { min-width: 0; width: 100%; box-sizing: border-box; }
  .sim-input input { min-width: 0; width: 100%; }
  .sim-field { order: 1; }
  .sim-plate { order: 2; }
  .sim-checks { order: 3; margin-top: 0; }
  .sim-foot { order: 4; margin-top: 0; }
}

/* ---- ≤ 720 px ---- */
@media (max-width: 720px) {
  /* Tableau comparatif : chaque critère devient une fiche. L'intitulé en
     tête, puis les deux réponses empilées, chacune étiquetée — la réponse
     Rekov dans l'aplat encre de la colonne desktop. */
  .df-table { overflow: visible; }
  .df-table--key table { display: block; min-width: 0; width: 100%; table-layout: auto; }
  .df-table--key thead { display: none; }
  .df-table--key tbody { display: grid; gap: 1.6rem; }
  .df-table--key tbody tr { display: grid; gap: 0; }
  .df-table--key tbody tr:hover th,
  .df-table--key tbody tr:hover td:not(.is-us) { background: none; }
  .df-table--key tbody tr:hover td:not(.is-us) { background: var(--clair-2); }
  .df-table--key tbody tr:hover td.is-us { background: var(--ink); }
  .df-table--key tbody th,
  .df-table--key tbody tr:last-child th {
    display: block; width: auto;
    padding: 0.85rem 0 0.7rem !important;
    border: 0; border-top: 2px solid var(--ink);
    font-size: 1.0625rem; font-weight: 800; letter-spacing: -0.02em;
    line-height: 1.25; text-transform: none; color: var(--ink);
  }
  .df-table--key tbody td,
  .df-table--key tbody tr:last-child td {
    display: block;
    padding: 0.85rem 1rem 0.95rem !important;
    font-size: 0.9375rem; line-height: 1.5;
  }
  .df-table--key tbody td:not(.is-us),
  .df-table--key tbody tr:last-child td:not(.is-us) {
    border: 1px solid var(--rule); border-bottom: 0;
    color: var(--gris);
  }
  .df-table--key tbody td.is-us,
  .df-table--key tbody tr:last-child td.is-us { border: 1px solid var(--ink); }
  .df-table--key tbody td::before {
    display: block; margin-bottom: 0.4rem;
    font-family: var(--fm); font-size: 0.5625rem; font-weight: 400;
    letter-spacing: 0.14em; text-transform: uppercase;
  }
  .df-table--key tbody td:not(.is-us)::before { content: "Solutions existantes"; color: var(--gris); }
  .df-table--key tbody td.is-us::before { content: "Rekov"; color: #F0906B; }

  /* Critères du simulateur : trois cellules côte à côte, filets partagés.
     Lecture : case → facteur → qualificatif. Le facteur prime. */
  .sim-checks__row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
  .sim-checks__row .sim-check {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 0.45rem;
    align-content: start;
    padding: 0.8rem 0.6rem 0.9rem;
    min-height: 44px;
  }
  .sim-checks__row .sim-check + .sim-check { border-left: 0; }
  .sim-checks__row .sim-check:hover { border-color: var(--rule); }
  .sim-checks__row .sim-check__box { width: 13px; height: 13px; margin-bottom: 0.2rem; }
  .sim-checks__row .sim-check__box::after { inset: 2.5px; }
  .sim-checks__row .sim-check__t { font-size: 0.8125rem; line-height: 1.25; }
  .sim-check__s { line-height: 1.3; }

  /* Plancher et plafond côte à côte : la plaque noire raccourcit d'autant. */
  .sim-out__row { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 1rem; }
  .sim-out__cell--hi { text-align: right; }
  .sim-out__n { font-size: clamp(1.4rem, 7vw, 1.9rem); }
}

/* ---- ≤ 560 px : téléphone ---- */
@media (max-width: 560px) {
  /* Charnière 02 → 03 : la phrase occupe toute la largeur du bandeau. */
  .j2 .wrap { display: block; }
  .j2__t { max-width: none; font-size: 1.5rem; line-height: 1.2; }

  /* CTA à portée de pouce : pleine largeur, contenu centré. */
  .hero__cta .btn--primary,
  .sim-foot .btn--primary,
  .df-verdict .btn--primary { width: 100%; justify-content: center; }
  .hero__cta, .sim-foot { width: 100%; }

  /* Le CTA du formulaire tient sur une ligne dès 375 px. */
  .form__hd, .form__body, .form__foot { padding-left: 1rem; padding-right: 1rem; }
  .btn--full.btn--primary { padding-left: 0.9rem; padding-right: 0.9rem; font-size: 0.875rem; gap: 0.7rem; }

  /* iOS zoome sur tout champ < 16 px : on s'aligne à 16 px. */
  .form .field input { font-size: 1rem; }

  /* Micro-labels mono : plancher de lisibilité à 9 px sur écran de poche. */
  .sim-check__s, .on__ck, .form__recap__k,
  .esc__k, .on__k, .ct-next__k, .field label, .tel__k,
  .form__t, .ct-step b, .mt-step__n, .mt-step__tag, .cons__ref { font-size: 0.5625rem; }
  .fold__k i { font-size: 0.5rem; }

  /* Curseur du simulateur : zone tactile de 44 px, même dessin. */
  .sim-range { height: 44px; margin-top: 1.4rem; }
  .sim-range__rail { top: 21px; }
  .sim-range__fill { top: 20.5px; }
  .sim-range input[type="range"] { height: 44px; }
  .sim-range input[type="range"]::-webkit-slider-runnable-track { height: 44px; }
  .sim-range input[type="range"]::-webkit-slider-thumb { width: 14px; height: 30px; margin-top: 7px; }
  .sim-range input[type="range"]::-moz-range-track { height: 44px; }
  .sim-range input[type="range"]::-moz-range-thumb { width: 14px; height: 30px; }
  .sim-input input { font-size: 2rem; }

  /* Cibles tactiles ≥ 44 px. */
  .tel__n { display: inline-block; padding-block: 0.4rem; }
  .fd-li { width: 2.75rem; height: 2.75rem; }
  .footer__links { column-gap: 1.25rem; }
  .footer__links a { padding-block: 0.7rem; }
  .form__legal a { padding-block: 0.2rem; }

  /* Console du héro : la colonne « Poste » cède la place aux montants,
     la référence passe en ellipse au lieu de pousser la grille hors cadre. */
  .cons__grid { grid-template-columns: minmax(0, 1fr) auto auto; }
  .cons__poste { min-width: 0; }

  /* Le tampon ne chevauche plus la légende du dossier. */
  .fold__k i { display: none; }
  .stamp { font-size: 0.5rem; bottom: auto; top: 53%; }

  /* Tableau : critère et réponses un cran plus compacts. */
  .df-verdict { gap: 1.25rem; }
}

/* ---- ≤ 380 px : petits téléphones (iPhone SE, Android compacts) ---- */
@media (max-width: 380px) {
  .hero { --t-hero: 1.95rem; }
  .t-page { font-size: 1.6rem; }
  .btn--sm.btn--primary { padding-left: 0.85rem; padding-right: 0.85rem; gap: 0.55rem; }
  .brand svg { width: 80px; }
  .cons__hd > span, .cons__row > span { padding-left: 0.45rem; padding-right: 0.45rem; }
  .cons__top, .cons__foot { padding-left: 0.45rem; padding-right: 0.45rem; }
  .faq-q { gap: 0.85rem; }
  .cons__hd > span:nth-child(n+2), .cons__row > span:nth-child(n+2) { padding-left: 0.3rem; }

}


/* ---- ≤ 780 px : 05 · le fondateur ----
   La photo garde son cadrage portrait d'origine (4/5, visage entier) et se
   pose à côté du titre, comme un portrait signé. Le texte reprend ensuite
   toute la largeur. */
@media (max-width: 780px) {
  .fd {
    grid-template-columns: minmax(0, 0.58fr) minmax(0, 0.42fr);
    column-gap: 1.1rem; row-gap: 0;
    align-items: end;
  }
  .fd-body { display: contents; }
  .fd-frame { grid-column: 2; grid-row: 1; align-self: start; padding: 0.35rem; }
  .fd-photo { aspect-ratio: 4 / 5; }
  .fd-photo img { object-position: center 30%; }
  /* Le titre occupe exactement la hauteur de la photo : js/mobile.js ajuste
     sa taille. La valeur CSS sert de repli sans JS. */
  .fd-body .t-page {
    grid-column: 1; grid-row: 1; align-self: start;
    margin: 0; font-size: clamp(1.25rem, 6.4vw, 2rem); line-height: 1.08;
    letter-spacing: -0.035em; text-wrap: balance; overflow-wrap: normal;
  }
  .fd-hl { color: var(--accent); white-space: nowrap; }
  .fd-body .lead, .fd-eng, .fd-act { grid-column: 1 / -1; }
  .fd-body .lead { margin-top: 1.5rem; }
}

/* ---- ≤ 1080 px : 06 · Diagnostic gratuit ----
   Même logique que l'estimation : l'action d'abord. Titre et promesse, puis
   directement le formulaire ; le téléphone en alternative juste dessous ;
   le déroulé « ce qui se passe ensuite » en réassurance, à la fin. */
@media (max-width: 1080px) {
  .ct__grid { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .ct__head { display: contents; }
  .ct__head .t-page { order: 1; }
  .ct__head .lead { order: 2; margin-bottom: 1.75rem; }
  .ct__grid .form { order: 3; min-width: 0; }
  .ct__head .tel { order: 4; }
  .ct__head .ct-next { order: 5; }
}
@media (max-width: 620px) {
  .ct__head .t-page { margin-bottom: 0.75rem; }
  .ct__head .lead { font-size: 1rem; line-height: 1.55; }

  /* Téléphone : une vraie cible secondaire. Toute la carte est cliquable,
     l'action « Appeler » est annoncée à droite. Encadrée au filet encre,
     jamais en aplat : l'aplat reste réservé au CTA principal. */
  .ct__head .tel {
    position: relative;
    margin-top: 0.75rem; padding: 0.85rem 1rem;
    border: 1px solid var(--ink); background: var(--blanc);
    display: grid; grid-template-columns: minmax(0, 1fr) auto;
    align-items: center; column-gap: 1rem; row-gap: 0.2rem;
    min-height: 64px;
    transition: background-color var(--t-med) var(--ease);
  }
  .ct__head .tel__k {
    position: static; transform: none; padding: 0; background: none;
    grid-column: 1; grid-row: 1; color: var(--fg-2);
  }
  .ct__head .tel__n {
    grid-column: 1; grid-row: 2;
    font-size: 1.25rem; line-height: 1.1; color: var(--ink);
  }
  .ct__head .tel__n::after { content: ""; position: absolute; inset: 0; }
  .ct__head .tel::after {
    content: "Appeler \2192";
    grid-column: 2; grid-row: 1 / span 2;
    font-size: 0.875rem; font-weight: 800; letter-spacing: -0.01em;
    color: var(--accent);
    padding-left: 1rem; border-left: 1px solid var(--rule);
    align-self: stretch; display: flex; align-items: center;
  }
  .ct__head .tel:active { background: var(--clair-2); }
  .ct__head .tel:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
  .ct__head .tel__n:focus-visible { outline: none; }

  /* Déroulé : frise verticale compacte, le délai en repère au-dessus. */
  .ct__head .ct-next { margin-top: 2.25rem; }
  .ct-next .ct-step {
    position: relative;
    grid-template-columns: minmax(0, 1fr); gap: 0.2rem;
    padding: 0.7rem 0 0.7rem 1.25rem; border-bottom: 0;
    font-size: 0.875rem; line-height: 1.45;
  }
  .ct-next .ct-step::before {
    content: ""; position: absolute; left: 0; top: 1.05rem;
    width: 7px; height: 7px; background: var(--accent);
  }
  .ct-next .ct-step::after {
    content: ""; position: absolute; left: 3px; top: 1.6rem; bottom: -1.05rem;
    width: 1px; background: var(--rule);
  }
  .ct-next .ct-step:last-child::after { display: none; }
  .ct-next .ct-step b { color: var(--accent); }
}

/* ---- Header mobile : fil conducteur à la place du CTA (js/mobile.js) ---- */
.hd-link { display: none; }
@media (max-width: 860px) {
  [data-hd] .header__in > .btn { display: none; }
  [data-hd="link"] .hd-link {
    display: inline-flex; align-items: center; gap: 0.5rem;
    margin-left: auto; min-height: 44px; min-width: 0;
    font-size: 0.875rem; font-weight: 800; letter-spacing: -0.01em;
    color: var(--blanc); text-decoration: none; white-space: nowrap;
    transition: opacity 0.3s var(--ease);
  }
  .hd-link__t {
    border-bottom: 2px solid var(--terre); padding-bottom: 0.15rem;
    overflow: hidden; text-overflow: ellipsis;
    transition: opacity 0.22s var(--ease), transform 0.22s var(--ease);
  }
  .hd-link__a { color: var(--terre); transition: transform 0.3s var(--ease); }
  .hd-link.is-swap .hd-link__t { opacity: 0; transform: translateY(-5px); }
  .hd-link:active .hd-link__a { transform: translateY(2px); }
  .hd-link.is-gone { opacity: 0; pointer-events: none; }
}
@media (max-width: 380px) {
  [data-hd="link"] .hd-link { font-size: 0.8125rem; }
}