/* Page « Professionnels » (entreprises.html). Elle est bâtie sur l'accueil : l'ouverture avec la vidéo, le sélecteur Particuliers / Professionnels, les deux
   sections « protéger l'argent » et « protéger bien plus » viennent de landing.css. Ici, seulement ce qui est propre à cette page : le bandeau des
   partenaires, les cartes de l'offre et la section « Devenir partenaire » avec son formulaire. */

.pro {
  --p1: #19143e; --p3: #42377a; --p4: #5e5398; --p5: #736fb6;
  --alerte: #d2264f; --vert: #1f8a5b;
}
.pro [hidden] { display: none !important; }

/* ================================================================== Ouverture */
.hero--pro .hero__title { font-size: clamp(30px, 4.2vw, 54px); max-width: 1200px; }
/* Le texte d'ouverture est toujours plus étroit que le titre : sa plus longue ligne reste sous la seconde ligne du titre, à toutes les largeurs. */
.hero--pro .hero__lede { max-width: min(600px, 60vw); text-wrap: balance; }

/* « La protection SentinelleFin, au service de vos clients » : une ligne d'explication, puis les cinq familles de partenaires dans la bande de verre. */
.hero__publics { position: relative; z-index: 1; width: min(1260px, calc(100% - 2 * var(--pad, 24px))); margin: 0 auto 36px; display: grid; gap: 14px; justify-items: center; }
.hero__publics-titre { margin: 0; padding: 0 12px; text-align: center; font-size: 14.5px; font-weight: 600; letter-spacing: -.1px; color: rgba(255, 255, 255, .94); text-shadow: 0 1px 14px rgba(14, 10, 38, .5); }
.hero__publics .hero__bande { width: 100%; margin: 0; }
.hero__bande--cinq { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.hero__bande--cinq li { justify-content: center; text-align: center; }
.hero__bande--cinq b { font-size: 14px; }

/* ================================================================== L'offre : cinq cartes et une conclusion */
.pro-offre { position: relative; padding: clamp(84px, 9vw, 132px) 24px clamp(84px, 9vw, 124px); background: var(--surface-pearl, #f6f5fa); }
.pro-offre__tete { max-width: 840px; margin: 0 auto clamp(44px, 5vw, 68px); text-align: center; }
.pro-offre .eyebrow { color: var(--p4); }
.pro-offre__titre { margin: 14px 0 0; font-family: var(--font-display); font-size: clamp(34px, 4.6vw, 58px); font-weight: var(--text-hero-weight, 600); line-height: 1.08; letter-spacing: var(--text-hero-ls, -.03em); color: var(--p1); text-wrap: balance; }
.pro-offre__lede { margin: 22px auto 0; max-width: 700px; font-size: 18px; line-height: 1.6; color: #4a4668; text-wrap: pretty; }

.pro-grille { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 20px; }
.pro-tuile {
  position: relative; display: flex; flex-direction: column; overflow: hidden; border-radius: 28px; background: #fff;
  box-shadow: 0 0 0 1px rgba(66, 55, 122, .08), 0 22px 50px -32px rgba(45, 33, 92, .42);
  transition: transform .35s cubic-bezier(.16, 1, .3, 1), box-shadow .35s ease;
}
.pro-tuile:hover { transform: translateY(-4px); box-shadow: 0 0 0 1px rgba(66, 55, 122, .14), 0 34px 64px -34px rgba(45, 33, 92, .55); }
.pro-tuile__tete { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 28px 28px 0; }
.pro-tuile__titre { margin: 0; font-family: var(--font-display); font-size: 22px; font-weight: 600; line-height: 1.22; letter-spacing: -.015em; color: var(--p1); text-wrap: balance; }
.pro-tuile__fleche { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; background: var(--action-tint, #ece9fb); color: var(--p3); transition: background .25s ease, color .25s ease, transform .25s ease; }
.pro-tuile__fleche:hover { background: var(--p4); color: #fff; transform: translateX(2px); text-decoration: none; }
.pro-tuile__fleche:focus-visible { outline: 3px solid var(--p4); outline-offset: 3px; }
.pro-tuile__texte { margin: 12px 0 0; padding: 0 28px; max-width: none; font-size: 15.5px; line-height: 1.58; color: #4a4668; text-wrap: pretty; }

/* La conclusion : une carte large au dégradé de la marque. */
.pro-tuile--duree {
  grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; gap: 32px 48px; padding: clamp(32px, 4vw, 52px) clamp(28px, 4vw, 56px);
  color: #fff; background: radial-gradient(56% 90% at 12% 0%, rgba(255, 255, 255, .14) 0%, rgba(255, 255, 255, 0) 100%), var(--degrade-marque, linear-gradient(150deg, #42377a, #5e5398 42%, #6862ab));
}
.pro-duree__titre { margin: 0; max-width: 20ch; font-family: var(--font-display); font-size: clamp(28px, 3.4vw, 42px); font-weight: 600; line-height: 1.12; letter-spacing: -.02em; text-wrap: balance; }
.pro-duree__lede { margin: 16px 0 0; max-width: 60ch; font-size: 16.5px; line-height: 1.6; color: rgba(255, 255, 255, .86); }
.pro-tuile--duree .btn { flex: none; }

/* ================================================================== Devenir partenaire */
.partenaire { position: relative; padding: clamp(84px, 9vw, 132px) 24px; scroll-margin-top: 20px; }

.pro-form__grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 16px; }
.pro-champ { min-width: 0; }
.pro-champ--large { grid-column: 1 / -1; }
.pro-champ label { display: block; margin-bottom: 7px; font-size: 14px; font-weight: 600; color: var(--p1); }
.pro-champ label small { font-weight: 400; color: #8b87a0; }
.pro-champ input, .pro-champ select, .pro-champ textarea {
  display: block; width: 100%; min-height: 52px; padding: 13px 16px; border: 0; border-radius: 14px; background: #f3f1fa; font: inherit; font-size: 16px; color: var(--ink, #1d1d1f);
  box-shadow: inset 0 0 0 1.5px transparent; transition: box-shadow .2s ease, background .2s ease;
}
.pro-champ textarea { min-height: 120px; resize: vertical; line-height: 1.5; }
.pro-champ select { appearance: none; -webkit-appearance: none; padding-right: 44px; cursor: pointer; background: #f3f1fa url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m5 8 5 5 5-5' fill='none' stroke='%2342377a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 16px center / 18px no-repeat; }
.pro-champ input:hover, .pro-champ select:hover, .pro-champ textarea:hover { background-color: #eeebf8; }
.pro-champ input:focus, .pro-champ select:focus, .pro-champ textarea:focus { outline: 0; background-color: #fff; box-shadow: inset 0 0 0 2px var(--p4), 0 0 0 5px rgba(94, 83, 152, .16); }
.pro-champ select:invalid { color: #6b6788; }
.pro-champ.is-erreur input, .pro-champ.is-erreur select { box-shadow: inset 0 0 0 2px var(--alerte); background-color: #fff8fa; }
.pro-champ__erreur { margin: 7px 0 0; font-size: 13.5px; line-height: 1.4; color: #b01f45; }
.pro-piege { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.pro-consent { margin-top: 22px; }
.pro-case { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; }
.pro-case input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pro-case__boite { flex: none; display: grid; place-items: center; width: 24px; height: 24px; margin-top: 1px; border-radius: 8px; background: #f3f1fa; box-shadow: inset 0 0 0 1.5px #c9c3e4; color: transparent; transition: background .2s ease, color .2s ease, box-shadow .2s ease, transform .2s ease; }
.pro-case:hover .pro-case__boite { box-shadow: inset 0 0 0 1.5px var(--p4); }
.pro-case input:checked + .pro-case__boite { background: var(--p3); color: #fff; box-shadow: none; transform: scale(1.04); }
.pro-case input:focus-visible + .pro-case__boite { outline: 3px solid var(--p4); outline-offset: 3px; }
.pro-case.is-erreur .pro-case__boite { box-shadow: inset 0 0 0 2px var(--alerte); }
.pro-case__texte { font-size: 14px; line-height: 1.5; color: #4a4668; }
.pro-case__texte a { color: var(--p3); font-weight: 600; }

.pro-form__alerte { margin: 18px 0 0; padding: 12px 16px; border-radius: 14px; background: #fdeef2; font-size: 14.5px; line-height: 1.45; color: #8f1a3a; }
.pro-form__alerte a { color: inherit; font-weight: 600; }
.pro-envoyer {
  position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 58px; margin-top: 22px; padding: 0 28px; border: 0; border-radius: 999px;
  background: linear-gradient(135deg, var(--p3), var(--p4)); color: #fff; font: inherit; font-size: 17px; font-weight: 600; cursor: pointer;
  box-shadow: 0 18px 34px -16px rgba(66, 55, 122, .8); transition: transform .2s ease, box-shadow .25s ease, filter .2s ease;
}
.pro-envoyer:hover { transform: translateY(-2px); box-shadow: 0 24px 40px -16px rgba(66, 55, 122, .9); filter: brightness(1.06); }
.pro-envoyer:active { transform: scale(.98); }
.pro-envoyer:focus-visible { outline: 3px solid var(--p4); outline-offset: 4px; }
.pro-envoyer[aria-busy="true"] { pointer-events: none; filter: saturate(.7); }
.pro-envoyer__roue { display: none; width: 20px; height: 20px; border-radius: 50%; border: 2.5px solid rgba(255, 255, 255, .35); border-top-color: #fff; animation: pro-tourne .8s linear infinite; }
.pro-envoyer[aria-busy="true"] .pro-envoyer__roue { display: block; }
@keyframes pro-tourne { to { transform: rotate(360deg); } }

.pro-merci { display: grid; justify-items: center; gap: 10px; padding: clamp(24px, 4vw, 52px) 8px; text-align: center; }
.pro-merci:focus { outline: 0; }
.pro-merci__coche { color: var(--vert); }
.pro-merci__rond { stroke-dasharray: 190; stroke-dashoffset: 190; }
.pro-merci__trait { stroke-dasharray: 50; stroke-dashoffset: 50; }
.pro-merci.is-visible .pro-merci__rond { animation: pro-trace-rond .9s cubic-bezier(.65, 0, .35, 1) forwards; }
.pro-merci.is-visible .pro-merci__trait { animation: pro-trace .5s ease .7s forwards; }
@keyframes pro-trace-rond { to { stroke-dashoffset: 0; } }
@keyframes pro-trace { to { stroke-dashoffset: 0; } }
.pro-merci h3 { margin: 12px 0 0; font-family: var(--font-display); font-size: 26px; font-weight: 600; line-height: 1.2; color: var(--p1); text-wrap: balance; }
.pro-merci p { margin: 0; max-width: 36ch; font-size: 16px; line-height: 1.55; color: #4a4668; }

/* ================================================================== Écrans étroits */
@media (max-width: 1020px) {
  .partenaire__in { grid-template-columns: 1fr; }
  .partenaire__lede { max-width: 56ch; }
}
@media (max-width: 900px) {
  /* Cinq familles sur un petit écran : des pastilles centrées qui passent à la ligne, sans filets qui se croisent. */
  .hero__publics { gap: 12px; margin-bottom: 24px; }
  .hero__publics .hero__bande--cinq { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 12px 10px; border-radius: 22px; }
  .hero__bande--cinq li, .hero__bande--cinq li + li, .hero__bande--cinq li:nth-child(n) {
    box-shadow: none; padding: 9px 16px 9px 13px; gap: 9px; border-radius: 999px; background: rgba(255, 255, 255, .13);
  }
  .hero__bande--cinq svg { width: 20px; height: 20px; }
  .hero__bande--cinq b { font-size: 13.5px; white-space: nowrap; }
}
@media (max-width: 760px) {
  .pro-grille { gap: 16px; }
  .pro-tuile--duree { flex-direction: column; align-items: flex-start; }
  .pro-form__grille { grid-template-columns: 1fr; }
  .pro-tuile__tete { padding: 24px 22px 0; }
  .pro-tuile__texte { padding: 0 22px; }
}

/* ================================================================== Moins de mouvement */
@media (prefers-reduced-motion: reduce) {
  .pro *, .pro *::before, .pro *::after { animation: none !important; transition: none !important; }
  .pro-merci__rond, .pro-merci__trait { stroke-dashoffset: 0; }
}

/* ================================================================== Ouverture teintée de la couleur de la marque */
/* Pour les professionnels, la vidéo prend une teinte bleu-violet : la lumière de l'image est gardée, la couleur est celle de la marque. */
.hero--pro .hero__veil--2 {
  /* Une teinte posée par-dessus (pas un remplacement des couleurs) : on garde le vert des feuillages, le beige des murs et les peaux de la vidéo. */
  background:
    radial-gradient(ellipse 62% 52% at 50% 46%, rgba(25, 20, 62, .34) 0%, rgba(25, 20, 62, 0) 100%),
    linear-gradient(160deg, rgba(58, 47, 134, .5) 0%, rgba(94, 83, 152, .36) 50%, rgba(122, 111, 208, .4) 100%);
}
.hero--pro .hero__veil--1 {
  background: linear-gradient(180deg,
    rgba(28, 22, 78, .62) 0%,
    rgba(40, 32, 104, .34) 30%,
    rgba(40, 32, 104, .36) 62%,
    rgba(25, 20, 62, .80) 100%);
}
/* Le bouton de l'ouverture reste lisible sur le fond teinté. */
.hero--pro .hero__cta .btn--action { background: #fff; color: var(--p3); }
.hero--pro .hero__cta .btn--action:hover { background: #ece9fb; }
.hero--pro .hero__cta .btn__fleche { background: var(--p3); color: #fff; }

/* Téléphone : trois lignes pour le titre professionnel (voir landing.css pour la taille). */
@media (max-width: 700px) {
  .hero--pro .hero__title { font-size: clamp(20px, 6.1vw, 32px); }
}

/* ================================================================== Page « Devenir partenaire » (le formulaire, seul) */
.partenaire--page { min-height: 100vh; min-height: 100svh; padding-top: clamp(130px, 14vw, 180px); }

/* ================================================================== Page « Devenir partenaire » : deux cartes, puis le déroulé et les questions */
.partenaire--page { min-height: 0; padding: clamp(120px, 12vw, 160px) 24px clamp(64px, 7vw, 100px); overflow: hidden; }
/* Un grand disque de lumière derrière les deux cartes. */
.partenaire--page::before {
  content: ""; position: absolute; left: 50%; top: -8%; width: min(1280px, 150vw); aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255, 255, 255, .17) 0%, rgba(255, 255, 255, .06) 46%, rgba(255, 255, 255, 0) 68%);
}
.pdm { position: relative; max-width: 1240px; margin: 0 auto; }
.pdm__retour { display: inline-block; margin: 0 0 22px 4px; color: rgba(255, 255, 255, .88); font-size: 14.5px; font-weight: 600; text-decoration: none; }
.pdm__retour:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.pdm__retour:focus-visible { outline: 3px solid #fff; outline-offset: 4px; border-radius: 4px; }
.pdm__grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.pdm__carte { position: relative; border-radius: 28px; padding: clamp(26px, 3.4vw, 48px); }
.pdm__carte--form { background: #fff; color: var(--ink, #1d1d1f); box-shadow: 0 40px 90px -34px rgba(5, 2, 28, .7); }
.pdm__titre { margin: 0; font-family: var(--font-display); font-size: clamp(28px, 3vw, 38px); font-weight: 600; line-height: 1.1; letter-spacing: -.02em; color: var(--p1); }
.pdm__intro { margin: 14px 0 26px; max-width: 52ch; font-size: 15.5px; line-height: 1.55; color: #4a4668; }

.pdm__carte--info {
  display: flex; flex-direction: column; color: #fff; align-self: start; position: sticky; top: 110px;
  background: radial-gradient(90% 70% at 100% 0%, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, 0) 70%), linear-gradient(160deg, rgba(255, 255, 255, .13) 0%, rgba(255, 255, 255, .06) 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .24), 0 30px 70px -36px rgba(5, 2, 28, .6);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.pdm__info-titre { margin: 0; font-family: var(--font-display); font-size: clamp(28px, 3.1vw, 42px); font-weight: var(--text-hero-weight, 600); line-height: 1.06; letter-spacing: var(--text-hero-ls, -.03em); text-wrap: balance; }
.pdm__avantages { margin: 30px 0 0; padding: 0; list-style: none; display: grid; gap: 20px; }
.pdm__avantages li { display: flex; align-items: flex-start; gap: 16px; font-size: 17px; font-weight: 600; line-height: 1.4; letter-spacing: -.1px; }
.pdm__avantages svg { flex: none; margin-top: 1px; opacity: .92; }
.pdm__sep { height: 1px; margin: 34px calc(-1 * clamp(26px, 3.4vw, 48px)) 28px; background: rgba(255, 255, 255, .24); }
.pdm__attendre-titre { margin: 0; font-size: 18px; font-weight: 600; letter-spacing: -.1px; }
.pdm__coches { margin: 18px 0 0; padding: 0; list-style: none; display: grid; gap: 14px; }
.pdm__coches li { display: flex; align-items: flex-start; gap: 14px; font-size: 15.5px; line-height: 1.5; color: rgba(255, 255, 255, .92); }
.pdm__coche { flex: none; display: grid; place-items: center; width: 24px; height: 24px; margin-top: -1px; border-radius: 50%; background: rgba(255, 255, 255, .16); }

/* Sous les cartes : le déroulé d'un partenariat, les questions fréquentes, un dernier mot */
.pdm-bas { padding: clamp(72px, 8vw, 116px) 24px clamp(40px, 5vw, 64px); background: var(--surface-pearl, #f6f5fa); }
.pdm-bas__tete { max-width: 760px; margin: 0 auto clamp(40px, 5vw, 60px); text-align: center; }
.pdm-bas .eyebrow, .pdm-faq .eyebrow { color: var(--p4); }
.pdm-bas__titre { margin: 14px 0 0; font-family: var(--font-display); font-size: clamp(30px, 4vw, 48px); font-weight: var(--text-hero-weight, 600); line-height: 1.1; letter-spacing: var(--text-hero-ls, -.03em); color: var(--p1); text-wrap: balance; }
.pdm-etapes { position: relative; max-width: 1080px; margin: 0 auto; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.pdm-etape { position: relative; padding: 30px 28px 32px; border-radius: 28px; background: #fff; box-shadow: 0 0 0 1px rgba(66, 55, 122, .08), 0 22px 50px -32px rgba(45, 33, 92, .4); }
.pdm-etape__num { display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 20px; border-radius: 14px; background: var(--action-tint, #ece9fb); font-family: var(--font-display); font-size: 20px; font-weight: 600; color: var(--p3); }
.pdm-etape h3 { margin: 0; font-family: var(--font-display); font-size: 21px; font-weight: 600; line-height: 1.25; color: var(--p1); }
.pdm-etape p { margin: 10px 0 0; font-size: 15.5px; line-height: 1.58; color: #4a4668; text-wrap: pretty; }

.pdm-faq { padding: clamp(40px, 5vw, 64px) 24px clamp(64px, 7vw, 100px); background: var(--surface-pearl, #f6f5fa); }
.pdm-faq__in { max-width: 1080px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.pdm-faq__lede { margin: 16px 0 0; max-width: 34ch; font-size: 16.5px; line-height: 1.6; color: #4a4668; }
.pdm-faq__liste { display: grid; gap: 10px; }
.pdm-faq__liste details { border-radius: 20px; background: #fff; box-shadow: 0 0 0 1px rgba(66, 55, 122, .1); transition: box-shadow .25s ease; }
.pdm-faq__liste details[open] { box-shadow: 0 0 0 1.5px rgba(94, 83, 152, .4), 0 18px 40px -28px rgba(45, 33, 92, .45); }
.pdm-faq__liste summary { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 18px 22px; font-size: 16.5px; font-weight: 600; line-height: 1.4; color: var(--p1); cursor: pointer; list-style: none; }
.pdm-faq__liste summary::-webkit-details-marker { display: none; }
.pdm-faq__liste summary::after { content: ""; flex: none; width: 10px; height: 10px; border-right: 2px solid var(--p4); border-bottom: 2px solid var(--p4); transform: rotate(45deg) translateY(-2px); transition: transform .25s ease; }
.pdm-faq__liste details[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.pdm-faq__liste summary:focus-visible { outline: 3px solid var(--p4); outline-offset: 2px; border-radius: 20px; }
.pdm-faq__liste details p { margin: 0; padding: 0 22px 20px; font-size: 15.5px; line-height: 1.62; color: #4a4668; }

.pdm-fin { padding: 0 24px clamp(64px, 7vw, 100px); background: var(--surface-pearl, #f6f5fa); }
.pdm-fin__carte {
  max-width: 1080px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 28px 40px; padding: clamp(28px, 4vw, 48px) clamp(26px, 4vw, 52px); border-radius: 28px; color: #fff;
  background: radial-gradient(56% 90% at 12% 0%, rgba(255, 255, 255, .14) 0%, rgba(255, 255, 255, 0) 100%), var(--degrade-marque, linear-gradient(150deg, #42377a, #5e5398 42%, #6862ab));
}
.pdm-fin__titre { margin: 0; font-family: var(--font-display); font-size: clamp(24px, 3vw, 34px); font-weight: 600; line-height: 1.15; letter-spacing: -.02em; }
.pdm-fin__lede { margin: 10px 0 0; font-size: 16.5px; line-height: 1.55; color: rgba(255, 255, 255, .86); }
.pdm-fin__carte .btn { flex: none; }

@media (max-width: 960px) {
  .pdm__grille { grid-template-columns: 1fr; }
  .pdm__carte--info { position: static; }
  .pdm-etapes { grid-template-columns: 1fr; }
  .pdm-faq__in { grid-template-columns: 1fr; }
  .pdm-fin__carte { flex-direction: column; align-items: flex-start; }
}

/* ================================================================== Cartes de l'offre : les vrais visuels (téléphone en main, sphère, interface de l'application) */
.pro-tuile--a { grid-column: span 7; }
.pro-tuile--b { grid-column: span 5; }
.pro-tuile--c { grid-column: span 5; }
.pro-tuile--d { grid-column: span 7; }
.pro-tuile--e { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); align-items: stretch; }
.pro-tuile__col { align-self: center; padding-bottom: 28px; }

.pro-sc { flex: 1; position: relative; min-height: 500px; margin: 22px 14px 14px; border-radius: 20px; overflow: hidden; }
.pro-sc .appareil { position: relative; z-index: 2; }
.pro-sc--a .appareil--photo { --k: .5; --top: 22px; }
.pro-sc--d .appareil--photo { --k: .5; --top: 22px; }

/* A — la sphère : un canvas (js/entreprises.js) sur une lueur fixe */
.pro-sph { position: absolute; z-index: 0; left: 50%; top: 47%; width: min(112%, 540px); aspect-ratio: 1; transform: translate(-50%, -50%); pointer-events: none; }
.pro-sph__lueur { position: absolute; inset: -8%; border-radius: 50%; background: radial-gradient(circle at 50% 45%, rgba(138, 128, 216, .5) 0%, rgba(122, 112, 200, .14) 62%, rgba(122, 112, 200, 0) 100%); }
.pro-sph__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

/* B — des ondes de sonar : la veille du dark web, en direct */
.pro-ondes { position: absolute; z-index: 0; left: 50%; top: 46%; width: 0; height: 0; pointer-events: none; }
.pro-ondes i { position: absolute; left: -90px; top: -90px; width: 180px; height: 180px; border-radius: 50%; border: 1.5px solid rgba(94, 83, 152, .5); opacity: 0; transform: scale(.4); }
.pro-tuile.is-live .pro-ondes i { animation: pro-sonar 6s ease-out infinite; animation-delay: calc(var(--i) * 1.5s); }
@keyframes pro-sonar { 0% { transform: scale(.4); opacity: .75; } 100% { transform: scale(2.9); opacity: 0; } }

/* Une page de l'application, dans une fenêtre */
.pro-fen { display: block; position: absolute; z-index: 1; overflow: hidden; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px rgba(66, 55, 122, .12), 0 30px 60px -22px rgba(25, 20, 62, .55); }
.pro-fen img { display: block; width: 100%; height: auto; }

/* C — la maison en fond, l'interface immobilier par-dessus */
.pro-sc--c { background: linear-gradient(180deg, #ffffff 0%, #f1eefc 100%); }
.pro-sc__fond { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pro-sc__voile { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(241, 238, 252, .0) 0%, rgba(241, 238, 252, .0) 100%); }
.pro-fen--immo { left: 50%; top: 10%; width: 100%; transform: translateX(-50%); }
.pro-tuile.is-live .pro-fen--immo { animation: pro-flotte-fen 9s ease-in-out infinite alternate; }
@keyframes pro-flotte-fen { to { transform: translate(-50%, -8px); } }
.pro-puce-flottante { position: absolute; z-index: 3; left: 50%; margin-left: -96px; bottom: 6%; display: inline-flex; align-items: center; gap: 9px; padding: 10px 18px; border-radius: 999px; background: #fff; font-size: 13.5px; font-weight: 600; color: #19143e; box-shadow: 0 16px 32px -12px rgba(5, 2, 28, .6); }
.pro-puce-flottante i { width: 9px; height: 9px; border-radius: 50%; background: #1f8a5b; box-shadow: 0 0 0 0 rgba(31, 138, 91, .5); }
.pro-tuile.is-live .pro-puce-flottante { animation: pro-flotte-puce 6s ease-in-out infinite alternate; }
.pro-tuile.is-live .pro-puce-flottante i { animation: pro-pouls-vert 2.2s ease-out infinite; }
@keyframes pro-flotte-puce { to { transform: translateY(-8px); } }
@keyframes pro-pouls-vert { 0% { box-shadow: 0 0 0 0 rgba(31, 138, 91, .5); } 70%, 100% { box-shadow: 0 0 0 9px rgba(31, 138, 91, 0); } }

/* D — la page « Carte SIM » derrière, le téléphone devant */
.pro-fen--sim { left: 50%; top: 4%; width: 92%; transform: translateX(-50%); opacity: 1; }
.pro-tuile.is-live .pro-fen--sim { animation: pro-flotte-sim 10s ease-in-out infinite alternate; }
@keyframes pro-flotte-sim { to { transform: translate(-50%, -9px); } }

/* E — la page « Contacts de confiance » de l'application, et la notification que reçoit la personne de confiance */
.pro-sc--e { min-height: 520px; margin: 14px 14px 14px 0; background: radial-gradient(120% 90% at 100% 0%, rgba(255, 255, 255, .9) 0%, rgba(255, 255, 255, 0) 60%), linear-gradient(150deg, var(--action-tint, #ece9fb) 0%, var(--action-tint-strong, #ddd8f6) 100%); }
.pro-fen--contacts { left: 50%; top: 6%; width: 90%; transform: translateX(-50%); border-radius: 18px; }
.pro-toast-cc { position: absolute; z-index: 3; right: 5%; bottom: 7%; top: auto; left: auto; display: flex; align-items: center; gap: 10px; width: max-content; max-width: 70%; padding: 9px 14px 9px 9px; border-radius: 16px; background: #fff; box-shadow: 0 1px 4px rgba(66, 55, 122, .14), 0 14px 28px -12px rgba(66, 55, 122, .5); }
.pro-toast-cc__av { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%; background: #ece9fb; font-size: 11.5px; font-weight: 700; color: #42377a; }
.pro-toast-cc__txt b { display: block; font-size: 13px; font-weight: 600; line-height: 1.25; color: #19143e; }
.pro-toast-cc__txt small { display: block; font-size: 11px; line-height: 1.3; color: #6b6788; }
.js-reveal .pro-toast-cc { opacity: 0; transform: translateY(16px) scale(.96); }
.js-reveal .pro-tuile.is-live .pro-toast-cc { animation: pro-toast-cc 8s ease-in-out infinite; }
@keyframes pro-toast-cc { 0%, 12% { opacity: 0; transform: translateY(16px) scale(.96); } 20%, 82% { opacity: 1; transform: none; } 92%, 100% { opacity: 0; transform: translateY(16px) scale(.96); } }

@media (max-width: 1020px) {
  .pro-tuile--a, .pro-tuile--b, .pro-tuile--c, .pro-tuile--d { grid-column: span 12; }
  .pro-tuile--e { grid-template-columns: 1fr; }
  .pro-sc--e { margin: 14px; }
}
@media (max-width: 760px) {
  .pro-sc { min-height: 430px; margin: 18px 10px 10px; }
  .pro-sc--e { min-height: 330px; margin: 14px 10px 10px; }
  .pro-sc--a .appareil--photo { --k: .42; }
  .pro-sc--a { min-height: 440px; }
  .pro-sc--d .appareil--photo { --k: .42; }
  .pro-sc--d { min-height: 440px; }
  .pro-sc--c { min-height: 420px; }
  .pro-fen--immo { width: 100%; top: 9%; }
  .pro-toast-cc { right: 4%; bottom: 5%; max-width: 80%; padding: 8px 12px 8px 8px; }
  .pro-toast-cc__txt b { font-size: 12.5px; }
  .pro-toast-cc__txt small { font-size: 10.5px; }
  .pro-sc--e { min-height: 330px; }
  .pro-fen--contacts { width: 96%; }
}
@media (prefers-reduced-motion: reduce) {
    .js-reveal .pro-toast-cc { opacity: 1; transform: none; }
}

/* B — identité numérique : un grand disque pâle, une personne âgée qui en sort (en bas à droite), une petite carte de veille posée en bas à gauche */
.pro-sc--b { background: linear-gradient(160deg, #f6f4fd 0%, #ece8fb 100%); min-height: 460px; }
.pro-sc__cercle { position: absolute; left: 14%; bottom: -26%; width: 112%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 50% 34%, #efeafc 0%, #ded7f7 100%); box-shadow: inset 0 0 0 1px rgba(94, 83, 152, .1); }
.pro-sc__photo { position: absolute; z-index: 1; right: 3%; bottom: 0; height: 80%; width: auto; max-width: none; filter: drop-shadow(0 14px 20px rgba(45, 33, 92, .2)); }
.pro-veille { position: absolute; z-index: 2; left: 5%; bottom: 15%; width: min(46%, 236px); padding: 12px 13px 5px; border-radius: 16px; background: rgba(255, 255, 255, .98); box-shadow: 0 0 0 1px rgba(66, 55, 122, .08), 0 22px 44px -18px rgba(45, 33, 92, .5); }
.pro-veille__tete { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; padding: 0 2px 9px; border-bottom: 1px solid #ece9f6; font-size: 12.5px; font-weight: 600; color: var(--p1); }
.pro-veille__tete svg { width: 15px; height: 15px; color: var(--p4); }
.pro-veille__liste { margin: 0; padding: 0; list-style: none; display: grid; }
.pro-veille__liste li { display: flex; align-items: center; gap: 10px; padding: 8px 2px; }
.pro-veille__liste li + li { border-top: 1px solid #f1eefa; }
.pro-veille__liste b { display: block; font-size: 12.5px; font-weight: 600; line-height: 1.25; color: var(--p1); }
.pro-veille__liste small { display: block; margin-top: 1px; font-size: 11.5px; color: #6b6788; }
.pro-veille__ico { position: relative; flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #f3f0fd; color: var(--p3); box-shadow: inset 0 0 0 1px rgba(94, 83, 152, .12); }
.pro-veille__ico svg { width: 15px; height: 15px; }
.pro-veille__ico--sonar i { width: 8px; height: 8px; border-radius: 50%; background: #1f8a5b; }
.pro-veille__ico--sonar::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid rgba(31, 138, 91, .5); opacity: 0; }
.pro-tuile.is-live .pro-veille__ico--sonar::after { animation: pro-sonar-pt 2.4s ease-out infinite; }
@keyframes pro-sonar-pt { 0% { transform: scale(.45); opacity: .9; } 100% { transform: scale(1.35); opacity: 0; } }
.js-reveal .pro-veille__liste li { opacity: 0; transform: translateX(-10px); }
.js-reveal .pro-tuile.is-live .pro-veille__liste li { opacity: 1; transform: none; transition: opacity .5s ease, transform .6s cubic-bezier(.16, 1, .3, 1); transition-delay: calc(.3s + var(--r) * .22s); }
.js-reveal .pro-veille { opacity: 0; transform: translateY(14px); }
.js-reveal .pro-tuile.is-live .pro-veille { opacity: 1; transform: none; transition: opacity .6s ease .1s, transform .8s cubic-bezier(.16, 1, .3, 1) .1s; animation: pro-flotte-puce 7s ease-in-out 1.4s infinite alternate; }
@media (max-width: 760px) {
  .pro-sc--b { min-height: 400px; }
  .pro-veille { left: 4%; bottom: 12%; width: 56%; }
  .pro-sc__photo { height: 72%; right: -4%; }
}
@media (prefers-reduced-motion: reduce) { .js-reveal .pro-veille, .js-reveal .pro-veille__liste li { opacity: 1; transform: none; } }

/* Écran « comptes sous surveillance » du premier téléphone : le calme se lit en vert, pas en rouge */
.vue--comptes .vue__eyebrow { color: #17704a; }
.vue--comptes .vue__op-icone--calme { background: #e6f6ee; color: #17704a; }
.vue--comptes .vue__op-fois--ok { background: #e6f6ee; color: #17704a; font-weight: 600; }
.vue--comptes .signaux__icone { background: #e6f6ee; color: #17704a; }

/* Bannière du premier téléphone : un message calme, en vert */
.pro-sc--a .notif__alerte { color: #17704a; }

/* ================================================================== « Entourez les familles » : cercles qui se dessinent au défilement */
/* La section est haute (la personne défile), la scène reste collée à l'écran : js/entreprises.js écrit --a1, --a2, --a3 (les trois cercles) et --g (la lueur) de 0 à 1. */
.cercles { --a1: 1; --a2: 1; --a3: 1; --g: 1; position: relative; overflow: clip; height: 340vh; background: #d9d4cd linear-gradient(180deg, #e6e1da 0%, #d7d1ca 100%); }
.cercles__scene { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; gap: clamp(16px, 3vw, 48px); max-width: 1320px; margin: 0 auto; padding: 104px 32px 32px; }
.cercles__lueur {
  position: sticky; top: 0; height: 100vh; height: 100svh; margin-bottom: -100vh; margin-bottom: -100svh; pointer-events: none; opacity: var(--g);
  background:
    radial-gradient(34% 52% at 72% 30%, rgba(150, 134, 224, .62) 0%, rgba(150, 134, 224, 0) 70%),
    radial-gradient(40% 50% at 72% 104%, rgba(238, 190, 142, .78) 0%, rgba(238, 190, 142, 0) 72%);
}
.cercles__texte { position: relative; }
.cercles__titre { margin: 0; max-width: 20ch; font-family: var(--font-display); font-size: clamp(30px, 4.4vw, 58px); font-weight: var(--text-hero-weight, 600); line-height: 1.04; letter-spacing: var(--text-hero-ls, -.03em); color: #14112b; text-wrap: balance; }
.cercles__lede { margin: 18px 0 0; max-width: 64ch; font-size: clamp(14.5px, 1.25vw, 17px); line-height: 1.55; color: #2c2940; text-wrap: pretty; }

.cercles__figure { position: relative; width: min(100%, 76vh); aspect-ratio: 1; justify-self: center; align-self: center; }
.cercle { position: absolute; inset: 0; margin: auto; border-radius: 50%; transform: scale(calc(.55 + .45 * var(--a))); opacity: var(--a); border: 1.5px solid rgba(94, 83, 152, .75); }
.cercle__point { position: absolute; left: 50%; top: -4px; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: #fff; box-shadow: 0 0 12px 4px rgba(150, 134, 224, .8); }
.cercle--1 { --a: var(--a1); width: 36%; aspect-ratio: 1; background: rgba(94, 83, 152, .22); }
.cercle--2 { --a: var(--a2); width: 62%; aspect-ratio: 1; background: rgba(94, 83, 152, .13); }
.cercle--3 { --a: var(--a3); width: 88%; aspect-ratio: 1; border-color: rgba(255, 255, 255, .95); background: rgba(255, 255, 255, .10); }
.cercle { animation: cercle-tour 14s linear infinite; }
.cercle--2 { animation-duration: 22s; animation-direction: reverse; }
.cercle--3 { animation-duration: 30s; }
@keyframes cercle-tour { from { rotate: 0deg; } to { rotate: 360deg; } }
.cercle__centre { position: absolute; left: 50%; top: 50%; z-index: 2; display: grid; place-items: center; width: 16%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: var(--p3, #42377a); color: #fff; box-shadow: 0 16px 40px -12px rgba(25, 20, 62, .7); text-align: center; }
.cercle__centre span { padding: 0 6px; font-size: clamp(9px, 1.05vw, 13.5px); font-weight: 600; line-height: 1.15; }
.cercle__pastille {
  position: absolute; left: 50%; z-index: 3; padding: 9px 18px; border-radius: 999px; background: #fff; font-size: clamp(11px, 1.15vw, 15px); font-weight: 500; line-height: 1.2; white-space: nowrap; color: #14112b;
  transform: translate(-50%, -50%) translateY(calc((1 - var(--a)) * 14px)); opacity: var(--a); box-shadow: 0 8px 22px -10px rgba(25, 20, 62, .45);
}
.cercle__pastille--1 { --a: var(--a1); top: 32%; }
.cercle__pastille--2 { --a: var(--a2); top: 19%; }
.cercle__pastille--3 { --a: var(--a3); top: 6%; }

/* Sans JavaScript, ou avec « moins d'animation » : tout est visible, la section n'est plus haute et ne se fige pas. */
@media (prefers-reduced-motion: reduce) {
  .cercles { height: auto; }
  .cercles__scene { position: relative; height: auto; min-height: 0; padding-bottom: 56px; }
  .cercle { animation: none; }
  .cercles__figure { width: min(100%, 560px); }
}
@media (max-width: 960px) {
  .cercles__scene { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); align-items: start; padding: 92px 20px 16px; gap: 8px; }
  .cercles__titre { font-size: clamp(25px, 6.4vw, 40px); max-width: 24ch; }
  .cercles__lede { font-size: 13.5px; line-height: 1.5; margin-top: 10px; }
  .cercles__figure { width: min(100%, 60vh); margin-top: 0; }
  .cercle__pastille { padding: 6px 12px; }
  .cercles__lueur { background: radial-gradient(60% 40% at 50% 40%, rgba(150, 134, 224, .62) 0%, rgba(150, 134, 224, 0) 70%), radial-gradient(70% 40% at 50% 104%, rgba(238, 190, 142, .78) 0%, rgba(238, 190, 142, 0) 72%); }
}
@media (max-width: 760px) { .cercles { height: 300vh; } }

/* ================================================================== Rangées « Pour les banques… » (sans lien : aucune page n'existe) */
.rangees { padding: clamp(64px, 8vw, 110px) 0 0; background: var(--degrade-marque, linear-gradient(150deg, #42377a, #5e5398 42%, #6862ab)); color: #fff; }
.rangees__tete { max-width: 1180px; margin: 0 auto clamp(36px, 5vw, 64px); padding: 0 24px; }
.rangees .rangees__n { margin: 0; font-size: 14px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .78); }
.rangees__titre { margin: 14px 0 0; max-width: 22ch; font-family: var(--font-display); font-size: clamp(30px, 4.2vw, 54px); font-weight: var(--text-hero-weight, 600); line-height: 1.06; letter-spacing: var(--text-hero-ls, -.03em); text-wrap: balance; }
.rangees__sous { margin: 16px 0 0; max-width: 46ch; font-size: clamp(16px, 1.5vw, 19px); line-height: 1.55; color: rgba(255, 255, 255, .86); }
.rangees__liste { margin: 0; padding: 0; list-style: none; border-top: 1px solid rgba(255, 255, 255, .22); }
.rangee { border-bottom: 1px solid rgba(255, 255, 255, .22); transition: background .3s ease; }
.rangee:hover { background: rgba(255, 255, 255, .06); }
.rangee__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: center; gap: 12px 40px; max-width: 1180px; margin: 0 auto; padding: clamp(26px, 3.4vw, 40px) 24px; }
.rangee__titre { margin: 0; font-family: var(--font-display); font-size: clamp(26px, 3.6vw, 44px); font-weight: 600; line-height: 1.1; letter-spacing: -.02em; }
.rangee__texte { margin: 0; font-size: clamp(15px, 1.35vw, 17.5px); line-height: 1.5; color: rgba(255, 255, 255, .86); }
@media (max-width: 760px) { .rangee__in { grid-template-columns: 1fr; } }

/* Carte SIM : la pastille « Alerte envoyée » du téléphone de l'accueil masquerait le tableau de bord */
.pro-sc--d .sim-puce { display: none; }

/* Bannière du téléphone SIM (version miroir de la photo) : mêmes dimensions que sur la première carte, décalées pour la main de l autre côté */
.appareil--photo.appareil--miroir .notif { left: max(8px, calc(50% - 155 * var(--k) * 1px)); right: calc(50% - 267 * var(--k) * 1px); width: auto; }

/* Téléphone et tablette étroite : le texte d'ouverture reprend toute la largeur disponible (la règle « plus étroit que le titre » ne vaut que sur grand écran) */
@media (max-width: 900px) { .hero--pro .hero__lede { max-width: 560px; } }
/* Téléphone : la zone de texte s'élargit jusqu'aux marges de l'écran (le bloc d'ouverture a 20 px de marge de chaque côté) et le texte est un cran plus petit,
   pour tenir sur trois lignes au lieu de cinq. Deux lignes demanderaient une écriture illisible (moins de 10 px). */
@media (max-width: 700px) {
  .hero--pro .hero__lede { width: calc(100% + 16px); max-width: none; margin-inline: -8px; font-size: 13px; line-height: 1.45; text-wrap: balance; }
}
@media (max-width: 400px) { .hero--pro .hero__lede { font-size: 12.5px; } }
@media (max-width: 340px) { .hero--pro .hero__lede { font-size: 12px; } }