/* Palette A, bleu-vert profond (tranchée le 26/10), police Manrope, téléphone d'abord. */
:root {
  --fond: #F6F8F9; --carte: #FFFFFF; --encre: #12354E; --gris: #52667A; --trait: #DCE5EA;
  --accent: #00746F; --accent-fonce: #00605C; --accent-clair: #E2F1F0; --gris-clair: #E6ECEF; --gris-moyen: #C4CFD6;
  --ambre: #E2B540; --ambre-fond: #FBF4DD; --ambre-encre: #7A5C00; --lien: #5A82B3; --alerte: #C2410C;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--fond); color: var(--encre); font-family: Manrope, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased; }
a { color: var(--accent); text-decoration: none; font-weight: 700; }
a:hover { color: var(--accent-fonce); }
button, input { font: inherit; }
.ecran { max-width: 430px; min-height: 100vh; margin: 0 auto; padding: 28px 20px 24px; display: flex; flex-direction: column; gap: 20px; }
.etapes { display: flex; gap: 6px; }
.etapes span { flex: 1; height: 4px; border-radius: 2px; background: var(--trait); }
.etapes span.fait { background: var(--accent); }
h1 { margin: 0; font-size: 28px; font-weight: 800; letter-spacing: -0.5px; }
.sous { margin: 0; font-size: 15px; color: var(--gris); line-height: 1.45; }
.centre { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; }
label { font-size: 13px; font-weight: 600; color: var(--gris); }
input[type=email], input[type=password], input[type=text], input[type=time] { height: 54px; border-radius: 14px; border: 1px solid var(--trait);
  background: var(--carte); padding: 0 16px; font-size: 16px; color: var(--encre); width: 100%; }
input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.champs { display: flex; flex-direction: column; gap: 10px; }
.vide { flex: 1; }
.bouton { display: flex; align-items: center; justify-content: center; height: 56px; border: 0; border-radius: 16px;
  background: var(--accent); color: #fff; font-weight: 800; font-size: 17px; cursor: pointer; width: 100%; }
.bouton:hover { background: var(--accent-fonce); color: #fff; }
.bouton.discret { background: transparent; color: var(--gris); font-weight: 600; font-size: 15px; height: 44px; }
.carte { background: var(--carte); border: 1px solid var(--trait); border-radius: 20px; padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.ligne { display: flex; align-items: center; gap: 12px; font-size: 16px; font-weight: 600; }
.bascule { display: flex; background: var(--gris-clair); border-radius: 14px; padding: 4px; gap: 4px; }
.bascule a { flex: 1; height: 44px; border-radius: 11px; display: flex; align-items: center; justify-content: center;
  color: var(--gris); font-size: 15px; }
.bascule a.choisi { background: var(--carte); color: var(--encre); }
.note { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--gris); }
.case { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--encre); font-weight: 600; }
.case input { width: 20px; height: 20px; accent-color: var(--accent); margin: 0; }
.erreurs { background: #FDEDE6; color: var(--alerte); border-radius: 14px; padding: 12px 16px; font-size: 14px; font-weight: 600; margin: 0; list-style: none; }
.pays { display: flex; align-items: center; gap: 12px; background: var(--carte); border: 1px solid var(--trait); border-radius: 16px; padding: 12px 16px; }
.pays b { font-size: 14px; } .pays small { font-size: 12px; color: var(--gris); }
.relie { display: flex; align-items: center; gap: 12px; background: var(--accent-clair); border-radius: 16px; padding: 14px 16px; }
.rond { flex-shrink: 0; width: 40px; height: 40px; border-radius: 20px; background: var(--accent); color: #fff; display: flex;
  align-items: center; justify-content: center; font-weight: 800; }
.attente { background: var(--ambre-fond); color: var(--ambre-encre); border-radius: 16px; padding: 14px 16px; font-weight: 600; font-size: 14px; }
.texte { max-width: 760px; margin: 0 auto; padding: 32px 20px 60px; line-height: 1.6; }
.texte h1 { margin-bottom: 8px; } .texte h2 { font-size: 18px; margin-top: 28px; }
.qr svg { width: 200px; height: 200px; }
code { background: var(--gris-clair); padding: 2px 6px; border-radius: 6px; font-size: 14px; word-break: break-all; }
/* S4, installation : pastilles, compteur, jauge, montée, cartes de l'aperçu */
.puces { display: flex; flex-wrap: wrap; gap: 8px; }
.puce input { position: absolute; opacity: 0; pointer-events: none; }
.puce span { display: inline-flex; align-items: center; height: 40px; padding: 0 16px; border-radius: 20px; border: 1px solid var(--trait);
  background: var(--carte); color: var(--encre); font-weight: 700; font-size: 15px; cursor: pointer; }
.puce input:checked + span { background: var(--accent); border-color: var(--accent); color: #fff; }
.puce input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.titre-bloc { font-size: 13px; font-weight: 800; color: var(--gris); text-transform: uppercase; letter-spacing: .4px; margin: 4px 0 0; }
textarea { font: inherit; border-radius: 14px; border: 1px solid var(--trait); background: var(--carte); padding: 12px 16px; font-size: 16px;
  color: var(--encre); width: 100%; min-height: 96px; resize: vertical; }
.lien-discret { font-size: 14px; color: var(--gris); }
.compteur { display: flex; align-items: center; justify-content: center; gap: 18px; }
.compteur button { width: 52px; height: 52px; border-radius: 26px; border: 1px solid var(--trait); background: var(--carte); font-size: 26px;
  font-weight: 800; color: var(--encre); cursor: pointer; }
.compteur input { width: 120px; height: 72px; text-align: center; font-size: 44px; font-weight: 800; border: 0; background: transparent; color: var(--encre); }
.reperes { display: flex; gap: 8px; justify-content: center; }
.reperes button { min-width: 48px; height: 40px; border-radius: 12px; border: 1px solid var(--trait); background: var(--carte); font-weight: 800; color: var(--encre); cursor: pointer; }
.jauge { border-radius: 18px; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.jauge.vert { background: var(--accent-clair); color: var(--accent-fonce); }
.jauge.orange { background: var(--ambre-fond); color: var(--ambre-encre); }
.jauge.rose { background: #FCE4EC; color: #B4234A; }
.jauge .chiffre { font-size: 28px; font-weight: 800; }
.jauge .barre { position: relative; height: 8px; border-radius: 4px; background: linear-gradient(90deg, #9ECAC8 0 50%, #E2B540 50% 62.5%, #E58AA6 62.5% 100%); }
.jauge .curseur { position: absolute; top: -5px; width: 18px; height: 18px; border-radius: 9px; background: #fff; border: 3px solid currentColor; transform: translateX(-50%); }
.jauge .graduation { position: relative; height: 14px; font-size: 11px; font-weight: 700; opacity: .8; }
.jauge .graduation span { position: absolute; top: 0; } .jauge .graduation .milieu { transform: translateX(-50%); }
.montee { display: flex; align-items: flex-end; gap: 10px; height: 120px; padding: 0 6px; }
.montee > * { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 12px; color: var(--gris); font-weight: 700; }
.montee b { display: block; width: 100%; border-radius: 10px 10px 4px 4px; background: var(--accent); }
.horaires summary { cursor: pointer; list-style: none; } .horaires summary::-webkit-details-marker { display: none; }
.jours { display: flex; flex-wrap: wrap; gap: 6px; }
.message { background: var(--carte); border: 1px solid var(--trait); border-radius: 20px; padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.message .qui { display: flex; gap: 12px; align-items: center; }
.message .qui small { color: var(--gris); font-size: 13px; }
.bulle { background: var(--gris-clair); border-radius: 16px 16px 16px 4px; padding: 14px; font-size: 15px; line-height: 1.5; }
.deux { display: flex; gap: 10px; } .deux > * { flex: 1; }
.bouton.clair { background: var(--carte); color: var(--encre); border: 1px solid var(--trait); }
.bouton.clair:hover { background: var(--gris-clair); color: var(--encre); }
/* Bloc 2 : le corps de l'écran, le fil des étapes (ordinateur), les cartes à choisir, les messages de l'aperçu. */
.ecran > .corps { flex: 1; display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.fil { display: none; }
.tete { display: flex; flex-direction: column; gap: 6px; padding-top: 8px; }
.pile { flex: 1; display: flex; flex-direction: column; gap: 14px; }
.choix { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 16px 16px 16px 50px; border: 1.5px solid var(--trait);
  border-radius: 18px; background: var(--carte); cursor: pointer; }
.choix > input { position: absolute; left: 18px; top: 19px; width: 20px; height: 20px; margin: 0; accent-color: var(--accent); }
.choix:has(> input:checked) { border-color: var(--accent); background: var(--accent-clair); }
.choix-tete { display: flex; align-items: center; gap: 8px; font-size: 16px; }
.badge { font-size: 12px; font-weight: 800; color: var(--accent-fonce); background: var(--carte); border: 1px solid var(--accent-clair);
  border-radius: 10px; padding: 2px 8px; }
.choix .montee { height: 96px; padding: 4px 0 0; }
.perso { display: none; flex-direction: column; gap: 12px; }
.pile:has(input[value=own]:checked) .perso { display: flex; }
.message .qui > div:nth-child(2) { display: flex; flex-direction: column; min-width: 0; }
.etat { margin-left: auto; flex-shrink: 0; font-size: 12px; font-weight: 800; padding: 4px 10px; border-radius: 10px;
  background: var(--ambre-fond); color: var(--ambre-encre); }
.etat.vu { background: var(--accent-clair); color: var(--accent-fonce); }
.bouton.petit { height: 44px; font-size: 15px; }
.corriger summary { cursor: pointer; list-style: none; font-weight: 700; color: var(--accent); font-size: 15px; padding: 4px 0; }
.corriger summary::-webkit-details-marker { display: none; }
.corriger[open] { display: flex; flex-direction: column; gap: 10px; }
.reglages { display: grid; gap: 12px; }
.reglage { display: flex; justify-content: space-between; align-items: center; gap: 12px; background: var(--carte);
  border: 1px solid var(--trait); border-radius: 16px; padding: 14px 16px; }
.reglage > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.reglage b { font-size: 14px; } .reglage span { font-size: 14px; color: var(--gris); overflow-wrap: anywhere; }
/* S6, l'appli (maquette validée le 30/10) : Aujourd'hui, Fil, Prospects, barre d'onglets. */
.ecran.app { padding-bottom: 96px; }
.petit-gris { font-size: 13px; font-weight: 600; color: var(--gris); }
.droite { margin-left: auto; }
.tete-jour { display: flex; flex-direction: column; gap: 2px; }
.objectif { display: flex; align-items: center; gap: 8px; padding-top: 4px; font-size: 13px; font-weight: 700; color: var(--gris); }
.objectif b { color: var(--accent); font-weight: 800; }
.barres { display: flex; gap: 4px; } .barres i { width: 28px; height: 6px; border-radius: 3px; background: var(--trait); display: block; }
.barres i.plein { background: var(--accent); }
.etat-linkedin { display: flex; align-items: center; gap: 10px; background: var(--carte); border: 1px solid var(--trait); border-radius: 14px;
  padding: 8px 14px; font-size: 13px; font-weight: 600; }
.etat-linkedin .point { width: 10px; height: 10px; border-radius: 5px; background: var(--accent); }
.etat-linkedin .droite { font-size: 12px; color: var(--gris); font-weight: 600; }
.notice { font-weight: 700; color: var(--accent-fonce); }
.bloc { display: flex; flex-direction: column; gap: 10px; }
.titre-section { display: flex; align-items: baseline; gap: 8px; }
.titre-section h2 { margin: 0; font-size: 18px; font-weight: 800; }
.compte { font-size: 14px; font-weight: 800; background: var(--trait); border-radius: 10px; padding: 1px 8px; }
.compte.alerte { background: var(--alerte); color: #fff; }
.ligne-fil { display: flex; align-items: center; gap: 12px; background: var(--carte); border: 1px solid var(--trait); border-radius: 16px;
  padding: 12px 14px; color: var(--encre); font-weight: 400; }
.ligne-fil:hover { color: var(--encre); border-color: var(--accent); }
.ligne-fil .milieu, .tete-fil .milieu { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.ligne-fil .milieu b, .tete-fil .milieu b { font-size: 15px; }
.ligne-fil .milieu span, .tete-fil .milieu span { font-size: 13px; color: var(--gris); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ligne-fil .quand { font-size: 12px; color: var(--gris); flex-shrink: 0; }
.rond.ambre { width: 44px; height: 44px; border-radius: 22px; background: var(--ambre-fond); color: var(--ambre-encre); font-size: 14px; }
.departs { gap: 12px; padding: 14px; }
.departs .trois { display: flex; justify-content: space-between; }
.departs .trois > div { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.departs .trois b { font-size: 22px; font-weight: 800; } .departs .trois span { font-size: 12px; color: var(--gris); font-weight: 600; }
.departs .trois i { width: 1px; background: var(--trait); }
.departs > a { text-align: center; font-size: 14px; padding: 4px; }
.statut { font-size: 11px; font-weight: 800; border-radius: 10px; padding: 4px 9px; flex-shrink: 0; white-space: nowrap;
  background: var(--gris-clair); color: var(--gris); }
.statut.discussion { background: #E9EFF6; color: #35598F; } .statut.cale { background: var(--accent-clair); color: var(--accent-fonce); }
.statut.attente { background: var(--ambre-fond); color: var(--ambre-encre); } .statut.refus { background: #FDE8E0; color: #9A3412; }
.statut.client { background: var(--accent); color: #fff; }
.tete-fil { display: flex; align-items: center; gap: 10px; }
.tete-fil .retour { width: 40px; height: 44px; display: flex; align-items: center; justify-content: center; color: var(--encre); }
.conversation { display: flex; flex-direction: column; gap: 10px; }
.bulle-nous, .bulle-eux { max-width: 85%; padding: 12px 14px; font-size: 14px; line-height: 1.45; }
.bulle-nous { align-self: flex-end; background: var(--trait); border-radius: 18px 18px 4px 18px; }
.bulle-eux { align-self: flex-start; background: var(--carte); border: 1px solid var(--trait); border-radius: 18px 18px 18px 4px; }
.bandeau-main { display: flex; align-items: center; gap: 8px; background: var(--ambre-fond); color: var(--ambre-encre); border-radius: 12px;
  padding: 8px 10px; font-size: 12px; line-height: 1.35; }
.point-ambre { width: 8px; height: 8px; border-radius: 4px; background: var(--ambre); flex-shrink: 0; }
.brouillon { background: var(--carte); border: 1.5px solid var(--accent); border-radius: 20px; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.brouillon-tete { display: flex; align-items: center; gap: 8px; } .brouillon-tete b { font-size: 13px; color: var(--accent); }
.brouillon-tete span { font-size: 12px; color: var(--gris); }
.texte-brouillon { margin: 0; font-size: 15px; line-height: 1.5; }
.puces-variantes { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .puces-variantes span { font-size: 12px; color: var(--gris); font-weight: 700; }
.variante { height: 30px; padding: 0 10px; border: 1px solid var(--trait); border-radius: 15px; background: var(--carte); color: var(--encre);
  font-weight: 700; font-size: 12px; cursor: pointer; }
.variante.choisie { border-color: var(--accent); background: var(--accent-clair); color: var(--accent-fonce); }
.replie { padding: 12px 16px; gap: 10px; } .replie summary { cursor: pointer; font-weight: 700; list-style: none; }
.replie summary::-webkit-details-marker { display: none; }
.regle { gap: 8px; border-color: var(--accent); } .regle span { font-size: 14px; }
.liens-fil { display: flex; justify-content: space-between; align-items: center; padding: 0 4px; font-size: 13px; }
.liens-fil a { color: var(--gris); }
.lien-alerte { background: none; border: 0; color: var(--alerte); font-weight: 700; font-size: 13px; cursor: pointer; padding: 8px 0; }
.recherche { display: flex; align-items: center; gap: 10px; height: 48px; border-radius: 14px; background: var(--carte); border: 1px solid var(--trait); padding: 0 14px; }
.recherche input { border: 0; height: 44px; padding: 0; background: transparent; outline: none; }
.filtres { display: flex; gap: 8px; overflow-x: auto; }
.filtre { height: 38px; padding: 0 14px; border-radius: 19px; border: 1px solid var(--trait); background: var(--carte); color: var(--encre);
  font-weight: 700; font-size: 13px; display: flex; align-items: center; white-space: nowrap; }
.filtre.choisi { background: var(--encre); border-color: var(--encre); color: #fff; }
.liste { display: flex; flex-direction: column; background: var(--carte); border: 1px solid var(--trait); border-radius: 20px; overflow: hidden; }
.liste .ligne-fil { border: 0; border-radius: 0; border-bottom: 1px solid var(--gris-clair); }
.onglets { position: fixed; left: 0; right: 0; bottom: 0; height: 76px; background: var(--carte); border-top: 1px solid var(--trait);
  display: flex; padding: 6px 8px 10px; z-index: 5; }
.onglets a { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: var(--gris);
  font-size: 11px; font-weight: 700; }
.onglets a.ici { color: var(--accent); }
.avec-micro { display: flex; gap: 8px; align-items: flex-start; } .avec-micro > input, .avec-micro > textarea { flex: 1; }
.micro { width: 48px; height: 48px; flex-shrink: 0; border-radius: 24px; border: 1px solid var(--trait); background: var(--carte);
  color: var(--accent); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.micro.ecoute { background: var(--alerte); border-color: var(--alerte); color: #fff; }
.ecran.app { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
.onglets { height: auto; padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
.texte-brouillon, .bulle-nous, .bulle-eux { overflow-wrap: anywhere; }
.jour-rdv { width: 44px; display: flex; flex-direction: column; align-items: center; flex-shrink: 0; }
.jour-rdv b { font-size: 13px; color: var(--accent); } .jour-rdv span { font-size: 12px; color: var(--gris); }
.tuiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.tuile { background: var(--carte); border: 1px solid var(--trait); border-radius: 14px; padding: 10px 6px; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.tuile b { font-size: 22px; font-weight: 800; } .tuile span { font-size: 11px; color: var(--gris); font-weight: 600; text-align: center; }
.tuile small { font-size: 11px; font-weight: 800; color: var(--gris); } .tuile small.monte { color: var(--accent); } .tuile small.baisse { color: var(--alerte); }
.ligne-taux { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; } .ligne-taux span { font-size: 14px; } .ligne-taux b { font-size: 15px; }
.ligne-taux small { grid-column: 1 / -1; font-size: 12px; color: var(--gris); }
.grand-chiffre { font-size: 40px; font-weight: 800; color: var(--accent); }
.avant-apres { gap: 6px; } .avant { text-decoration: line-through; color: var(--gris); font-size: 13px; } .apres { font-size: 14px; }
.etat-alerte { background: #FDEDE6; border-radius: 16px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.etat-alerte p { margin: 0; font-size: 14px; font-weight: 600; color: var(--alerte); }
/* Ordinateur : une carte centrée ; les écrans à étapes s'ouvrent en deux colonnes, le fil des 10 étapes à gauche. */
@media (min-width: 900px) {
  body { padding: 56px 24px; }
  .ecran { max-width: 540px; min-height: 0; background: var(--carte); border: 1px solid var(--trait); border-radius: 28px;
    padding: 40px 44px 32px; box-shadow: 0 16px 48px rgba(18, 53, 78, .07); }
  .ecran.large { max-width: 860px; }
  .ecran.a-etapes { max-width: 1000px; flex-direction: row; gap: 48px; padding: 40px 48px; }
  .a-etapes .fil { display: flex; flex-direction: column; gap: 28px; width: 200px; flex-shrink: 0; padding-right: 32px;
    border-right: 1px solid var(--trait); }
  .a-etapes .etapes { display: none; }
  .fil ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; counter-reset: etape; }
  .fil li { counter-increment: etape; display: flex; align-items: center; gap: 12px; padding: 6px 0; font-size: 15px;
    font-weight: 600; color: var(--gris); }
  .fil li::before { content: counter(etape); width: 26px; height: 26px; flex-shrink: 0; border-radius: 13px; border: 2px solid var(--trait);
    display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; color: var(--gris); }
  .fil li.fait { color: var(--encre); }
  .fil li.fait::before { content: "✓"; background: var(--accent); border-color: var(--accent); color: #fff; }
  .fil li.ici { color: var(--encre); font-weight: 800; }
  .fil li.ici::before { border-color: var(--accent); color: var(--accent); }
  .ecran .carte, .ecran .message, .ecran .reglage { background: var(--fond); }
  .ecran .choix { background: var(--carte); }
  .ecran .choix:has(> input:checked) { background: var(--accent-clair); }
  .ecran .vide { flex: 0 0 4px; }
  .reglages { grid-template-columns: 1fr 1fr; }
  .ecran.app { max-width: 720px; padding-bottom: 32px; }
  .onglets { position: static; border: 1px solid var(--trait); border-radius: 18px; margin-top: 8px; }
  h1 { font-size: 32px; }
}