/* RdvFlow, site vitrine : les scènes (marché, message, prix, outils, réponse). */

/* ── 2. pour qui : une bande bleu clair qui coupe la page, le formulaire en appli dans un
   ordinateur portable (un téléphone sur mobile) ── */
.bande { background: var(--bleu-fond); overflow: hidden }
.pourqui { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.5fr); gap: 56px; align-items: center; padding-top: 100px; padding-bottom: 110px }
.pq-texte h2 { max-width: 11ch; margin-bottom: 18px }
.pq-texte p { color: var(--doux); font-size: 1.12rem; max-width: 24em; margin-bottom: 30px }

/* l'ordinateur portable, vu un peu d'en haut : l'écran droit, le clavier couché en perspective.
   À l'arrivée, l'écran se relève (le portable s'ouvre), puis son contenu apparaît. */
.portable { position: relative; perspective: 1800px; margin-bottom: 13% }
.appareil { position: relative; z-index: 1; padding: 14px 14px 18px; border-radius: 22px 22px 4px 4px; background: #1b2130; box-shadow: 0 0 0 2px #2c3447;
  transform-origin: 50% 100%; transform: rotateX(-32deg); will-change: transform }
.appareil::before { content: ""; position: absolute; left: 50%; top: 5px; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: #3a4357 }
.app-ecran > * { opacity: 0; transition: opacity .4s }
.pourqui.ouvert .app-ecran > * { opacity: 1 }
.pourqui.ouvert .app-ecran > .curseur:not(.vu) { opacity: 0 }
.clavier { position: absolute; left: -1%; right: -1%; top: 100%; aspect-ratio: 3.7 / 1; padding: 3.2% 8% 0; border-radius: 4px 4px 20px 20px; background: #d3d9e5; box-shadow: inset 0 3px 0 #e4e8f0, 0 30px 40px -24px rgba(31, 59, 140, .45);
  transform: rotateX(58deg); transform-origin: 50% 0; display: flex; flex-direction: column; align-items: center; gap: 5% }
.touches { width: 100%; display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); gap: 3px }
.touches i { height: 14px; border-radius: 3px; background: #f3f5f9; box-shadow: 0 2px 0 #aeb7c9 }
.touches i.espace { grid-column: span 8 }
.pave { width: 30%; height: 48px; border-radius: 8px; background: #c8cfdc; box-shadow: inset 0 0 0 1px #bcc4d3 }
/* le texte monte en cascade */
.pq-texte > * { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease), transform .9s var(--ressort) }
.pourqui.ouvert .pq-texte > *, .pourqui.vu .pq-texte > * { opacity: 1; transform: none }
.pourqui.ouvert .pq-texte > :nth-child(2) { transition-delay: .12s }
.pourqui.ouvert .pq-texte > :nth-child(3) { transition-delay: .24s }
.app-ecran { position: relative; aspect-ratio: 16 / 10; border-radius: 6px; background: var(--fond-2); color: var(--texte); text-align: left; overflow: hidden; display: flex; flex-direction: column }
.nav-barre { display: flex; justify-content: center; padding: 8px 12px; background: #e9edf4; border-bottom: 1px solid var(--trait) }
.nav-barre span { margin: 0 auto; padding: 3px 40px; border-radius: 7px; background: #fff; font: 500 .7rem var(--corps); color: var(--doux) }
.tel-statut { display: none }
.tel-app { display: flex; align-items: center; gap: 8px; padding: 12px 20px; background: var(--carte); border-bottom: 1px solid var(--trait); font: 700 .92rem var(--titre) }
.tel-app img { height: 14px; width: auto }
.fo-zone { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column }
.fo-vue { display: flex; flex-direction: column }
.app-ecran.envoye .fo-pied { display: none }
.fo-pied { transition: opacity .3s }
.appareil .fo-questions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 16px 20px 0 }
.fo-q { border: 0; border-radius: 12px; background: var(--carte); padding: 14px 14px 8px; min-width: 0; box-shadow: 0 1px 2px rgba(15, 21, 36, .06) }
.fo-q legend { float: left; width: 100%; min-height: 2.7em; font: 600 .86rem/1.35 var(--titre); color: var(--texte); margin-bottom: 6px }
.fo-q label { display: flex; align-items: center; gap: 9px; padding: 5px 0; font-size: .86rem; color: var(--texte); cursor: pointer; clear: both }
.fo-q input { position: absolute; opacity: 0; pointer-events: none }
.fo-q label i { position: relative; width: 19px; height: 19px; flex: none; border-radius: 50%; border: 2px solid var(--pale); transition: border-color .25s }
.fo-q label i::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--bleu); transform: scale(0); transition: transform .35s var(--ressort) }
.fo-q label i::before { content: ""; position: absolute; inset: -9px; border-radius: 50%; background: var(--bleu); opacity: 0 }
.fo-q input:checked + i { border-color: var(--bleu) }
.fo-q input:checked + i::after { transform: scale(1) }
.fo-q input:checked + i::before { animation: onde .55s var(--ease) }
@keyframes onde { from { opacity: .2; transform: scale(.4) } to { opacity: 0; transform: scale(1.3) } }
.fo-q input:focus-visible + i { outline: 2px solid var(--bleu); outline-offset: 3px }
.fo-pied { display: flex; justify-content: flex-end; padding: 14px 20px }
.fo-valider { padding: 9px 22px; border-radius: 9px; background: var(--bleu); color: #fff; font: 700 .85rem var(--titre); transition: background .3s, transform .15s }
.fo-valider:disabled { background: var(--trait-2); cursor: default }
.fo-valider:active { transform: scale(.96) }
/* la réponse : une coche qui se trace, le titre, les secteurs qui arrivent un à un */
.fo-merci { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 12px 20px; text-align: center; opacity: 0; transform: translateY(30px); pointer-events: none; transition: transform .7s var(--ressort), opacity .4s }
.app-ecran.envoye .fo-merci { opacity: 1; transform: none; pointer-events: auto }
.fo-merci b { font: 800 clamp(1.2rem, 2vw, 1.6rem) var(--titre); letter-spacing: -.025em }
.fo-merci.oui b { color: var(--vert) }
.fo-merci p { color: var(--doux); max-width: 46ch; font-size: .9rem; line-height: 1.5 }
.fo-merci a.fo-valider { animation: apparait .5s .9s var(--ease) backwards }
/* sur ordinateur : le résultat tient sur une ligne, coche, texte, bouton */
@media (min-width: 901px) {
  .fo-merci { flex-direction: row; gap: 18px; text-align: left; padding: 0 24px }
  .fo-merci div { display: grid; gap: 2px }
  .fo-merci a.fo-valider { margin-left: 12px }
}
.fo-coche { width: 44px; height: 44px; fill: none; stroke: var(--vert); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round }
.fo-coche circle { stroke-dasharray: 145; stroke-dashoffset: 145 }
.fo-coche path { stroke-dasharray: 34; stroke-dashoffset: 34 }
.app-ecran.envoye .fo-coche circle { animation: trait .7s .25s var(--ease) forwards }
.app-ecran.envoye .fo-coche path { animation: trait .4s .8s var(--ease) forwards }
@keyframes trait { to { stroke-dashoffset: 0 } }
/* le curseur qui remplit le formulaire */
.curseur { position: absolute; left: 0; top: 0; z-index: 5; width: 22px; height: 22px; opacity: 0; pointer-events: none; transition: transform .7s cubic-bezier(.5, 0, .2, 1), opacity .3s }
.curseur.vu { opacity: 1 }
.curseur svg { width: 100%; height: 100%; fill: var(--texte); stroke: #fff; stroke-width: 1.5; stroke-linejoin: round; filter: drop-shadow(0 2px 3px rgba(15, 21, 36, .3)); transition: transform .15s }
.curseur.clic svg { transform: scale(.8) }

@media (max-width: 900px) {
  .pourqui { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 40px }
  .pq-texte h2, .pq-texte p { margin-left: auto; margin-right: auto }
  /* sur mobile : un téléphone */
  .appareil { width: 300px; padding: 10px; border-radius: 46px; box-shadow: 0 40px 70px -32px rgba(31, 59, 140, .5) }
  .appareil::before, .nav-barre, .clavier { display: none }
  .portable { perspective: none; margin-bottom: 0 }
  .appareil { transform: translateY(60px) rotate(-4deg); opacity: 0; transition: transform 1s var(--ressort), opacity .6s }
  .pourqui.ouvert .appareil { transform: none; opacity: 1 }
  .app-ecran > * { transition-delay: .5s }
  .app-ecran { aspect-ratio: auto; height: 580px; border-radius: 37px }
  .tel-statut { display: flex; justify-content: space-between; align-items: center; padding: 14px 24px 6px; font: 700 .8rem var(--titre) }
  .tel-statut span { display: flex; gap: 3px; align-items: flex-end }
  .tel-statut span i { width: 4px; border-radius: 1px; background: var(--texte) }
  .tel-statut span i:nth-child(1) { height: 5px } .tel-statut span i:nth-child(2) { height: 8px } .tel-statut span i:nth-child(3) { height: 11px }
  .tel-statut::after { content: ""; position: absolute; left: 50%; top: 10px; width: 88px; height: 25px; margin-left: -44px; border-radius: 99px; background: #1b2130 }
  .tel-app { background: none; border: 0; padding: 12px 18px 10px }
  .appareil .fo-questions { grid-template-columns: 1fr; gap: 10px; padding: 0 12px }
  .fo-q legend { min-height: 0 }
  .fo-q label { display: inline-flex; padding-right: 18px; clear: none }
  .fo-pied { padding: 12px }
  .fo-valider { width: 100%; padding: 12px }
  .fo-merci a.fo-valider { width: auto; padding: 10px 22px }
  .fo-merci { gap: 6px }
  .fo-coche { width: 34px; height: 34px }
  .fo-merci p { font-size: .8rem }
  .fo-merci b { font-size: 1.1rem }
}
@media (max-width: 560px) { .pourqui { padding-top: 72px; padding-bottom: 72px } }

/* ── 3. la méthode : une fenêtre de messagerie ; le message s'écrit, chaque passage clé
   se surligne et reçoit son annotation dans la marge ── */
.methode { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.6fr); gap: 56px; align-items: center }
.methode h2 { margin: 0 0 20px; max-width: 13ch }
.me-plus { margin-left: -6px }
.me-app { max-width: 920px; margin: 0 auto; border-radius: 20px; background: var(--carte); border: 1px solid var(--trait); box-shadow: var(--ombre-forte); overflow: hidden;
  opacity: 0; transform: translateY(30px); transition: opacity .8s var(--ease), transform 1s var(--ressort) }
.me-app.vu { opacity: 1; transform: none }
.me-barre { display: flex; align-items: center; justify-content: space-between; padding: 14px 24px; border-bottom: 1px solid var(--trait); font: 700 .92rem var(--titre) }
.me-envoye { white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 99px; background: var(--vert); color: #fff; font: 600 .78rem var(--titre); opacity: 0; transform: scale(.6); transition: opacity .3s, transform .5s var(--ressort) }
.me-envoye svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round }
.me-app.envoye .me-envoye { opacity: 1; transform: none }
/* une ligne du message : le texte, et sa note dans la marge de droite */
.me-l { display: grid; grid-template-columns: minmax(0, 1fr) 150px; align-items: center; gap: 20px; padding: 0 24px }
.me-ligne { display: flex; gap: 14px; padding: 11px 0; font-size: .95rem; color: var(--texte); border-bottom: 1px solid var(--fond-2) }
.me-ligne span { width: 46px; flex: none; color: var(--pale) }
.me-ligne.objet { font: 700 1rem var(--titre) }
.me-texte { padding: 18px 0 22px }
.me-texte p { padding: 7px 0; font-size: 1.04rem; line-height: 1.65; color: #34405a; min-height: 2.3em }
.me-app mark { color: inherit; border-radius: 4px; padding: 1px 2px; background: linear-gradient(#dbe6ff, #dbe6ff) 0 0 / 0% 100% no-repeat; transition: background-size .7s var(--ease) }
.me-app mark.on { background-size: 100% 100% }
.me-l.actif mark { color: var(--texte) }
.me-note { justify-self: start; display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px 6px 9px; border-radius: 10px; background: var(--bleu-fond); color: var(--bleu-fonce); font: 600 .8rem var(--titre); white-space: nowrap;
  opacity: 0; transform: translateX(-12px) scale(.9); transition: opacity .35s, transform .55s var(--ressort) }
.me-note svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round }
.me-l.note .me-note { opacity: 1; transform: none }
/* la pile : des messages superposés derrière le premier, décalés vers le haut et un peu plus
   petits à chaque cran ; on lit leur en-tête (destinataire, objet, tampon "Facturé") */
.me-gauche, .me-pile { min-width: 0 }
.me-pile { position: relative; width: 100%; padding-top: calc(var(--n, 6) * 30px) }
.me-fictif { grid-column: 2; margin-top: -40px }
@media (max-width: 1000px) { .me-fictif { grid-column: 1; margin-top: -20px } }
.me-dos-pile { position: absolute; left: 0; right: 0; top: calc(var(--n, 6) * 30px); bottom: 0; pointer-events: none }
.me-dos { position: absolute; inset: 0; display: flex; align-items: flex-start; gap: 12px; padding: 13px 24px; border-radius: 20px; background: var(--carte); border: 1px solid var(--trait);
  box-shadow: 0 -4px 14px -8px rgba(15, 21, 36, .18); font-size: .88rem; color: var(--doux);
  transform-origin: 50% 0; transform: translateY(calc(var(--i) * -30px)) scale(calc(1 - var(--i) * .035)); z-index: calc(10 - var(--i));
  opacity: 0; transition: transform .8s var(--ressort), opacity .5s; transition-delay: calc((var(--n) - var(--i)) * 90ms) }
.me-dos > span { color: var(--pale) }
.me-dos > b { font-weight: 500; color: var(--texte); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.me-dos > i { display: none; font-style: normal; color: var(--pale); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-left: auto; padding-left: 12px }
.me-dos em { flex: none; padding: 2px 8px; border: 1.5px solid var(--vert); border-radius: 6px; color: var(--vert); font: 800 .66rem var(--titre); font-style: normal; letter-spacing: .06em; text-transform: uppercase; transform: rotate(-4deg) }
/* les messages sans suite restent pâles */
.me-dos:not(.facture) > b, .me-dos:not(.facture) > i, .me-dos:not(.facture) > span { opacity: .45 }
.me-pile:not(.posee) .me-dos { transform: translateY(calc(var(--i) * -30px - 60px)) scale(calc(1 - var(--i) * .035)); opacity: 0 }
.me-pile.posee .me-dos { opacity: calc(1 - var(--i) * .22) }
/* une fois posée, la pile recule d'un bloc (sans décalage entre les cartes) */
.me-pile.pret .me-dos { transition: transform .65s cubic-bezier(.4, 0, .2, 1), opacity .65s }
.me-pile .me-app { position: relative; z-index: 11 }
.me-pile .me-app.vu { opacity: 1; transform: none }
.me-pile:not(.posee) .me-app { opacity: 0; transform: translateY(40px) }
.me-pile.posee .me-app { transition: opacity .6s .5s, transform .9s .5s var(--ressort) }
.me-app.arrive { animation: arrive-mail .7s var(--ressort) both }
.me-ligne i { font-style: normal }
.me-pile .me-app.cache { opacity: 0; transition: none }
/* le message terminé, gardé entier dans la pile : son en-tête prend la forme des autres cartes */
.me-dos-plein { display: block; padding: 0; overflow: hidden; color: inherit; font-size: inherit }
.me-dos-tete { display: flex; align-items: flex-start; gap: 12px; padding: 13px 24px; font-size: .88rem; color: var(--doux); border-bottom: 1px solid var(--trait) }
.me-dos-tete b { font-weight: 500; color: var(--texte); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.me-dos-tete i { font-style: normal; color: var(--pale); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-left: auto; padding-left: 12px }
.me-dos-tete span { color: var(--pale) }
.me-dos-tete em { flex: none; padding: 2px 8px; border: 1.5px solid var(--vert); border-radius: 6px; color: var(--vert); font: 800 .66rem var(--titre); font-style: normal; letter-spacing: .06em; text-transform: uppercase; transform: rotate(-4deg) }
/* sur le message du dessus, le tampon arrive quand le rendez-vous est pris */
.me-app .me-dos-tete em { opacity: 0; transform: rotate(-4deg) scale(1.8); transition: opacity .3s, transform .45s cubic-bezier(.3, 1.6, .5, 1) }
.me-app.envoye .me-dos-tete em { opacity: 1; transform: rotate(-4deg) }
/* seule la carte du fond disparaît */
.me-pile .me-dos.sort { opacity: 0 }
.me-dos-plein mark { color: inherit; border-radius: 4px; padding: 1px 2px; background: #dbe6ff }
@keyframes arrive-mail { from { opacity: 0; transform: translateY(46px) scale(1.035) } }
.me-legende { max-width: 26em; color: var(--doux); font-size: 1.1rem; line-height: 1.55 }
/* la facture : les messages sans suite à 0 euro, en grand */
/* sous le titre : le 0 euro en grand, une phrase */
.me-facture { display: flex; align-items: center; gap: 18px; margin-top: 8px; opacity: 0; transform: translateY(16px); transition: opacity .6s, transform .8s var(--ressort) }
.me-facture.vu { opacity: 1; transform: none }
.me-facture > b { font: 800 3.4rem/1 var(--titre); letter-spacing: -.04em; color: var(--vert); flex: none }
.me-facture span { color: var(--doux); font-size: .98rem; line-height: 1.5 }
.me-facture strong { color: var(--texte); font-variant-numeric: tabular-nums }
@media (max-width: 1000px) { .methode { grid-template-columns: minmax(0, 1fr); gap: 36px } .methode h2 { max-width: 16ch } }
@media (max-width: 700px) {
  .me-pile { padding-top: calc(var(--n, 4) * 24px) } .me-dos-pile { top: calc(var(--n, 4) * 24px) }
  .me-dos { padding: 9px 16px; font-size: .78rem; transform: translateY(calc(var(--i) * -24px)) scale(calc(1 - var(--i) * .04)) }
  .me-dos > i { display: none }
  .me-plus { display: none }
  .me-pile:not(.posee) .me-dos { transform: translateY(calc(var(--i) * -24px - 50px)) scale(calc(1 - var(--i) * .04)) }
  .me-dos-tete { padding: 9px 16px; font-size: .78rem }
  .me-dos-tete i { display: none }
}
@media (max-width: 700px) {
  .me-l { grid-template-columns: 1fr; gap: 0; padding: 0 18px }
  .me-note { grid-row: 1; margin-top: 10px }
  .me-l:not(.note) .me-note { display: none }
  .me-texte p { font-size: .95rem }
}

/* ── 4. l'analyse : un téléphone, la fiche d'une entreprise complétée par nos outils
   (la personne à contacter, l'actualité, les besoins, la compatibilité) ── */
.analyse { padding-top: 100px; padding-bottom: 36px; display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, .8fr); gap: 56px; align-items: center }
.an-texte h2 { margin-bottom: 18px; max-width: 13ch }
.an-texte p { color: var(--doux); font-size: 1.1rem; line-height: 1.6; max-width: 26em }
.an-fictif { grid-column: 1; margin-top: -40px }
.tel { width: 330px; padding: 11px; border-radius: 50px; background: #1b2130; box-shadow: 0 0 0 2px #2c3447, 0 50px 80px -34px rgba(31, 59, 140, .5);
  opacity: 0; transform: translateY(40px) rotate(-3deg); transition: opacity .8s var(--ease), transform 1.1s var(--ressort) }
.tel.vu { opacity: 1; transform: none }
.tel-vitre { position: relative; height: 600px; border-radius: 40px; background: var(--fond-2); overflow: hidden; display: flex; flex-direction: column; gap: 8px; padding-bottom: 12px }
.tel-barre { display: flex; justify-content: space-between; align-items: center; padding: 14px 26px 2px; font: 700 .8rem var(--titre) }
.tel-barre span { display: flex; gap: 3px; align-items: flex-end }
.tel-barre span i { width: 4px; border-radius: 1px; background: var(--texte) }
.tel-barre span i:nth-child(1) { height: 5px } .tel-barre span i:nth-child(2) { height: 8px } .tel-barre span i:nth-child(3) { height: 11px }
.tel-barre::after { content: ""; position: absolute; left: 50%; top: 10px; width: 92px; height: 26px; margin-left: -46px; border-radius: 99px; background: #1b2130 }
.fi-nav { display: flex; align-items: center; gap: 6px; padding: 6px 16px 2px; font: 700 .95rem var(--titre) }
.fi-nav svg { width: 18px; height: 18px; fill: none; stroke: var(--bleu); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round }
/* deux écrans l'un sur l'autre : la recherche, puis la fiche qui glisse à sa place */
.fi-ecrans { position: relative; flex: 1; min-height: 0; overflow: hidden }
.fi-charge, .fi-fiche { position: absolute; inset: 0; display: flex; flex-direction: column; transition: transform .7s cubic-bezier(.6, 0, .2, 1), opacity .5s }
.tel.fiche .fi-charge { transform: translateX(-30%) scale(.94); opacity: 0 }
.fi-fiche { transform: translateX(100%); justify-content: center; gap: 10px; padding: 8px 16px 16px }
.tel.fiche .fi-fiche { transform: none }
/* 1. la recherche : une fenêtre de l'appli, une ligne par outil */
.fi-charge { align-items: center; justify-content: center; padding: 0 24px 16px }
.fi-modal { position: relative; width: min(420px, 100%); border-radius: 18px; background: var(--carte); box-shadow: 0 1px 2px rgba(15, 21, 36, .05), 0 18px 40px -20px rgba(15, 21, 36, .3); overflow: hidden }
.fi-modal-tete { display: flex; align-items: center; gap: 12px; padding: 18px 18px 12px }
.fi-logo { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; flex: none; font: 800 1.05rem var(--titre); font-style: normal }
.fi-modal-tete b { display: block; font: 700 .98rem var(--titre) }
.fi-modal-tete small { font-size: .76rem; color: var(--pale); font-variant-numeric: tabular-nums }
/* les sources, en ligne, qui chargent en même temps */
.fi-orch { padding: 4px 14px 18px }
.fi-sous { display: inline-flex; align-items: center; gap: 6px }
.fi-sous img { width: 13px; height: 13px; border-radius: 3px }
.fi-etapes { list-style: none; display: grid; grid-template-columns: repeat(3, 64px); justify-content: center; gap: 14px 28px; padding-top: 4px }
.fi-outil { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: .7rem; color: var(--pale); white-space: nowrap; transition: color .2s }
/* une tuile d'appli : grisée avec un cercle de chargement, puis en couleur avec sa coche */
.fi-tuile { position: relative; width: 52px; height: 52px; border-radius: 15px; display: grid; place-items: center; background: var(--fond-2) }
.fi-tuile img { width: 28px; height: 28px; border-radius: 7px; filter: grayscale(1); opacity: .35; transition: filter .25s, opacity .25s }
.fi-tuile svg { position: absolute; inset: 8px; width: 36px; height: 36px; transform: rotate(-90deg); opacity: 0; transition: opacity .2s }
.fi-tuile circle { fill: none; stroke: var(--bleu); stroke-width: 18; stroke-dasharray: 57; stroke-dashoffset: 57; opacity: .22 }
.fi-outil.tourne .fi-tuile svg { opacity: 1 }
.fi-outil.tourne .fi-tuile circle { stroke-dashoffset: 0; transition: stroke-dashoffset var(--duree, 1.5s) linear }
.fi-outil.fait .fi-tuile img { filter: none; opacity: 1 }
.fi-outil.fait { color: var(--texte) }
.fi-tuile i { position: absolute; right: -4px; top: -4px; width: 17px; height: 17px; border-radius: 50%; background: var(--vert) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12 4 4 8-8'/%3E%3C/svg%3E") center/10px no-repeat; box-shadow: 0 0 0 2px var(--carte); transform: scale(0); transition: transform .35s var(--ressort) }
.fi-outil.fait .fi-tuile i { transform: scale(1) }
@keyframes tourne { to { transform: rotate(1turn) } }
@keyframes pop-ok { from { transform: scale(0) } }
/* 2. la fiche : la personne, puis les lignes une à une */
.fi-pers { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; padding: 14px 16px; border-radius: 16px; background: var(--carte) }
@media (max-width: 1000px) { .fi-action { flex-basis: 100%; justify-content: center } .fi-charge { padding: 0 10px 12px } .fi-modal-tete { padding: 16px 14px 10px } }
.fi-av { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; flex: none; overflow: hidden }
.fi-av svg { width: 72%; height: 72%; fill: currentColor; margin-top: 4px }
.fi-pers div { min-width: 0 }
.fi-pers small, .fi-ligne small { display: block; font: 600 .68rem var(--titre); color: var(--pale) }
.fi-pers b { display: block; font: 700 1.05rem var(--titre) }
.fi-pers span { display: block; font-size: .8rem; color: var(--doux) }
.fi-action { display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; padding: 9px 14px; border-radius: 10px; background: var(--fond-2); color: var(--pale); font: 700 .82rem var(--titre); white-space: nowrap; pointer-events: none; transition: background .4s, color .4s, box-shadow .4s }
.fi-action svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round }
.fi-action .envoi { display: none }
/* la fiche ouverte : le bouton est tout de suite actif */
.tel.fiche .fi-action { background: var(--bleu); color: #fff; pointer-events: auto; box-shadow: 0 8px 18px -8px rgba(79, 127, 238, .7); animation: debloque .6s .6s var(--ressort) backwards }
.tel.fiche .fi-action .cadenas { display: none }
.tel.fiche .fi-action .envoi { display: block }
@keyframes debloque { 40% { transform: scale(1.08) } }
.fi-ligne { padding: 12px 16px; border-radius: 16px; background: var(--carte); opacity: 0; transform: translateY(12px); transition: opacity .4s, transform .55s var(--ressort) }
.fi-ligne.vu { opacity: 1; transform: none }
.fi-ligne b { display: block; font: 600 .95rem var(--titre); color: var(--texte); margin-top: 2px }
.fi-compat div { display: flex; align-items: center; gap: 10px; margin-top: 4px }
.fi-compat i { flex: 1; height: 8px; border-radius: 99px; background: var(--fond-2); overflow: hidden }
.fi-compat s { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--vert) }
.fi-compat div b { margin: 0; font: 800 1.2rem var(--titre); color: var(--vert); min-width: 3.2ch; text-align: right }
/* sur ordinateur : une tablette à l'horizontale ; la fiche se met en deux colonnes */
@media (min-width: 1001px) {
  .tel { width: 100%; padding: 14px; border-radius: 34px }
  .tel-vitre { height: auto; aspect-ratio: 4 / 2.7; border-radius: 22px; padding: 12px 6px 6px }
  .tel-barre { display: none }
  .fi-fiche { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: repeat(3, auto); align-content: center; gap: 12px; padding: 8px 24px 20px }
  .fi-pers { grid-row: 1 / span 3; flex-direction: column; align-items: flex-start; justify-content: center; gap: 12px; align-self: stretch }
  .fi-av { width: 64px; height: 64px }
  .fi-pers b { font-size: 1.3rem }
}
@media (max-width: 1000px) { .analyse { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 36px } .an-texte { grid-row: 1; justify-self: stretch } .an-fictif { margin-top: -20px } }
@media (max-width: 400px) { .tel { width: 300px } .tel-vitre { height: 600px } }

/* ── 5. le prix : une seule offre, une seule carte ; le prix en très grand est le point focal ── */
.prix { text-align: center }
.prix h2 { margin: 0 auto 44px; max-width: 18ch }
.px-offre { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); max-width: 960px; margin: 0 auto; text-align: left; border-radius: 24px; background: var(--carte); box-shadow: 0 0 0 1px rgba(15, 21, 36, .07), 0 2px 4px rgba(15, 21, 36, .04), 0 30px 60px -28px rgba(31, 59, 140, .28); overflow: hidden;
  opacity: 0; transform: translateY(24px); transition: opacity .7s, transform .9s var(--ressort) }
.px-offre.vu { opacity: 1; transform: none }
.px-gauche { padding: 36px }
.px-droite { padding: 36px; background: var(--fond-2) }
.px-label { font: 600 .78rem var(--titre); color: var(--pale); margin-bottom: 12px }
.px-tailles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 4px; border-radius: 14px; background: var(--fond-2) }
.px-tailles button { display: grid; gap: 1px; padding: 9px 2px; border-radius: 10px; font: 700 .9rem var(--titre); color: var(--doux); white-space: nowrap; transition: background .3s, color .3s, box-shadow .3s }
.px-tailles small { font: 500 .68rem var(--corps); color: var(--pale) }
.px-tailles button.actif { background: var(--carte); color: var(--texte); box-shadow: 0 1px 3px rgba(15, 21, 36, .12) }
.px-montant { margin-top: 30px }
.px-montant b { display: block; font: 800 4.6rem/1 var(--titre); letter-spacing: -.045em; color: var(--texte); white-space: nowrap }
.px-montant b small { font-size: .32em; letter-spacing: 0; color: var(--pale); margin-left: 8px; font-weight: 700 }
.px-montant b.change { animation: prix-change .45s var(--ressort) }
@keyframes prix-change { from { opacity: 0; transform: translateY(12px) } }
.px-montant span { display: block; margin-top: 8px; color: var(--doux); font-size: 1rem }
.px-droite ul { list-style: none; display: grid; gap: 14px; margin-bottom: 28px }
.px-droite li { display: flex; align-items: center; gap: 10px; font-size: .98rem; color: var(--texte) }
.px-droite li svg { width: 20px; height: 20px; flex: none; padding: 3px; border-radius: 50%; background: var(--vert-fond); fill: none; stroke: var(--vert); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round }
.px-simuler { display: inline-flex; align-items: center; gap: 6px; margin-top: 28px; font: 600 .95rem var(--titre); color: var(--bleu) }
.px-simuler svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s var(--ressort) }
.px-simuler:hover { color: var(--bleu-fonce) }
.px-simuler:hover svg { transform: translateX(3px) }
@media (max-width: 800px) { .px-offre { grid-template-columns: minmax(0, 1fr) } .px-gauche, .px-droite { padding: 26px 22px } .px-montant b { font-size: 3.6rem } .px-tailles button { font-size: .8rem } }

/* ── la frise des outils, sous l'analyse : deux rangées de logos qui défilent en sens contraire ── */
.an-outils { grid-column: 1 / -1; justify-self: stretch; text-align: center; min-width: 0; margin-top: 40px }
.an-outils p { font: 600 .75rem var(--titre); color: var(--pale); margin-bottom: 12px }
.frise-cadre { overflow: hidden; max-width: 1080px; margin: 0 auto;
  -webkit-mask: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); mask: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent) }
.frise { display: flex; align-items: center; width: max-content; gap: 30px; padding-right: 30px; will-change: transform }
.frise img { width: 26px; height: 26px; border-radius: 7px; filter: grayscale(1); opacity: .55; transition: filter .25s, opacity .25s }
/* en noir et blanc ; la couleur revient au survol */
.frise img:hover { filter: none; opacity: 1 }

/* ── la réponse : un titre, un champ email et son bouton dans une seule barre ── */
.repondre { text-align: center; padding-top: 110px; padding-bottom: 120px }
.repondre h2 { margin: 0 auto 12px; max-width: none }
.rp-sous { color: var(--doux); font-size: 1.1rem; margin-bottom: 30px }
.rp-form { position: relative; display: flex; gap: 6px; max-width: 460px; margin: 0 auto; padding: 6px; border-radius: 16px; background: var(--carte); box-shadow: var(--ombre-forte); transition: box-shadow .2s }
.rp-form:focus-within { box-shadow: 0 0 0 4px rgba(79, 127, 238, .18), var(--ombre-forte) }
.rp-form input[type=email] { flex: 1; min-width: 0; font: inherit; font-size: 1rem; color: var(--texte); background: none; border: 0; padding: 0 12px; outline: none }
.rp-form .bouton { flex: none; background: var(--bleu); border-radius: 11px }
.rp-form .bouton:hover { background: var(--bleu-fonce) }
.rp-form .pot { position: absolute; left: -9999px; width: 1px; height: 1px }
.rp-form .erreur { position: absolute; left: 0; right: 0; top: calc(100% + 10px); color: var(--rouge); font-size: .85rem }
.rp-fin { display: inline-flex; align-items: center; gap: 12px; font: 700 1.2rem var(--titre); color: var(--vert); animation: apparait .5s var(--ease) }
.rp-fin[hidden] { display: none }
.rp-fin svg { width: 40px; height: 40px; fill: none; stroke: var(--vert); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round }
.rp-fin circle { stroke-dasharray: 145; stroke-dashoffset: 145; animation: trait .7s .1s var(--ease) forwards }
.rp-fin path { stroke-dasharray: 34; stroke-dashoffset: 34; animation: trait .4s .65s var(--ease) forwards }
@media (max-width: 560px) { .repondre { padding-top: 72px; padding-bottom: 80px } .rp-form .bouton { padding: 12px 16px } }
@media (prefers-reduced-motion: reduce) {
  .appareil, .pq-texte > *, .app-ecran > * { transform: none !important; opacity: 1 !important; transition: none !important }
}