/* Accueil sur téléphone, v2 (01/11/2026, Aziz : « c'est trop zoomé, on n'a pas de recul, pas ludique, trop fade ; dans la DA du site sur
   ordinateur, mais adapté : c'est important si on prospecte sur Insta / LinkedIn »).
   Tout est sous 600 px : l'ordinateur ne change pas. Plus petit, plus de choses à l'écran ; cartes à glisser, onglets.
   Comportements (onglets) : accueil-tel.js. */
@media (max-width:860px){.foot .bottom{padding-bottom:calc(24px + env(safe-area-inset-bottom))}}
.tel-seul{display:none}
.me-fin{display:contents}
@keyframes telFondu{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (max-width:600px){
  .wrap{padding:0 20px}
  p{line-height:1.55}
  section[id],header[id]{scroll-margin-top:64px}
  #mock{scroll-margin-top:84px}

  /* Séparations : ni rails ni bandes, blocs blanc / gris très clair */
  #qui,#comment,#offre,#faq,.sep{background-image:none!important}
  .sep{display:none}
  #qui,#offre{background:#fff}
  #comment,#faq{background:#F7F8FB}
  #qui,#comment,#offre,#faq{padding:48px 0}
  #comment .head,#offre .head,.faq-tete{text-align:left;margin:0}
  #comment .head h2,#offre .head h2,#faq h2{font-size:25px;line-height:1.14;letter-spacing:-.03em}
  /* un petit mot bleu au-dessus de chaque titre : on sait où on est */
  #comment .head::before,#offre .head::before,#faq .wrap::before{display:block;margin-bottom:8px;font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--blue)}
  #comment .head::before{content:"Comment ça marche"}
  #offre .head::before{content:"L’offre"}
  #faq .wrap::before{content:"Questions"}

  /* Haut de page : la bêta en petit, le slogan sur deux lignes, une phrase, un bouton. Le halo est celui de l'ordinateur (canvas, accueil-aurore.js) :
     derrière la fenêtre d'exemple, il monte jusqu'aux boutons et au slogan ; il n'est plus effacé que tout en haut. */
  .scene-haut > .source{-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 56px,#000 76%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 56px,#000 76%,transparent 100%)}
  .hero{padding:26px 0 40px;text-align:center}
  .pas-tel{display:none!important}
  .hero-pill{display:inline-flex;align-items:center;gap:7px;padding:5px 11px;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1px var(--line),0 1px 2px rgba(15,17,20,.05);font-size:12px;font-weight:600;color:var(--ink)}
  .hero-pill i{width:6px;height:6px;border-radius:50%;background:var(--blue)}
  .hero h1{margin:14px 0 0;font-size:clamp(31px,8.4vw,40px);line-height:1.08;letter-spacing:-.04em}   /* 06/11 : grandit avec l'écran, pour rester plus gros que les titres des blocs (jusqu'à 36 px) */

  .hero .lead{display:block;margin:12px auto 0;max-width:30em;font-size:15.5px;line-height:1.5}
  .hero-cta{display:grid;justify-content:stretch;margin-top:20px;gap:0}
  .hero-cta .btn{display:flex;align-items:center;justify-content:center;width:100%;height:46px;padding:0 16px;font-size:15px}
  .hero-points{list-style:none;display:flex;justify-content:center;flex-wrap:wrap;gap:4px 12px;margin:12px 0 0;padding:0;font-size:12.5px;color:var(--muted)}
  .hero-points li{display:flex;align-items:center;gap:7px}
  .hero-points li::before{content:"";flex:none;width:9px;height:5px;margin:-3px 2px 0 1px;border:solid var(--blue);border-width:0 0 2px 2px;transform:rotate(-45deg)}
  .hero .stage{position:relative;margin-top:42px}
  .mock{border-radius:16px;border-bottom:1px solid var(--line)}
  /* 07/11 (démo lisible au téléphone) : les bulles autour de la fenêtre passent de 11 à 12,5 px */
  .pc{font-size:12.5px;padding:7px 11px;gap:7px;border-radius:11px}
  .pc i{width:7px;height:7px}

  /* Compatible avec : les logos comme avant, sans la ligne des boîtes */
  .logos-limite{display:none}
  /* 05/11 (Aziz : « réduis les espacements à ce niveau-là », puis « un peu trop serré, un entre-deux ») : la démonstration, les logos et la carte se suivent de plus près, sans se toucher. */
  .hero{padding-bottom:26px}
  .logos{padding:28px 0 10px}
  .logos-t{margin-bottom:10px}
  .logos-scene{height:66px}

  /* « C'est moi » : une carte, le titre et le texte entourent la photo (05/11, Aziz : « y a un trou »). */
  #qui{padding:30px 0 36px}
  /* La dernière phrase à gauche, la signature à droite, sur la même rangée, comme au bas d'une lettre (05/11, Aziz : « il y a un espace vide »). */
  #qui .me p.tel-seul{display:block;text-wrap:pretty}
  #qui .me .me-fin{display:flex;align-items:flex-end;justify-content:space-between;gap:10px}
  #qui .me .me-fin p{margin:0}
  #qui .me{display:block;padding:18px;border:1px solid var(--line);border-radius:18px;background:#fff;text-align:left}
  #qui .me img{float:left;shape-outside:circle(41px at 29px 29px);width:58px;height:58px;margin:0 12px 6px 0}
  #qui .me .me-titre{margin:4px 0 6px;font-size:21px;line-height:1.14;letter-spacing:-.025em}
  #qui .me p{margin:0;font-size:14.5px;line-height:1.55}
  #qui .me .sig{display:block;flex:none;margin:0;font-size:23px;line-height:22px;transform-origin:right center}
  /* Les garanties : 4 petites tuiles, l'essentiel seulement */

  /* « Comment ça marche » : 3 cartes à glisser du doigt, on voit le bord de la suivante */
  #comment .head .lead{margin-top:8px;font-size:14.5px;line-height:1.5}
  #comment .steps,#comment .steps.reveal{display:flex;gap:10px;margin:20px -20px 0;padding:2px 20px 12px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 20px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  #comment .steps::-webkit-scrollbar{display:none}
  #comment .steps::before{display:none}
  #comment .steps .tile{display:block;flex:0 0 78%;padding:18px;border:1px solid var(--line);border-radius:18px;background:#fff;box-shadow:0 1px 2px rgba(15,17,20,.04);text-align:left;scroll-snap-align:start}
  #comment .steps .tile .n{display:grid;place-items:center;width:30px;height:30px;margin:0 0 14px;font-size:13.5px;box-shadow:none}
  #comment .steps .tile h3{margin:0 0 6px;font-size:16.5px;line-height:1.25}
  #comment .steps .tile p{margin:0;max-width:none;font-size:14px;line-height:1.5}

  /* Ce que fait Bluo : des onglets au lieu de 3 listes */
  .tel-onglets{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;margin:16px 0 0;padding:3px;border-radius:12px;background:#E9EBF0}
  .tel-onglets button{height:36px;padding:0 4px;border:0;border-radius:9px;background:none;font:inherit;font-size:12.5px;font-weight:600;color:var(--muted);cursor:pointer;transition:background-color .25s,color .25s,box-shadow .25s}
  .tel-onglets button.on{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(15,17,20,.14)}
  #comment .split,#comment .split.glisse{display:block;overflow:visible;margin:8px 0 0;padding:0;background:none;border:0;border-radius:0;box-shadow:none}
  #comment .split > .piste{display:block;padding:0;gap:0;transform:none!important}
  #comment .split .tile,#comment .split .tile.non,#comment .split .tile.you{width:auto;min-width:0;flex:none;margin:0;padding:6px 16px 14px;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:none}
  .js #comment .split.a-onglets .tile{display:none}
  .js #comment .split.a-onglets .tile.tel-on{display:block;animation:telFondu .35s var(--ease) both}
  #comment .split.a-onglets .tile h3{display:none}
  #comment .split .tile + .tile{border-left:1px solid var(--line)}
  #comment .split .tile ul{margin:6px 0 0}
  #comment .split .tile li{padding-top:9px;padding-bottom:9px;font-size:14px;line-height:1.45}
  #comment .split .tile .foot{margin-top:8px;padding-top:11px;font-size:13px;line-height:1.45}
  .glisse-points{display:none!important}
  #comment .cta-txt{margin-top:16px;text-align:center;font-size:14.5px}


  /* « Un mois sans rien payer » : le déroulé dans une carte, les 43 h dans une carte blanche */
  .of-sous{margin:8px 0 18px;text-align:left;font-size:14.5px;line-height:1.5}
  .of-mois{border-radius:18px;box-shadow:0 1px 2px rgba(15,17,20,.04)}
  .of-piste{left:27px;top:30px;bottom:40px}
  .of-etape{padding:16px 16px 14px 48px}
  .of-pt{position:absolute;left:20px;top:19px;width:15px;height:15px;margin:0}
  .of-quand{font-size:10.5px}
  .of-etape h3{margin:3px 0 7px;font-size:16.5px;line-height:1.25}
  .of-etape li{padding:4px 0 4px 22px;font-size:13.5px;line-height:1.4}
  .of-etape li::before{top:6px;width:14px;height:14px}
  .of-valeur{display:block;margin-top:10px;padding:18px;border:1px solid var(--line);border-radius:18px;background:#fff}
  .of-gros{display:grid;grid-template-columns:auto 1fr;align-items:baseline;column-gap:8px;margin:0 0 10px;padding:0;border:0}
  .of-gros span:first-child{grid-column:1 / -1;font-size:10.5px}
  .of-gros b{margin:2px 0 0;font-size:44px}
  .of-gros span:last-child{font-size:14px}
  .of-valeur p{font-size:14px;line-height:1.5}
  .of-valeur .btn{display:flex;align-items:center;justify-content:center;width:100%;height:44px;margin-top:14px;font-size:14.5px}
  .of-donnees{margin-top:12px;font-size:12.5px;line-height:1.45}

  /* Questions */
  #faq h2{margin-bottom:12px}
  .faq summary{padding:15px 0;font-size:15px;line-height:1.35}
  .faq .ans p{font-size:14px;line-height:1.55}

  /* Bas de page */
  .final#oui{padding:52px 0 44px}
  .final .oui-grille{gap:22px}
  .final .eyebrow{font-size:11px}
  .final h2{font-size:28px;line-height:1.12}
  .final .oui-texte p{font-size:14.5px;line-height:1.5}
  .final .rdv-alt{font-size:13px}
  .final .card-form{padding:16px}
  .final .card-form h3,.final .card-form .sub{display:none}
  .final .field input{height:46px;font-size:15.5px}
  .final .oh-champs{gap:8px}
  .final .btn{height:46px;border-radius:12px;font-size:15px}

}
@media (prefers-reduced-motion:reduce){
  .js #comment .split.a-onglets .tile.tel-on{animation:none}
}

/* Corrections v2 */
@media (max-width:600px){
  #comment .steps .tile::before{display:none}
  #comment .steps .tile .n{position:static;background:var(--ink);color:#fff}
  #comment .steps .tile h3{padding:0}
  #comment .head h2,#offre .head h2,#faq h2{font-size:23px;letter-spacing:-.035em}
  .tel-onglets{grid-template-columns:.8fr 1.35fr .7fr}
  .tel-onglets button{font-size:12px}
}
/* FAQ « Avant de dire oui. » (audit du 06/11, direction A) : le même axe que les blocs du dessus.
   Le titre au centre, la liste centrée dans une colonne de 760 px, questions et réponses à gauche DANS la colonne, chevron à droite.
   Posé à la fin de ce fichier (chargé après accueil-aurore.css).
   Aucune nouvelle animation : l'ouverture reste celle du site (hauteur + fondu, script de index.html). */
#faq .head{max-width:760px;margin:0 auto 30px;text-align:center}
#faq .faq{max-width:760px;margin:0 auto}
#faq details p{color:#3A3A3F;max-width:64ch}   /* environ 75 signes par ligne au plus, même sur tablette */
@media (min-width:861px){
  #faq .head{margin-bottom:44px}
  #faq .head h2{font-size:clamp(38px,3.9vw,54px);line-height:1.04;letter-spacing:-.045em}
  #faq summary{font-size:18px;padding:22px 0}
  #faq details p{font-size:16.5px;line-height:1.6;padding:0 0 24px}   /* environ 75 signes par ligne, au lieu de 140 */
}
@media (min-width:1000px){#faq .faq{max-width:760px}}   /* remplace « #faq .faq{max-width:none} » de accueil-aurore.css (04/11) */
@media (max-width:600px){
  /* même cadre que les trois blocs du dessus : fond blanc, trait fin en haut, mêmes marges, même taille de titre */
  #faq{background:#fff;border-top:1px solid var(--line);padding:36px 0 40px}
  #faq .wrap::before{content:none;display:none}   /* plus de petit mot bleu « Questions » : les blocs du dessus n'en ont pas */
  #faq .head{margin:0 auto 22px;text-align:center}
  #faq h2{font-size:clamp(27px,7.6vw,36px);line-height:1.08;letter-spacing:-.04em;margin:0;text-wrap:balance}
  .faq summary{font-size:15.5px;line-height:1.35;padding:16px 0}
  .faq .ans p{font-size:15px;line-height:1.55;padding:0 22px 18px 0}
}