/* Site SecretarIA · l'accueil, chargé seulement sur cette page (outils/pages/accueil.tete.html).
   Héros (le téléphone du professionnel), métiers (dessins de personnages.css), parcours d'un appel, transparence sur l'IA,
   liens vers les pages. Tout est lisible au repos : les animations partent d'un état visible. */

/* ---- héros ---- */
.heros .titre{font-size:clamp(2.3rem,4.6vw,4rem)}
@media (min-width:901px){.heros .heros-grille{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr)}}
.heros .titre .deg{white-space:nowrap}
.garanties{list-style:none;display:flex;flex-wrap:wrap;gap:10px 22px;margin:26px 0 0;padding:0;font-size:.92rem;color:var(--texte-2)}
.garanties li{display:inline-flex;align-items:center;gap:9px}
.garanties li::before{content:"";flex:none;width:18px;height:18px;border-radius:50%;border:1px solid rgba(59,227,160,.45);
  background:rgba(59,227,160,.12) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.6 6.3l2.2 2.2 4.6-4.9' fill='none' stroke='%233BE3A0' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/11px no-repeat}

/* Le téléphone : écran verrouillé, notifications empilées dans l'ordre de l'histoire. */
.poche{margin:0;justify-self:center;width:min(100%,370px);display:grid;gap:14px}
.poche-ecran{position:relative;padding:34px 14px 16px;border-radius:40px;
  background:radial-gradient(130% 55% at 50% 0%,rgba(11,108,245,.38),transparent 72%),linear-gradient(172deg,#0D1A40,#050A1A 78%);
  border:1px solid var(--trait-fort);box-shadow:inset 0 0 0 7px rgba(3,6,15,.75),0 46px 110px -46px rgba(11,108,245,.85)}
.poche-ecran::before{content:"";position:absolute;top:15px;left:50%;width:88px;height:22px;margin-left:-44px;border-radius:12px;background:#02050D}
.poche-heure{display:grid;justify-items:center;gap:6px;margin:14px 0 20px}
.poche-heure span{font:600 clamp(2.6rem,6vw,3.3rem)/1 var(--f-titre);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.poche-heure small{font:500 .66rem/1.2 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--texte-2);text-align:center}
.poche-fil{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.pn{display:flex;align-items:flex-start;gap:11px;padding:11px 12px;border-radius:18px;background:rgba(234,240,255,.075);border:1px solid rgba(234,240,255,.09);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);transition:opacity .45s,transform .5s cubic-bezier(.2,.9,.3,1.15)}
.pn-ic{flex:none;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;font:700 .78rem/1 var(--f-titre);font-style:normal;color:#04121F}
.pn-ic svg{width:15px;height:15px}
.pn-a .pn-ic{background:var(--ok)}
.pn-b .pn-ic{background:var(--cyan)}
.pn-c .pn-ic{background:var(--ok)}
.pn-d .pn-ic{background:#EAF0FF}
.pn > span{display:grid;gap:2px;min-width:0}
.pn b{font:600 .86rem/1.25 var(--f-corps)}
.pn small{font-size:.78rem;line-height:1.35;color:var(--texte-2);min-height:2.7em}
/* En mouvement (accueil.js) : les notifications arrivent une à une ; la première sonne tant que Léa n'a pas décroché. */
.poche.anime .pn{opacity:0;transform:translateY(12px) scale(.97)}
.poche.anime .pn.vu{opacity:1;transform:none}
.poche .pn-a.sonne .pn-ic{animation:accueil-sonne .9s ease-in-out infinite}
@keyframes accueil-sonne{0%,100%{box-shadow:0 0 0 0 rgba(59,227,160,.55)}60%{box-shadow:0 0 0 9px rgba(59,227,160,0)}}
.poche-heure span,.poche-heure small{transition:opacity .4s}
.poche.change .poche-heure span,.poche.change .poche-heure small{opacity:0}
.poche figcaption{font:500 .64rem/1.5 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--texte-2);text-align:center}

/* Le bandeau des moments où l'on ne peut pas répondre */
.defile span{font-size:clamp(1.2rem,2.8vw,2.2rem)}

/* ---- métiers ---- */
.metier[data-i="0"]{--teinte:#FFC857}
.metier[data-i="1"]{--teinte:#D9E021}
.metier[data-i="2"]{--teinte:#3BE3A0}
.metier[data-i="3"]{--teinte:#22D3FB}
.metiers-grille{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.metier{display:grid;grid-template-rows:auto 1fr;border-radius:26px;overflow:hidden;background:var(--verre);border:1px solid var(--trait);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);transition:border-color .3s,box-shadow .3s}
.metier:hover,.metier:focus-within{border-color:var(--trait-fort);box-shadow:0 34px 80px -46px rgba(11,108,245,.9)}
.metier .soulage{padding:14px 14px 0}
.metier .sl-cadre{border-radius:18px}
.metier-texte{display:grid;align-content:start;gap:12px;padding:18px 22px 22px}
.metier-qui{font:500 .68rem/1.3 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--teinte)}
.metier h3{font:700 clamp(1.12rem,1.8vw,1.4rem)/1.25 var(--f-titre);letter-spacing:-.01em}
.metier-avant{color:var(--texte-2);font-size:.95rem}
.metier-apres{font-size:.95rem;padding:12px 14px;border-radius:14px;background:rgba(59,227,160,.07);border:1px solid rgba(59,227,160,.22)}
.metier-apres b{display:block;margin-bottom:4px;font:500 .64rem/1.3 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ok)}
.metier-pied{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px 16px;padding-top:14px;border-top:1px solid var(--trait);font-size:.9rem}
.metier-produit{display:inline-flex;align-items:center;gap:9px;font-weight:600}
.metier-produit em{font:500 .6rem/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;font-style:normal;padding:4px 7px;border-radius:6px;color:var(--texte-2);border:1px solid var(--trait)}
.metier-produit em.dispo{color:var(--ok);border-color:rgba(59,227,160,.45)}
.metier-pied a{color:var(--cyan);text-decoration:none;font-weight:600}
.metiers .routeur{margin-top:28px}
@media (max-width:860px){.metiers-grille{grid-template-columns:1fr}}
@media (max-width:520px){
  .metier .soulage{padding:10px 10px 0}
  .metier-texte{padding:16px 16px 18px}
  .metier .sl-notif{width:58%;padding:5px 7px}
  .metier .sl-notif b{font-size:.68rem}
  .metier .sl-notif small{font-size:.56rem}
  .metier .sl-notif .ic{width:17px;height:17px}
  .metier .sl-bulle{font-size:.62rem;padding:5px 8px;max-width:34%}
}

/* ---- parcours d'un appel ---- */
.parcours{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.parcours li{display:grid;align-content:start;gap:12px;padding:22px;border-radius:24px;background:var(--verre);border:1px solid var(--trait);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.parcours-n{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font:500 .8rem/1 var(--f-mono);color:#03102A;background:linear-gradient(135deg,var(--cyan),var(--bleu))}
.parcours h3{font:700 1.08rem/1.3 var(--f-titre)}
.parcours p{color:var(--texte-2);font-size:.93rem}
.parcours-visuel{min-height:96px;display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:16px;background:rgba(3,8,22,.62);border:1px solid var(--trait)}
.parcours-visuel span{display:grid;gap:3px;min-width:0}
.parcours-visuel b{font:600 .88rem/1.25 var(--f-corps)}
.parcours-visuel small{font-size:.8rem;line-height:1.4;color:var(--texte-2)}
.v-tel{position:relative;flex:none;width:44px;height:44px;border-radius:50%;display:grid!important;place-items:center;background:var(--ok)}
.v-tel svg{width:19px;height:19px}
.v-tel::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:1px solid rgba(59,227,160,.7);animation:accueil-onde 1.6s ease-out infinite}
@keyframes accueil-onde{0%{transform:scale(.85);opacity:1}100%{transform:scale(1.35);opacity:0}}
.v-eq{flex:none;display:flex!important;align-items:center;gap:3px;height:34px}
.v-eq i{width:4px;height:100%;border-radius:2px;background:var(--cyan);transform-origin:center;animation:accueil-eq .5s ease-in-out infinite alternate}
.v-eq i:nth-child(2){animation-delay:.12s}.v-eq i:nth-child(3){animation-delay:.24s}.v-eq i:nth-child(4){animation-delay:.06s}.v-eq i:nth-child(5){animation-delay:.18s}
@keyframes accueil-eq{from{transform:scaleY(.3)}to{transform:scaleY(1)}}
.v-lea q{font-size:.86rem;line-height:1.45;font-style:italic;color:var(--texte);quotes:"«\00a0" "\00a0»"}
.v-resume{border-left:2px solid var(--ok)}
.v-resume b{font:500 .66rem/1.3 var(--f-mono)!important;letter-spacing:.12em;text-transform:uppercase;color:var(--ok)}
.lien-suite{display:inline-flex;align-items:center;gap:8px;margin-top:26px;color:var(--cyan);font-weight:600;text-decoration:none}
@media (max-width:900px){.parcours{grid-template-columns:1fr}}

/* ---- transparence ---- */
.garde-fous{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.garde{display:grid;align-content:start;gap:10px;padding:24px;border-radius:24px;background:var(--verre);border:1px solid var(--trait);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.garde-n{font:500 .66rem/1.3 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--cyan)}
.garde h3{font:700 1.12rem/1.3 var(--f-titre)}
.garde p{color:var(--texte-2);font-size:.93rem}
.garde-annonce{grid-column:span 2;background:linear-gradient(160deg,rgba(11,108,245,.28),rgba(6,12,30,.86));border-color:var(--trait-fort)}
.garde-annonce h3{font-size:clamp(1.3rem,2.2vw,1.7rem)}
.garde blockquote{margin:6px 0 0;padding:14px 18px;border-radius:16px;background:rgba(3,8,22,.62);border-left:2px solid var(--cyan);font-size:.95rem;line-height:1.5;font-style:italic;color:var(--texte)}
.garde-equipe{grid-column:1/-1;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:18px 32px}
.garde-equipe > div{display:grid;gap:10px}
.garde-pied{display:flex;align-items:center;gap:22px}
.garde-pied a{color:var(--cyan);text-decoration:none;font-weight:600;white-space:nowrap}
@media (max-width:980px){.garde-fous{grid-template-columns:repeat(2,minmax(0,1fr))}.garde-annonce{grid-column:1/-1}}
@media (max-width:640px){.garde-fous,.garde-equipe{grid-template-columns:minmax(0,1fr)}.garde-pied{flex-wrap:wrap;gap:14px 22px}.garde-pied .trio i{width:44px;height:44px;margin-left:-11px}.garde-pied .trio i:first-child{margin-left:0}}

/* ---- aller plus loin ---- */
.plus-loin{padding-top:0}
.liens-pages{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:22px}
.liens-pages a{position:relative;display:grid;gap:4px;padding:18px 46px 18px 20px;border-radius:18px;text-decoration:none;background:var(--verre);border:1px solid var(--trait);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:border-color .3s,transform .3s}
.liens-pages a:hover{border-color:var(--trait-fort);transform:translateY(-2px)}
.liens-pages b{font:600 1rem/1.3 var(--f-corps)}
.liens-pages span{font-size:.86rem;color:var(--texte-2)}
.liens-pages .fl{position:absolute;right:18px;top:50%;margin-top:-.7em;font-style:normal;color:var(--cyan)}
.liens-pages a.lim{background:radial-gradient(120% 140% at 100% 0%,rgba(241,90,36,.2),transparent 60%),var(--verre)}
.liens-pages a.lim .fl{color:var(--o1)}
@media (max-width:860px){.liens-pages{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:540px){.liens-pages{grid-template-columns:1fr}}

/* ---- le visage de Léa : notification du téléphone, étape 2 du parcours, annonce de la transparence ---- */
.pn .pn-visage{padding:2px;border-radius:50%;background:var(--cyan)}
.pn-visage img{display:block;width:100%;height:100%;border-radius:50%;object-fit:cover}
.v-visage{flex:none;width:42px;height:42px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px rgba(34,211,251,.55)}
.garde blockquote.avec-visage{display:flex;align-items:flex-start;gap:14px}
.avec-visage img{flex:none;width:40px;height:40px;margin-top:2px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px rgba(34,211,251,.5)}