/* ============================================================================
   SentinelleFin : page Tarifs (prefixe tp-)
   Prolongement du bouton « Tarifs » de la landing : meme famille visuelle
   (indigo profond pour l'accroche et les avis, lavande et blanc pour le reste),
   couleurs, typo, rayons et durees pris aux tokens du design system.
   Les signaux (vert, rouge, ambre) restent fonctionnels : aucun n'est utilise
   ici comme decor, hormis l'ambre des etoiles d'avis, comme sur la landing.
   Toutes les animations s'arretent si la personne demande moins de mouvement.
   ========================================================================== */

@property --tp-angle { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.tp-wrap { width: min(1120px, calc(100% - 48px)); margin-inline: auto; }

/* La page courante, dans la navigation. */
.nav__links a[aria-current="page"] { color: var(--action-focus); font-weight: 600; }
.nav-mobile a[aria-current="page"] { background: var(--action-tint); color: var(--action-focus); }

/* ═════════════ Apparition des blocs ═════════════
   Les blocs ne sont masques que si le JS a pris la main (classe tp-js posee dans
   <head>) : sans JavaScript, toute la page reste lisible. L'animation garde
   « backwards » et non « both » : une fois finie, elle rend la main, et les
   survols (qui deplacent les cartes) fonctionnent. */
.tp-js [data-tp]:not(.est-visible) { opacity: 0; }
.tp-js [data-tp].est-visible {
  animation: tpMonte .75s var(--ease-standard) backwards;
  animation-delay: calc(var(--i, 0) * 90ms);
}
@keyframes tpMonte { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }

/* Permutation mensuel / annuel : meme mecanisme que la landing (valeur--sort,
   valeur--entre), applique ici a nos propres elements. */
.tp-anim { display: inline-block; transition: opacity 220ms var(--ease-standard), transform 220ms var(--ease-standard); }

/* ═════════════ Titres de section ═════════════ */
.tp-tete { max-width: 700px; margin: 0 auto 56px; text-align: center; }
.tp-tete__titre {
  margin-top: 14px;
  font-family: var(--font-display);
  font-size: var(--text-display-lg-size);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -.4px;
  color: var(--brand-1);
  text-wrap: balance;
}
.tp-tete__lede {
  margin-top: 16px;
  font-size: var(--text-body-size);
  line-height: var(--text-body-lh);
  color: var(--ink-muted-80);
  text-wrap: pretty;
}
.tp-tete--sombre .tp-tete__titre { color: var(--on-dark); }
.tp-tete--sombre .tp-tete__lede { color: var(--on-dark-muted); }

/* ═════════════ Accroche ═════════════ */
.tp-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  /* Le haut laisse la place de la navigation flottante (88 px), le bas celle
     des offres, qui remontent sur le hero. */
  padding: 178px 24px 214px;
  border-radius: 0 0 48px 48px;
  text-align: center;
  color: var(--on-dark);
  background:
    radial-gradient(60% 52% at 50% 0%, rgba(115, 111, 182, .40) 0%, rgba(66, 55, 122, .14) 52%, rgba(25, 20, 62, 0) 82%),
    linear-gradient(180deg, #241c53 0%, var(--surface-deep) 56%, #140f31 100%);
}
.tp-hero__fond { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.tp-hero__fond > * { position: absolute; display: block; }

.tp-aurore { border-radius: 50%; opacity: .55; }
/* Pas de filtre flou (filter: blur) : le dégradé est déjà doux ; un flou calculé en direct sur une grande surface faisait planter Safari sur iPhone. */
.tp-aurore--1 {
  width: 640px; height: 640px; left: -180px; top: 30px;
  background: radial-gradient(circle, rgba(115, 111, 182, .75) 0%, rgba(115, 111, 182, .34) 36%, transparent 70%);
}
.tp-aurore--2 {
  width: 580px; height: 580px; right: -150px; bottom: -60px;
  background: radial-gradient(circle, rgba(94, 83, 152, .8) 0%, rgba(94, 83, 152, .36) 36%, transparent 70%);
}

/* Le pictogramme de la marque, tres grand et presque effacé, tourne tres lentement :
   meme geste que celui de la navigation. */
.tp-marque {
  right: -170px; top: -120px;
  width: 720px; height: 720px;
  background: url("../assets/brand/icone-blanc.svg") center / contain no-repeat;
  opacity: .07;
}
.tp-grille {
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, .11) 1px, transparent 1.6px);
  background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(72% 70% at 50% 34%, #000 0%, transparent 78%);
          mask-image: radial-gradient(72% 70% at 50% 34%, #000 0%, transparent 78%);
}

.tp-hero__contenu { max-width: 960px; margin: 0 auto; }
.tp-hero__titre {
  margin-top: 16px;
  font-family: var(--font-display);
  font-size: var(--text-hero-size);            /* 56 px, comme le hero de l'accueil (44 / 34 plus bas) */
  font-weight: var(--text-hero-weight);
  line-height: var(--text-hero-lh);
  letter-spacing: var(--text-hero-ls);
  color: var(--on-dark);
  text-wrap: balance;
}
.tp-hero__lede {
  max-width: 34em;
  margin: 20px auto 0;
  font-size: var(--text-body-size);
  line-height: var(--text-body-lh);
  color: rgba(255, 255, 255, .84);
  text-wrap: pretty;
}
.tp-hero__garanties {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
  margin: 30px 0 0; padding: 0; list-style: none;
}
.tp-hero__garanties li {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 15px;
  border-radius: 999px;
  font-size: 14px; font-weight: 600;
  color: var(--on-dark);
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .16);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  cursor: default;
  transition: transform 260ms var(--ease-standard), background-color 260ms var(--ease-standard), border-color 260ms var(--ease-standard);
}
/* Simple retour visuel, rien de cliquable : la pastille grossit a peine. */
@media (hover: hover) {
  .tp-hero__garanties li:hover {
    transform: scale(1.05);
    background: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .26);
  }
}
.tp-hero__garanties svg { color: var(--action-on-dark); flex: 0 0 auto; }

/* Le commutateur, version fond sombre. */
.tp-cycle { margin-top: 36px; }
.tp-cycle--sombre {
  background: rgba(255, 255, 255, .1);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2);
}
.tp-cycle--sombre .segmented__btn { color: var(--on-dark-muted); font-size: 14px; padding: 10px 24px; }
.tp-cycle--sombre .segmented__btn.is-active { background: var(--canvas); color: var(--brand-1); }
.tp-compare .tp-cycle { display: flex; width: fit-content; margin: 0 auto 32px; }

@media (prefers-reduced-motion: no-preference) {
  .tp-aurore--1 { animation: tpDerive1 24s ease-in-out infinite alternate; }
  .tp-aurore--2 { animation: tpDerive2 28s ease-in-out infinite alternate; }
  .tp-marque { animation: tpTourne 140s linear infinite; }
}
@keyframes tpDerive1 { to { transform: translate3d(140px, 60px, 0) scale(1.15); } }
@keyframes tpDerive2 { to { transform: translate3d(-120px, -50px, 0) scale(1.12); } }
@keyframes tpTourne { to { transform: rotate(360deg); } }

/* ═════════════ Les deux offres ═════════════ */
.tp-offres {
  position: relative;
  z-index: 2;
  margin-top: -150px;
  padding: 0 24px 96px;
  /* Transparent sur les 150 premiers pixels : le hero passe derriere le haut des cartes. */
  background: linear-gradient(180deg, transparent 0, transparent 150px, var(--canvas-parchment) 150px, var(--surface-pearl) 100%);
}
.tp-offres__grille {
  max-width: 940px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
  align-items: stretch;
}

.tp-offre {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 38px 36px 36px;
  border-radius: 26px;
  background: var(--canvas);
  border: 2px solid transparent;
  box-shadow: 0 2px 6px rgba(25, 20, 62, .06), 0 34px 60px -32px rgba(25, 20, 62, .42);
  overflow: hidden;
  transition: transform var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard);
}
.tp-offre:hover { transform: translateY(-5px); box-shadow: 0 2px 6px rgba(25, 20, 62, .06), 0 42px 70px -30px rgba(66, 55, 122, .5); }

/* Halo sous le curseur (pose par tarifs.js : --mx, --my). */
.tp-offre::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 0%), rgba(115, 111, 182, .14), transparent 62%);
  opacity: 0;
  transition: opacity .3s var(--ease-standard);
  pointer-events: none;
}
.tp-offre:hover::after { opacity: 1; }

/* L'offre conseillee : un anneau de lumiere qui tourne lentement sur son contour. */
.tp-offre--reco {
  --tp-angle: 0deg;
  background:
    linear-gradient(var(--canvas), var(--canvas)) padding-box,
    conic-gradient(from var(--tp-angle), #736fb6, #d9d4f4, #42377a, #b7aec9, #736fb6) border-box;
  box-shadow: 0 2px 6px rgba(25, 20, 62, .06), 0 40px 80px -34px rgba(115, 111, 182, .75);
}
@media (prefers-reduced-motion: no-preference) {
  .tp-offre--reco { animation: tpAnneau 9s linear infinite; }
}
@keyframes tpAnneau { to { --tp-angle: 360deg; } }

.tp-offre__ruban {
  position: absolute;
  top: 0; right: 30px;
  padding: 9px 16px 11px;
  border-radius: 0 0 14px 14px;
  font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--on-action);
  background: linear-gradient(160deg, var(--brand-4), var(--brand-5));
  box-shadow: 0 8px 18px -8px rgba(66, 55, 122, .7);
}

.tp-offre__nom {
  font-family: var(--font-display);
  font-size: var(--text-lead-size); font-weight: 600; line-height: 1.1; letter-spacing: -.3px;
  color: var(--brand-1);
}
.tp-offre__pour { margin: 8px 0 0; font-size: var(--text-caption-size); line-height: 1.5; color: var(--ink-muted-80); }
.tp-offre__foyer { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; }
.tp-puce {
  display: inline-flex; align-items: center;
  padding: 6px 13px; border-radius: 999px;
  font-size: 12.5px; font-weight: 600;
  color: var(--action-focus); background: var(--action-tint);
}
.tp-offre--reco .tp-puce { background: var(--action-tint-strong); }

.tp-prix { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; margin: 4px 0 0; min-height: 62px; }
.tp-prix__montant {
  font-family: var(--font-display);
  font-size: 42px; font-weight: 600; line-height: 1; letter-spacing: -1.2px;
  color: var(--brand-1);
}
.tp-prix__periode { font-size: var(--text-caption-size); color: var(--ink-muted-80); }
.tp-prix__barre {
  font-size: 18px; color: var(--ink-muted-80);
  text-decoration: line-through; text-decoration-thickness: 1.5px;
}
.tp-prix__barre:empty { display: none; }
.tp-prix__note { min-height: 22px; margin: -6px 0 0; font-size: var(--text-caption-size); font-weight: 600; color: var(--action-focus); }

.tp-offre__cta { margin-top: 4px; }
.tp-offre__titre-liste {
  margin: 8px 0 0; padding-top: 22px;
  border-top: 1px solid var(--divider-soft);
  font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-muted-80);
}

.tp-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 15px; }
.tp-liste li {
  display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 13px; align-items: center;
  font-size: var(--text-caption-size); line-height: 1.45; color: var(--ink);
}
.tp-liste li strong { font-weight: 600; color: var(--brand-1); }
.tp-liste__detail { display: block; margin-top: 4px; font-size: .92em; color: var(--ink-muted-80); }
.tp-liste__ico {
  width: 34px; height: 34px; border-radius: 11px;
  display: grid; place-items: center;
  color: var(--action-focus); background: var(--action-tint);
}
.tp-offre--reco .tp-liste__ico { color: var(--on-action); background: linear-gradient(145deg, var(--brand-3), var(--brand-5)); }

.tp-js .tp-offre.est-visible .tp-liste li { animation: tpItem .55s var(--ease-standard) backwards; animation-delay: calc(.35s + var(--i, 0) * 70ms); }
@keyframes tpItem { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: none; } }

.tp-comparer { margin: 46px 0 0; text-align: center; }
.tp-comparer a {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 11px 20px; border-radius: 999px;
  font-size: var(--text-caption-size); font-weight: 600; color: var(--action-focus); text-decoration: none;
  transition: background var(--dur-fast) var(--ease-standard);
}
.tp-comparer a:hover { background: var(--action-tint); text-decoration: none; }
@media (prefers-reduced-motion: no-preference) {
  .tp-comparer svg { animation: tpRebond 1.9s ease-in-out infinite; }
}
@keyframes tpRebond { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }

/* Encart au pied de l'offre Sentinelle : il rend le prix par personne, et comble
   la difference de hauteur avec la liste plus longue d'Essentiel. */
.tp-offre__astuce {
  display: flex; align-items: center; gap: 14px;
  margin: auto 0 0; padding: 16px 18px;
  border-radius: 16px;
  font-size: var(--text-caption-size); line-height: 1.5; color: var(--ink);
  background: linear-gradient(135deg, var(--action-tint) 0%, var(--action-tint-strong) 100%);
}
.tp-offre__astuce strong { font-weight: 700; color: var(--brand-1); }
.tp-offre__astuce-ico { flex: 0 0 auto; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; color: var(--action-focus); background: var(--canvas); box-shadow: 0 6px 14px -8px rgba(66, 55, 122, .6); }

/* Le bouton discret d'Essentiel : un contour net, lisible sur fond blanc. */
.tp-offre .btn--ghost { color: var(--brand-1); background: var(--canvas); box-shadow: inset 0 0 0 1.5px var(--action); }
.tp-offre .btn--ghost:hover { color: var(--brand-1); background: var(--action-tint); }

/* ═════════════ Ce que SentinelleFin surveille ═════════════
   Tient sur UN ecran : trois cartes cote a cote, chacune avec sa petite scene animee
   (l'alerte telle que la personne la recevra), puis une ligne de conclusion. Les
   hauteurs suivent celle de la fenetre (vh) pour que l'ensemble reste visible d'un
   coup d'oeil. Sur telephone, les trois cartes se font glisser (defilement
   horizontal) au lieu de s'empiler : la section garde la meme hauteur.
   Les scenes sont des illustrations (aria-hidden) : le texte porte le sens. */
.tp-couvre {
  position: relative;
  padding: clamp(28px, 4.6vh, 56px) 0;
  background:
    linear-gradient(180deg, var(--surface-pearl) 0, rgba(250, 250, 252, 0) 160px),
    radial-gradient(60% 34% at 12% 0%, rgba(115, 111, 182, .16), transparent 72%),
    radial-gradient(48% 30% at 92% 58%, rgba(115, 111, 182, .13), transparent 72%),
    linear-gradient(180deg, var(--surface-pearl) 0%, var(--canvas-parchment) 100%);
}
.tp-couvre .tp-wrap { width: min(1240px, calc(100% - 48px)); }
.tp-couvre .tp-tete { max-width: 1000px; margin-bottom: clamp(18px, 3vh, 28px); }
.tp-couvre .tp-tete__titre { margin-top: 10px; font-size: clamp(27px, 3.1vw, 36px); }
.tp-couvre .tp-tete__lede { max-width: 760px; margin: 10px auto 0; font-size: 16px; line-height: 1.5; }

.tp-domaines { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: clamp(12px, 2vh, 18px) 0 0; padding: 0; list-style: none; }
.tp-domaines li {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 14px; font-weight: 600; color: var(--brand-1);
  background: var(--canvas);
  border: 1px solid var(--hairline-alpha);
  box-shadow: 0 10px 22px -16px rgba(66, 55, 122, .55);
  white-space: nowrap;
}
.tp-domaines svg { color: var(--action); flex: 0 0 auto; }
.tp-js .tp-domaines.est-visible li { animation: tpAllume .6s var(--ease-standard) backwards; animation-delay: calc(.2s + var(--i, 0) * 110ms); }
@keyframes tpAllume { from { opacity: 0; transform: translateY(12px) scale(.94); } to { opacity: 1; transform: none; } }

/* Les trois cartes. */
.tp-volets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.tp-volet {
  position: relative;
  display: flex; flex-direction: column;
  overflow: hidden;
  border-radius: 24px;
  background: var(--canvas);
  border: 1px solid var(--hairline-alpha);
  box-shadow: 0 2px 6px rgba(25, 20, 62, .05), 0 26px 46px -28px rgba(66, 55, 122, .5);
  transition: transform var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard);
}
.tp-volet:hover { transform: translateY(-5px); box-shadow: 0 2px 6px rgba(25, 20, 62, .06), 0 34px 54px -26px rgba(66, 55, 122, .6); }
.tp-js .est-visible .tp-volet { animation: tpMonte .75s var(--ease-standard) backwards; animation-delay: calc(var(--i, 0) * 120ms); }

.tp-volet__texte { display: flex; flex-direction: column; flex: 1; padding: 18px 22px 22px; }
.tp-volet__entete { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tp-volet__num {
  display: inline-flex; align-items: center; gap: 9px;
  margin: 0;
  font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--action-focus);
}
.tp-volet__num b {
  display: inline-grid; place-items: center;
  width: 26px; height: 26px; border-radius: 50%;
  font-size: 12px; letter-spacing: 0;
  color: var(--on-action);
  background: linear-gradient(145deg, var(--brand-3), var(--brand-5));
}
.tp-volet__offres { display: flex; align-items: center; gap: 5px; }
.tp-tag {
  display: inline-flex; align-items: center;
  padding: 3px 10px; border-radius: 999px;
  font-size: 11.5px; font-weight: 700; white-space: nowrap;
  color: var(--action-focus); background: var(--action-tint-strong);
}
.tp-tag--sentinelle { color: var(--on-action); background: linear-gradient(160deg, var(--brand-4), var(--brand-5)); }
.tp-volet__titre {
  margin: 14px 0 2px;
  font-family: var(--font-display);
  font-size: 21px; font-weight: 600; line-height: 1.25; letter-spacing: -.2px;
  color: var(--brand-1);
  text-wrap: balance;
}

/* La scene : un fond lavande en haut de la carte, et l'alerte posee dessus. */
.tp-scene {
  position: relative; overflow: hidden;
  display: grid; place-items: center;
  height: 224px; padding: 0 18px;
  background: linear-gradient(155deg, #f3f1fd 0%, #e2ddf7 100%);
}
.tp-scene__cercle { position: absolute; width: 220px; height: 220px; top: -90px; right: -60px; border-radius: 50%; background: radial-gradient(circle, rgba(115, 111, 182, .3), transparent 66%); }

.tp-ui {
  position: relative; z-index: 1;
  zoom: 1.16;   /* un cran plus grand : la carte n'a plus de paragraphe, la scene porte le message */
  width: min(100%, 290px);
  display: flex; flex-direction: column; gap: 8px;
  padding: 12px 14px;
  border-radius: 16px;
  background: var(--canvas);
  box-shadow: 0 2px 6px rgba(25, 20, 62, .06), 0 20px 34px -18px rgba(25, 20, 62, .5);
}
.tp-ui__tete { display: flex; align-items: center; gap: 10px; }
.tp-ui__tuile { flex: 0 0 auto; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; color: var(--signal-vigilance); background: var(--signal-vigilance-tint); }
.tp-ui__tete > div { min-width: 0; flex: 1; }
.tp-ui__cat { margin: 0; font-size: 11.5px; font-weight: 600; line-height: 1.2; color: var(--ink-muted-80); }
.tp-ui__titre { margin: 1px 0 0; font-size: 13px; font-weight: 700; line-height: 1.3; color: var(--brand-1); }
.tp-ui__sous { display: block; font-size: 11.5px; line-height: 1.3; color: var(--ink-muted-80); }
.tp-ui__badge { flex: 0 0 auto; align-self: flex-start; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; color: var(--signal-vigilance); background: var(--signal-vigilance-tint); white-space: nowrap; }

.tp-ui__adresses { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.tp-ui__adresses li {
  /* Deux lignes par adresse : l'adresse ENTIERE (le domaine la distingue), puis son etat dessous.
     Sur une seule ligne, « jean.dupont@martinmail.fr » etait coupee apres « martin ». */
  display: grid; grid-template-columns: 8px minmax(0, 1fr); column-gap: 9px; row-gap: 1px; align-items: center;
  padding: 6px 10px; border-radius: 10px;
  font-size: 12px; color: var(--ink);
  background: var(--surface-pearl);
}
.tp-ui__point { grid-row: 1 / span 2; align-self: start; margin-top: 4px; }
.tp-ui__adr { grid-column: 2; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tp-ui__etat { grid-column: 2; font-size: 11px; font-weight: 700; color: var(--signal-sur); white-space: nowrap; }
.tp-ui__point { width: 8px; height: 8px; border-radius: 50%; background: var(--signal-sur); }
.tp-ui__adresses li.est-alerte { background: var(--signal-vigilance-tint); box-shadow: inset 0 0 0 1.5px rgba(176, 112, 11, .38); }
.tp-ui__adresses li.est-alerte .tp-ui__point { background: var(--signal-vigilance); }
.tp-ui__adresses li.est-alerte .tp-ui__etat { color: var(--signal-vigilance); }

/* La frise du bien : le type d'acte, et celui qui vient d'etre publie. */
.tp-frise { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.tp-frise li {
  position: relative;
  display: grid; grid-template-columns: 12px minmax(0, 1fr); gap: 10px; align-items: center;
  padding: 5px 10px; border-radius: 10px;
  background: var(--surface-pearl);
}
.tp-frise__pt { width: 12px; height: 12px; border-radius: 50%; background: var(--signal-sur); box-shadow: 0 0 0 3px var(--signal-sur-tint); }
.tp-frise strong { display: block; font-size: 12.5px; font-weight: 600; line-height: 1.25; color: var(--brand-1); }
.tp-frise small { display: block; font-size: 11px; line-height: 1.3; color: var(--ink-muted-80); }
.tp-frise li.est-alerte { background: var(--signal-vigilance-tint); box-shadow: inset 0 0 0 1.5px rgba(176, 112, 11, .38); }
.tp-frise li.est-alerte .tp-frise__pt { background: var(--signal-vigilance); box-shadow: 0 0 0 3px rgba(176, 112, 11, .16); }

/* Pastille flottante : « vous etes prevenu ». */
.tp-flottant {
  position: absolute; z-index: 2; right: -8px; bottom: -13px;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 12px; border-radius: 999px;
  font-size: 12px; font-weight: 700; color: var(--on-dark);
  background: var(--brand-1);
  box-shadow: 0 12px 22px -10px rgba(25, 20, 62, .75);
  white-space: nowrap;
}
.tp-flottant svg { color: var(--action-on-dark); }

/* Le telephone : seul le haut de l'ecran verrouille se voit, la notification arrive dessus. */
.tp-scene--tel { place-items: end center; }
.tp-onde { position: absolute; left: 50%; bottom: -60px; width: 250px; height: 250px; margin-left: -125px; border-radius: 50%; border: 2px solid rgba(115, 111, 182, .45); opacity: 0; }

/* Ligne de conclusion : la phrase, et le centre de controle en miniature. */
.tp-reunis {
  display: flex; align-items: center; gap: 26px;
  margin-top: clamp(16px, 3vh, 26px);
  padding: 14px 18px 14px 20px;
  border-radius: 22px;
  background: linear-gradient(135deg, var(--canvas) 0%, var(--action-tint) 100%);
  border: 1px solid var(--hairline-alpha);
  box-shadow: 0 2px 6px rgba(25, 20, 62, .05), 0 26px 46px -32px rgba(66, 55, 122, .55);
}
.tp-reunis__titre { margin: 0; flex: 1; font-family: var(--font-display); font-size: 18px; font-weight: 600; line-height: 1.3; letter-spacing: -.2px; color: var(--brand-1); text-wrap: balance; }
.tp-reunis .btn { flex: 0 0 auto; }

.tp-hubmini { position: relative; display: flex; align-items: center; gap: 14px; flex: 0 0 auto; }
.tp-hubmini::before {   /* le fil qui relie les cinq pastilles */
  content: "";
  position: absolute; left: 22px; right: 22px; top: 50%; height: 2px; margin-top: -1px;
  background: repeating-linear-gradient(90deg, var(--action) 0 5px, transparent 5px 12px);
  opacity: .6;
}
.tp-hubmini__noeud {
  position: relative;
  display: grid; place-items: center;
  width: 42px; height: 42px; border-radius: 13px;
  color: var(--action-focus); background: var(--canvas);
  box-shadow: 0 10px 18px -10px rgba(66, 55, 122, .7), inset 0 0 0 1px var(--action-tint-strong);
}
.tp-hubmini__noeud--coeur { background: linear-gradient(145deg, var(--brand-2), var(--brand-5)); box-shadow: 0 12px 20px -10px rgba(66, 55, 122, .9), inset 0 1px 0 rgba(255, 255, 255, .3); }
.tp-hubmini__noeud--coeur img { width: 24px; height: 24px; }

/* Animations des scenes : elles demarrent quand la section apparait. */
@media (prefers-reduced-motion: no-preference) {
  .tp-js .est-visible .tp-ui { animation: tpMonte .8s var(--ease-standard) .1s backwards; }
  .tp-js .est-visible .tp-ui__adresses li,
  .tp-js .est-visible .tp-frise li { animation: tpRangee .55s var(--ease-standard) backwards; animation-delay: calc(.55s + var(--r, 0) * .2s); }
  .tp-js .est-visible .tp-ui__adresses li.est-alerte,
  .tp-js .est-visible .tp-frise li.est-alerte { animation: tpRangee .55s var(--ease-standard) backwards, tpAlerte 2.4s ease-in-out 1.7s infinite; animation-delay: calc(.55s + var(--r, 0) * .2s), 1.7s; }
  .tp-js .est-visible .tp-flottant { animation: tpPop .6s cubic-bezier(.3, 1.5, .5, 1) 1.4s backwards, tpFlotte 4.4s ease-in-out 2s infinite alternate; }
  .tp-js .est-visible .tp-appareil { animation: tpMonte .8s var(--ease-standard) .1s backwards, tpVibre .7s ease-in-out 1.5s 2; }
  .tp-js .est-visible .tp-onde { animation: tpOnde 3.6s ease-out infinite; animation-delay: calc(1.2s + var(--i, 0) * 1.2s); }
  .tp-js .est-visible .tp-hubmini__noeud { animation: tpPop .6s cubic-bezier(.3, 1.5, .5, 1) backwards, tpAllumeNoeud 4s ease-in-out infinite; animation-delay: calc(.3s + var(--i, 0) * .12s), calc(1s + var(--i, 0) * .5s); }
  .tp-hubmini::before { animation: tpFluxMini 1s linear infinite; }
}
@keyframes tpRangee { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }
@keyframes tpAlerte {
  0%, 100% { box-shadow: inset 0 0 0 1.5px rgba(176, 112, 11, .38), 0 0 0 0 rgba(176, 112, 11, .32); }
  50% { box-shadow: inset 0 0 0 1.5px rgba(176, 112, 11, .38), 0 0 0 7px rgba(176, 112, 11, 0); }
}
@keyframes tpPop { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
@keyframes tpFlotte { to { transform: translateY(-5px); } }
@keyframes tpVibre { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-1.8deg); } 40% { transform: rotate(1.8deg); } 60% { transform: rotate(-1.1deg); } 80% { transform: rotate(1.1deg); } }
@keyframes tpOnde { 0% { opacity: .7; transform: scale(.55); } 100% { opacity: 0; transform: scale(1.5); } }
@keyframes tpFluxMini { to { background-position: 12px 0; } }
@keyframes tpAllumeNoeud {
  0%, 22%, 100% { box-shadow: 0 10px 18px -10px rgba(66, 55, 122, .7), inset 0 0 0 1px var(--action-tint-strong), 0 0 0 0 rgba(115, 111, 182, 0); }
  8% { box-shadow: 0 10px 18px -10px rgba(66, 55, 122, .7), inset 0 0 0 1.5px var(--action), 0 0 0 7px rgba(115, 111, 182, .22); }
}

/* Ecran court (portable) : on garde tout visible en retirant d'abord la rangee de
   pastilles (elle repete le texte du dessus), puis en resserrant les cartes, et enfin,
   sur un ecran vraiment bas, la phrase d'introduction. */
@media (min-width: 901px) and (max-height: 860px) {
  .tp-domaines { display: none; }
  .tp-couvre { padding-block: 28px; }
  .tp-couvre .tp-tete { margin-bottom: 20px; }
  .tp-volet__texte { padding: 14px 20px 18px; }
}
/* Tablette en paysage : trois colonnes plus etroites, texte un cran plus petit. */
@media (min-width: 901px) and (max-width: 1100px) {
  .tp-volet__texte { padding: 14px 18px 16px; }
  .tp-volet__titre { font-size: 18.5px; }
}
@media (min-width: 901px) and (max-height: 740px) {
  .tp-couvre .tp-tete__lede { display: none; }
  .tp-reunis { margin-top: 14px; padding-block: 10px; }
}

/* Pastilles de pagination du defilement horizontal : telephone et tablette seulement. */
.tp-volets__points { display: none; }

/* Telephone et tablette : les trois cartes se font glisser, la section garde sa hauteur. */
@media (max-width: 900px) {
  .tp-volets {
    display: flex; gap: 14px;
    margin: 0 -24px; padding: 8px 24px 26px;
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding-inline: 24px;
    scrollbar-width: none;
  }
  .tp-volets::-webkit-scrollbar { display: none; }
  .tp-volet { flex: 0 0 min(88%, 380px); scroll-snap-align: start; }
  .tp-domaines { flex-wrap: nowrap; justify-content: flex-start; margin-inline: -24px; padding: 0 24px 6px; overflow-x: auto; scrollbar-width: none; }
  .tp-domaines::-webkit-scrollbar { display: none; }
  .tp-couvre .tp-tete__lede { font-size: 15px; }
  .tp-couvre { padding-block: 40px; }
  .tp-couvre .tp-tete { margin-bottom: 20px; }
  .tp-reunis { flex-direction: column; align-items: flex-start; gap: 14px; padding: 18px 18px 20px; }
  .tp-reunis .btn { align-self: stretch; }
  .tp-hubmini { gap: 12px; }
  .tp-volets__points { display: flex; justify-content: center; gap: 8px; margin: -12px 0 18px; }
}
@media (max-width: 560px) {
  .tp-hubmini { display: none; }
  /* Cartes plus etroites : les scenes reprennent leur taille de base pour que rien ne soit coupe. */
  .tp-ui { zoom: 1; }
  .tp-scene { height: 196px; }
}

.tp-volets__points span { width: 8px; height: 8px; border-radius: 50%; background: var(--action-tint-strong); transition: width var(--dur-base) var(--ease-standard), background var(--dur-base) var(--ease-standard); }
.tp-volets__points span.est-actif { width: 24px; border-radius: 999px; background: var(--action); }

/* ═════════════ Comparatif ═════════════ */
.tp-compare {
  /* Sans overflow : un ancetre qui coupe le debordement rendrait l'en-tete collant du
     tableau collant... a lui-meme, plus a la fenetre. */
  position: relative; isolation: isolate;
  padding: 108px 0 104px;
  background:
    radial-gradient(58% 40% at 82% 6%, rgba(115, 111, 182, .4) 0%, rgba(66, 55, 122, .12) 52%, rgba(25, 20, 62, 0) 80%),
    radial-gradient(46% 30% at 8% 96%, rgba(94, 83, 152, .3) 0%, rgba(25, 20, 62, 0) 74%),
    linear-gradient(180deg, #241c53 0%, var(--surface-deep) 46%, #140f31 100%);
}
.tp-compare .tp-tete { margin-bottom: 36px; }
.tp-compare__cadre { max-width: 940px; margin: 0 auto; }

.tp-table {
  width: 100%;
  border-collapse: separate; border-spacing: 0;
  background: var(--canvas);
  border-radius: 24px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .12), 0 40px 80px -30px rgba(0, 0, 0, .65);
  table-layout: fixed;
}
.tp-table thead th {
  /* L'en-tete suit la lecture : prix et boutons restent visibles pendant tout le tableau. */
  position: sticky; top: 84px; z-index: 5;
  padding: 22px 16px 20px;
  background: var(--canvas);
  border-bottom: 1px solid var(--hairline);
  vertical-align: bottom;
  transition: box-shadow var(--dur-base) var(--ease-standard);
}
.tp-table thead th:first-child { width: 44%; border-top-left-radius: 24px; }
.tp-table thead th:last-child { border-top-right-radius: 24px; }
.tp-table.est-collant thead th { box-shadow: 0 14px 24px -18px rgba(25, 20, 62, .4); }
.tp-table__offre { text-align: center; }
.tp-table__offre > * { display: block; }
.tp-table__offre .btn { margin: 12px auto 0; display: inline-flex; }
.tp-table__nom { font-family: var(--font-display); font-size: 20px; font-weight: 600; line-height: 1.2; color: var(--brand-1); }
.tp-table__prix { margin-top: 4px; font-size: var(--text-caption-size); color: var(--ink-muted-80); }
.tp-table__prix > span:first-child { font-size: 20px; font-weight: 600; color: var(--brand-1); }
.tp-table__ruban {
  width: fit-content; margin: 0 auto 8px;
  padding: 3px 11px; border-radius: 999px;
  font-size: 11.5px !important; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--on-action); background: linear-gradient(160deg, var(--brand-4), var(--brand-5));
}

.tp-table__groupe th {
  padding: 15px 22px 11px;
  text-align: left;
  font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--action-focus);
  background: var(--surface-pearl);
  border-top: 1px solid var(--divider-soft);
}
.tp-table tbody th[scope="row"] { padding: 16px 22px; text-align: left; font-weight: 400; border-top: 1px solid var(--divider-soft); }
.tp-table__groupe + tr th[scope="row"], .tp-table__groupe + tr td { border-top: 0; }
.tp-table td { padding: 14px 12px; text-align: center; vertical-align: middle; border-top: 1px solid var(--divider-soft); }
.tp-table__groupe + tr td { border-top: 0; }
.tp-table__ligne { display: block; font-size: var(--text-caption-size); font-weight: 600; line-height: 1.3; color: var(--brand-1); }
.tp-table__desc { display: block; margin-top: 3px; font-size: 12.5px; line-height: 1.5; color: var(--ink-muted-80); }
.tp-table .tp-reco { background: rgba(115, 111, 182, .065); }
.tp-table thead .tp-reco--tete { background: linear-gradient(180deg, #f6f5fd, #eeebfb); }
.tp-table tbody tr:not(.tp-table__groupe) th,
.tp-table tbody tr:not(.tp-table__groupe) td { transition: background var(--dur-fast) var(--ease-standard); }
.tp-table tbody tr:not(.tp-table__groupe):hover th { background: rgba(115, 111, 182, .045); }
.tp-table tbody tr:not(.tp-table__groupe):hover td { background: rgba(115, 111, 182, .055); }
.tp-table tbody tr:not(.tp-table__groupe):hover td.tp-reco { background: rgba(115, 111, 182, .11); }
.tp-table tbody tr:last-child th { border-bottom-left-radius: 24px; }
.tp-table tbody tr:last-child td:last-child { border-bottom-right-radius: 24px; }

.tp-oui, .tp-non { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; }
.tp-oui { color: var(--action-focus); background: var(--action-tint-strong); }
.tp-non { color: var(--ink-muted-48); background: var(--canvas-parchment); }
.tp-valeur { font-size: var(--text-caption-size); font-weight: 600; color: var(--brand-1); }

.tp-compare__pied { margin: 32px 0 0; text-align: center; font-size: var(--text-caption-size); color: var(--on-dark-muted); }

/* ═════════════ Mise en route ═════════════ */
.tp-etapes { padding: 104px 0 108px; background: var(--canvas); }
.tp-etapes__liste { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
/* Le fil qui relie les trois etapes se trace quand on arrive dessus. */
.tp-etapes__liste::before,
.tp-etapes__liste::after {
  content: "";
  position: absolute; top: 38px; left: calc(16.66% + 46px); right: calc(16.66% + 46px);
  height: 2px; border-radius: 2px;
}
.tp-etapes__liste::before { background: repeating-linear-gradient(90deg, var(--action-tint-strong) 0 8px, transparent 8px 15px); }
.tp-etapes__liste::after { background: linear-gradient(90deg, var(--brand-5), var(--brand-3)); transform: scaleX(0); transform-origin: left; transition: transform 1.4s var(--ease-standard) .35s; }
.tp-etapes__liste.est-trace::after { transform: scaleX(1); }
.tp-etape { position: relative; padding: 0 12px; text-align: center; }
.tp-etape__rond {
  position: relative; z-index: 1;
  display: grid; place-items: center;
  width: 78px; height: 78px; margin: 0 auto 22px;
  border-radius: 50%;
  color: var(--on-action);
  background: linear-gradient(145deg, var(--brand-3), var(--brand-5));
  box-shadow: 0 16px 32px -14px rgba(94, 83, 152, .8), inset 0 1px 0 rgba(255, 255, 255, .3), 0 0 0 8px var(--canvas);
}
.tp-etape__num { margin: 0 0 6px; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--action-focus); }
.tp-etape__titre { margin: 0 0 10px; font-family: var(--font-display); font-size: var(--text-tagline-size); font-weight: 600; line-height: 1.25; color: var(--brand-1); text-wrap: balance; }
.tp-etape__texte { margin: 0 auto; max-width: 24em; font-size: var(--text-caption-size); line-height: 1.6; color: var(--ink-muted-80); text-wrap: pretty; }

/* ═════════════ Avis ═════════════ */
.tp-avis {
  position: relative; isolation: isolate; overflow: hidden;
  padding: 112px 0 116px;
  background:
    radial-gradient(58% 48% at 80% 8%, rgba(115, 111, 182, .38) 0%, rgba(66, 55, 122, .12) 52%, rgba(25, 20, 62, 0) 80%),
    linear-gradient(180deg, #241c53 0%, var(--surface-deep) 46%, #140f31 100%);
}
/* Le titre des avis : une phrase, et le nombre qui compte a l'arrivee (compteur de landing.js). */
.tp-avis .tp-tete { max-width: 1000px; margin-bottom: 48px; }
.tp-avis__phrase { margin-top: 0; }
.tp-avis__nombre {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  background: linear-gradient(90deg, #ffffff 0%, #cfc9ef 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
/* Le mur d'avis : des colonnes (masonry) aux cartes de hauteurs differentes, comme un vrai fil.
   Replie, il montre le haut du mur qui s'efface en bas ; « Voir plus d'avis » le deploie. */
/* --tp-ouverture repousse le fondu vers le bas quand on deploie le mur (0 = replie, grand = tout visible). */
@property --tp-ouverture { syntax: '<length>'; inherits: false; initial-value: 0px; }

.tp-avis__zone { position: relative; }
.tp-avis__mur { column-width: 330px; column-gap: 22px; }
.tp-avis__carte {
  display: flex; flex-direction: column; gap: 16px;
  break-inside: avoid;
  margin: 0 0 22px; padding: 26px 26px 22px;
  border-radius: 22px;
  background: var(--canvas);
  box-shadow: 0 26px 50px -26px rgba(0, 0, 0, .65);
  transition: transform var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard);
}
.tp-avis__carte:hover { transform: translateY(-5px); box-shadow: 0 34px 60px -26px rgba(0, 0, 0, .75); }
.tp-avis__haut { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tp-avis__note { display: inline-flex; gap: 3px; color: var(--signal-vigilance); }
.tp-avis__offre { padding: 4px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 600; color: var(--action-focus); background: var(--action-tint); }
.tp-avis__carte blockquote { margin: 0; }
.tp-avis__carte blockquote p { margin: 0; font-size: var(--text-caption-size); line-height: 1.6; color: var(--ink); text-wrap: pretty; }
.tp-avis__carte figcaption { display: flex; align-items: center; gap: 12px; padding-top: 16px; border-top: 1px solid var(--divider-soft); }

/* Replie : on ne montre que le haut du mur (posé par tarifs.js, jamais sans JavaScript). */
.tp-avis__zone.est-replie {
  max-height: var(--tp-plie, 640px);
  overflow: hidden;
  padding: 0 2px;
  transition: max-height .9s var(--ease-standard);
}
.tp-avis__zone.est-replie .tp-avis__mur {
  /* Le fondu se calcule sur la hauteur VISIBLE (le pli), pas sur celle du mur entier. */
  -webkit-mask-image: linear-gradient(180deg, #000 calc(var(--tp-plie, 640px) - 260px + var(--tp-ouverture)), transparent calc(var(--tp-plie, 640px) + var(--tp-ouverture)));
          mask-image: linear-gradient(180deg, #000 calc(var(--tp-plie, 640px) - 260px + var(--tp-ouverture)), transparent calc(var(--tp-plie, 640px) + var(--tp-ouverture)));
  transition: --tp-ouverture .9s var(--ease-standard);
}
.tp-avis__zone.est-replie.est-ouvert .tp-avis__mur { --tp-ouverture: 4000px; }
.tp-avis__plus { position: absolute; left: 50%; bottom: 22px; z-index: 2; transform: translateX(-50%); white-space: nowrap; box-shadow: 0 18px 36px -14px rgba(0, 0, 0, .7); transition: opacity .35s var(--ease-standard), transform .35s var(--ease-standard), background var(--dur-fast) var(--ease-standard); }
.tp-avis__plus:hover { transform: translateX(-50%) translateY(-2px); }
.tp-avis__zone.est-ouvert .tp-avis__plus { opacity: 0; pointer-events: none; transform: translateX(-50%) translateY(10px); }

/* Les classes .btn et .tp-avis__fin fixent un display : l'attribut hidden ne suffirait pas a les cacher. */
.tp-avis__plus[hidden], .tp-avis__fin[hidden] { display: none; }

/* La fin du mur : une invitation, et la marque de SentinelleFin en filigrane. */
.tp-avis__fin { position: relative; isolation: isolate; display: flex; flex-direction: column; align-items: center; gap: 16px; margin-top: 30px; padding: 44px 24px 8px; text-align: center; }
.tp-avis__fin-marque { position: absolute; z-index: -1; right: -60px; bottom: -70px; width: 360px; height: 360px; background: url("../assets/brand/icone-blanc.svg") center / contain no-repeat; opacity: .07; }
.tp-avis__fin-texte { margin: 0; font-family: var(--font-display); font-size: var(--text-tagline-size); font-weight: 600; color: var(--on-dark); }
.tp-avis__donner { box-shadow: 0 18px 36px -14px rgba(0, 0, 0, .7); }
.tp-avis__donner svg { color: var(--action); }
.tp-js .tp-avis__fin:not([hidden]) { animation: tpMonte .8s var(--ease-standard) .15s backwards; }
@media (prefers-reduced-motion: no-preference) {
  .tp-avis__fin:not([hidden]) .tp-avis__fin-marque { animation: tpTourne 140s linear infinite; }
}

/* ═════════════ Questions fréquentes ═════════════ */
.tp-faq {
  padding: 108px 0 116px;
  background:
    radial-gradient(52% 44% at 84% 82%, rgba(115, 111, 182, .24) 0%, rgba(240, 238, 251, 0) 74%),
    linear-gradient(160deg, var(--action-tint) 0%, var(--action-tint-strong) 56%, #d6d1f1 100%);
}
.tp-faq .tp-tete { margin-bottom: 40px; }   /* plus de phrase sous le titre : le titre se rapproche des questions */
.tp-faq__corps { max-width: 1040px; margin: 0 auto; display: grid; grid-template-columns: minmax(280px, 390px) minmax(0, 1fr); gap: 24px; align-items: stretch; }
.tp-faq__liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.tp-faq__q {
  display: flex; align-items: center; gap: 13px;
  width: 100%; padding: 16px 18px;
  text-align: left;
  font: inherit; font-size: var(--text-caption-size); font-weight: 600; line-height: 1.4; color: var(--brand-1);
  background: rgba(255, 255, 255, .72);
  border: 1px solid var(--hairline-alpha);
  border-radius: 15px;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard);
}
.tp-faq__q:hover { background: var(--canvas); transform: translateX(3px); }
.tp-faq__q:focus-visible { outline: 2px solid var(--action-focus); outline-offset: 2px; }
.tp-faq__q[aria-expanded="true"] { background: var(--canvas); border-color: var(--action); box-shadow: 0 0 0 3px rgba(115, 111, 182, .2), 0 12px 24px -16px rgba(66, 55, 122, .5); }
.tp-faq__pastille { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; background: var(--action-tint-strong); transition: background var(--dur-fast) var(--ease-standard), transform var(--dur-base) var(--ease-standard); }
.tp-faq__q[aria-expanded="true"] .tp-faq__pastille { background: var(--action); transform: scale(1.35); }

.tp-faq__inline { padding: 4px 4px 0; font-size: var(--text-caption-size); line-height: 1.6; color: var(--ink-muted-80); }
.tp-faq__inline p { margin: 0 0 10px; }

/* La fenetre de discussion (ordinateur). */
.tp-chat {
  display: flex; flex-direction: column;
  min-height: 560px;
  border-radius: 26px; overflow: hidden;
  background: var(--canvas);
  box-shadow: 0 2px 6px rgba(25, 20, 62, .06), 0 34px 60px -30px rgba(25, 20, 62, .5);
}
.tp-chat__entete { display: flex; align-items: center; gap: 13px; padding: 18px 26px; background: linear-gradient(135deg, var(--brand-1) 0%, var(--brand-3) 100%); color: var(--on-dark); }
.tp-chat__logo { flex: 0 0 auto; padding: 6px; border-radius: 50%; background: var(--canvas); }
.tp-chat__nom { margin: 0; font-size: 17px; font-weight: 600; }
.tp-chat__sous { margin: 2px 0 0; font-size: 14px; color: rgba(255, 255, 255, .78); }
.tp-chat__corps { flex: 1; display: flex; flex-direction: column; gap: 16px; padding: 28px 26px; background: linear-gradient(180deg, var(--surface-pearl), var(--canvas)); }
.tp-chat__pied { padding: 18px 26px 24px; border-top: 1px solid var(--divider-soft); background: var(--canvas); }

.tp-bulle { max-width: 90%; padding: 15px 19px; border-radius: 20px; font-size: var(--text-caption-size); line-height: 1.6; }
.tp-bulle p { margin: 0 0 10px; }
.tp-bulle p:last-child { margin-bottom: 0; }
.tp-bulle strong { font-weight: 600; }
.tp-bulle--moi { align-self: flex-end; color: var(--on-action); font-weight: 600; background: linear-gradient(160deg, var(--brand-5), var(--brand-4)); border-bottom-right-radius: 6px; }
.tp-bulle--nous { align-self: flex-start; color: var(--ink); background: var(--action-tint); border-bottom-left-radius: 6px; }
.tp-bulle--nous strong { color: var(--brand-1); }
.tp-bulle--moi, .tp-bulle--nous { animation: tpBulle .45s var(--ease-standard) backwards; }
@keyframes tpBulle { from { opacity: 0; transform: translateY(12px) scale(.97); } to { opacity: 1; transform: none; } }

.tp-frappe { align-self: flex-start; display: inline-flex; gap: 6px; padding: 17px 20px; border-radius: 20px; border-bottom-left-radius: 6px; background: var(--action-tint); animation: tpBulle .3s var(--ease-standard) backwards; }
.tp-frappe span { width: 8px; height: 8px; border-radius: 50%; background: var(--action); animation: tpPoint 1s ease-in-out infinite; }
.tp-frappe span:nth-child(2) { animation-delay: .15s; }
.tp-frappe span:nth-child(3) { animation-delay: .3s; }
@keyframes tpPoint { 0%, 60%, 100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-5px); opacity: 1; } }

/* Ordinateur : la reponse s'affiche dans la fenetre, pas sous la question. */
@media (min-width: 901px) {
  .tp-js .tp-faq__inline { display: none; }
}
/* Sans JavaScript : toutes les reponses restent lisibles sous leur question. */
html:not(.tp-js) .tp-chat { display: none; }

/* ═════════════ Adaptatif ═════════════ */
@media (max-width: 1080px) {
}

@media (max-width: 900px) {
  /* Mêmes paliers que l'accueil : hero 44 puis 34 px, titres de section 34 puis 30 px. */
  .tp-hero__titre { font-size: 44px; }
  .tp-tete__titre { font-size: 34px; }
  .tp-hero { padding: 158px 22px 200px; border-radius: 0 0 36px 36px; }
  .tp-offres { padding: 0 20px 80px; }
  .tp-offres__grille { grid-template-columns: minmax(0, 1fr); max-width: 560px; }
  .tp-etapes__liste { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .tp-etapes__liste::before, .tp-etapes__liste::after { display: none; }

  /* Telephone : la fenetre disparait, chaque reponse s'ouvre sous sa question. */
  .tp-faq__corps { grid-template-columns: minmax(0, 1fr); }
  .tp-chat { display: none; }
  .tp-js .tp-faq__inline { display: none; margin: -2px 0 2px; padding: 16px 18px 8px; border-radius: 0 0 15px 15px; background: rgba(255, 255, 255, .86); }
  .tp-js .tp-faq__q[aria-expanded="true"] + .tp-faq__inline { display: block; animation: tpBulle .35s var(--ease-standard) backwards; }
  .tp-faq__q[aria-expanded="true"] { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
}

@media (max-width: 640px) {
  .tp-hero__titre { font-size: 34px; }
  .tp-tete__titre { font-size: 30px; }
}
@media (max-width: 700px) {
  .tp-marque { width: 440px; height: 440px; right: -150px; top: -60px; }
  .tp-avis__zone.est-replie { --tp-plie: 560px; }
  .tp-avis__carte { padding: 22px 20px 18px; }
  .tp-avis__fin-marque { width: 260px; height: 260px; right: -70px; }
  .tp-compare, .tp-etapes { padding-top: 76px; padding-bottom: 76px; }
  .tp-avis, .tp-faq { padding-top: 80px; padding-bottom: 84px; }
  .tp-tete { margin-bottom: 40px; }
  .tp-offre { padding: 32px 24px 28px; }
  .tp-prix__montant { font-size: 36px; }

  /* Le tableau tient dans la largeur : la colonne des libelles rend un peu de place. */
  .tp-table thead th { top: 82px; padding: 16px 8px 14px; }
  .tp-table thead th:first-child { width: 46%; }
  .tp-table__nom { font-size: 15.5px; }
  .tp-table__prix { font-size: 13px; }
  .tp-table__prix > span:first-child { font-size: 17px; }
  .tp-table__offre .btn { padding: 8px 14px; }
  .tp-table__ruban { font-size: 10px !important; padding: 2px 8px; }
  .tp-table tbody th[scope="row"] { padding: 13px 12px 13px 14px; }
  .tp-table__groupe th { padding: 14px 14px 10px; }
  .tp-table td { padding: 10px 6px; }
  .tp-table__ligne { font-size: 14.5px; }
  .tp-table__desc { font-size: 12.5px; }
  .tp-valeur { font-size: 13.5px; }
}

@media (max-width: 420px) {
  .tp-hero__garanties li { font-size: 13px; padding: 7px 12px; }
  .tp-offre__ruban { right: 20px; }
}

/* ═════════════ Moins de mouvement ═════════════ */
@media (prefers-reduced-motion: reduce) {
  .tp-js [data-tp]:not(.est-visible) { opacity: 1; }
  .tp-js [data-tp].est-visible,
  .tp-js .tp-offre.est-visible .tp-liste li,
  .tp-js .est-visible .tp-volet,
  .tp-js .tp-domaines.est-visible li,
  .tp-bulle--moi, .tp-bulle--nous, .tp-frappe { animation: none; }
  .tp-etapes__liste::after { transform: scaleX(1); transition: none; }
  .tp-hero__garanties li { transition: none; }
  .tp-hero__garanties li:hover { transform: none; }
  .tp-offre, .tp-avis__carte, .tp-faq__q, .tp-avis__zone.est-replie, .tp-avis__zone.est-replie .tp-avis__mur { transition: none; }
  .tp-onde { display: none; }
}

/* Les ancres tombent sous la navigation flottante, pas dessous. */
#offres, #comparatif, #couverture { scroll-margin-top: 96px; }
#tp-avis-titre { scroll-margin-top: 150px; }


/* ═════════════ Trois cartes « couverture » : scenes retravaillees ═════════════
   Chaque carte a sa propre ambiance (identite : lavande ; telephone : nuit ; patrimoine : peche), une
   trame fine, des anneaux, et des objets plus soignes : telephone metallise avec boutons lateraux, ilot,
   reflet sur la vitre et notifications empilees ; fiches aux ombres profondes ; halo qui pulse. */
.tp-scene { height: 256px; }
.tp-scene::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(94, 83, 152, .22) 1px, transparent 1.6px);
  background-size: 18px 18px;
  -webkit-mask-image: radial-gradient(85% 85% at 70% 15%, #000 0%, transparent 75%);
          mask-image: radial-gradient(85% 85% at 70% 15%, #000 0%, transparent 75%);
}
.tp-scene::after {
  content: ""; position: absolute; left: 50%; top: 52%; width: 320px; height: 320px; margin: -160px 0 0 -160px;
  border-radius: 50%; pointer-events: none;
  background: repeating-radial-gradient(circle, transparent 0 62px, rgba(94, 83, 152, .13) 62px 63.5px);
  -webkit-mask-image: radial-gradient(circle, #000 25%, transparent 70%);
          mask-image: radial-gradient(circle, #000 25%, transparent 70%);
}
.tp-volet:nth-child(2) .tp-scene { background: radial-gradient(70% 70% at 15% 10%, rgba(255, 255, 255, .85) 0%, rgba(255, 255, 255, 0) 65%), linear-gradient(155deg, #efecfd 0%, #d9d3f6 100%); }
.tp-volet:nth-child(3) .tp-scene { background: radial-gradient(70% 70% at 15% 10%, rgba(255, 255, 255, .85) 0%, rgba(255, 255, 255, 0) 65%), linear-gradient(145deg, #e4e0f8 0%, #ece3ec 60%, #fbe6cf 100%); }
.tp-volet:nth-child(4) .tp-scene { background: radial-gradient(70% 70% at 85% 10%, rgba(255, 255, 255, .8) 0%, rgba(255, 255, 255, 0) 65%), linear-gradient(135deg, #e2e1f6 0%, #eee3e2 55%, #fee5ca 100%); }
.tp-scene__cercle { display: none; }

/* Fiches d'interface : plus de relief. */
.tp-ui {
  border-radius: 18px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 2px 6px rgba(25, 20, 62, .07), 0 28px 44px -20px rgba(25, 20, 62, .55);
}
.tp-ui__tuile { position: relative; background: linear-gradient(160deg, #fff6e6, #ffe9c2); box-shadow: inset 0 0 0 1px rgba(176, 112, 11, .18); }
.tp-ui__tuile::after {
  content: ""; position: absolute; inset: -4px; border-radius: 13px; pointer-events: none;
  box-shadow: 0 0 0 2px rgba(217, 147, 42, .35);
  animation: tpHalo 2.6s ease-out infinite;
}
@keyframes tpHalo { 0% { opacity: .9; transform: scale(.92); } 70%, 100% { opacity: 0; transform: scale(1.28); } }
.tp-ui__adresses li.est-alerte { background: linear-gradient(135deg, #fff5e3, #ffeccc); }

/* Telephone : metal, boutons lateraux, ilot, reflet, notifications empilees. */

/* Pastille « vous etes prevenu » : un halo doux. */
.tp-flottant { box-shadow: 0 14px 26px -10px rgba(25, 20, 62, .8), 0 0 0 4px rgba(255, 255, 255, .55); }

/* Bas de carte : numero en pastille, titre un cran plus grand. */
.tp-volet__num b { box-shadow: 0 6px 12px -6px rgba(94, 83, 152, .8); }
.tp-volet__titre { font-size: 22px; letter-spacing: -.35px; }

@media (max-width: 900px) {
  .tp-scene { height: 244px; }
}
@media (prefers-reduced-motion: reduce) {
  .tp-ui__tuile::after { animation: none; opacity: 0; }
}

/* Reglages apres essai : le telephone entre entierement dans sa scene, la pastille ne couvre plus la derniere ligne. */
.tp-flottant { right: -14px; bottom: -21px; }
.tp-scene:not(.tp-scene--tel) { padding-bottom: 12px; }


/* ═════════════ Carte Identite : plus de design, plus d'orange ═════════════
   Le rouge-rose de l'alerte (comme sur la page d'accueil) remplace l'orange ; l'icone devient violette ;
   un repere « en direct » pulse, et la ligne concernee montre les donnees touchees. */
.tp-volet:nth-child(2) .tp-ui { zoom: 1.06; padding: 13px 14px 14px; gap: 9px; }
.tp-ui__tuile { background: linear-gradient(150deg, #7d76cf 0%, #4a3f9a 100%); color: #fff; box-shadow: 0 8px 14px -6px rgba(74, 63, 154, .7), inset 0 1px 0 rgba(255, 255, 255, .35); }
.tp-ui__tuile::after { box-shadow: 0 0 0 2px rgba(125, 118, 207, .45); }
.tp-ui__cat { display: flex; align-items: center; gap: 8px; }
.tp-ui__live { display: inline-flex; align-items: center; gap: 5px; padding: 1px 7px 1px 6px; border-radius: 999px; font-size: 9.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #b3153f; background: rgba(210, 38, 79, .1); }
.tp-ui__live i { width: 6px; height: 6px; border-radius: 50%; background: #d2264f; animation: tpLive 1.6s ease-in-out infinite; }
@keyframes tpLive { 0%, 100% { box-shadow: 0 0 0 0 rgba(210, 38, 79, .55); } 60% { box-shadow: 0 0 0 5px rgba(210, 38, 79, 0); } }
.tp-ui__titre { font-size: 12.5px; }

.tp-ui__adresses li.est-alerte { background: linear-gradient(135deg, #fff1f4, #ffe3ea); box-shadow: inset 0 0 0 1.5px rgba(210, 38, 79, .32), 0 10px 18px -12px rgba(210, 38, 79, .6); }
.tp-ui__adresses li.est-alerte .tp-ui__point { background: #d2264f; box-shadow: 0 0 0 3px rgba(210, 38, 79, .18); }
.tp-ui__adresses li.est-alerte .tp-ui__etat { color: #b3153f; }
.tp-ui__tags { grid-column: 2; display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.tp-ui__tags i { padding: 1px 7px; border-radius: 999px; font-size: 10px; font-style: normal; font-weight: 600; color: #b3153f; background: rgba(210, 38, 79, .12); }
.tp-volet:nth-child(2) .tp-flottant { background: linear-gradient(150deg, #3a2e70, #19143e); }

/* Les fiches des autres cartes gardent leur accent, mais en violet plutot qu'en orange. */
.tp-frise li.est-alerte { background: linear-gradient(135deg, #fff1f4, #ffe3ea); box-shadow: inset 0 0 0 1.5px rgba(210, 38, 79, .3); }
.tp-frise li.est-alerte .tp-frise__pt { background: #d2264f; box-shadow: 0 0 0 3px rgba(210, 38, 79, .16); }
.tp-volet:nth-child(4) .tp-ui__tuile { background: linear-gradient(150deg, #7d76cf 0%, #4a3f9a 100%); }

@media (prefers-reduced-motion: reduce) {
  .tp-ui__live i { animation: none; }
}

/* Telephone : la fiche de la carte Identite, plus haute qu'avant, se reduit pour tenir dans sa scene. */
@media (max-width: 900px) {
  .tp-volet:nth-child(2) .tp-ui { zoom: .94; }
  .tp-ui__cat, .tp-ui__live { white-space: nowrap; }
  .tp-scene { height: 252px; }
}


/* ═════════════ Comparatif : tableau « sur fond sombre », sans carte blanche ═════════════
   Dans l'esprit d'un tableau de tarifs moderne : pas de bloc blanc, de fins filets clairs, des coches
   lumineuses, l'offre recommandee encadree d'un trait lavande avec son onglet au-dessus, et le
   commutateur mensuel / annuel range dans la case vide en haut a gauche. */
.tp-compare__cadre { max-width: 980px; padding-top: 34px; }
.tp-table {
  background: none; border-radius: 0; box-shadow: none;
  --filet: rgba(255, 255, 255, .13);
  --reco: #9d97ec;
}
.tp-table thead th {
  background: rgba(24, 18, 62, .94);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--filet);
  padding: 26px 18px 22px;
}
.tp-table thead th:first-child,
.tp-table thead th:last-child { border-radius: 0; }
.tp-table.est-collant thead th { box-shadow: 0 16px 26px -20px rgba(0, 0, 0, .7); }
.tp-table thead .tp-table__offre { border-left: 1px solid var(--filet); }
.tp-table__nom { font-size: 15px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #fff; }
.tp-table__prix { color: rgba(255, 255, 255, .62); }
.tp-table__prix > span:first-child { font-size: 26px; color: #fff; }
.tp-table__offre .btn { margin-top: 16px; }
.tp-table__offre .btn--ghost { color: #fff; background: transparent; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .45); }
.tp-table__offre .btn--ghost:hover { background: rgba(255, 255, 255, .12); }

/* Offre recommandee : colonne encadree + onglet au-dessus. */
.tp-table thead .tp-reco--tete {
  position: sticky;
  background: rgba(40, 31, 92, .96);
  border: 1.5px solid var(--reco); border-bottom: 1px solid var(--filet);
  border-radius: 22px 22px 0 0;
}
.tp-table__ruban {
  position: absolute; left: -1.5px; right: -1.5px; top: -34px; width: auto; margin: 0;
  padding: 7px 10px 8px;
  border-radius: 20px 20px 0 0;
  text-align: center; font-size: 13px !important; letter-spacing: .1em;
  color: #fff; background: linear-gradient(160deg, #8c85e0, #6a60c8);
}
.tp-table .tp-reco { background: rgba(132, 126, 214, .1); border-left: 1.5px solid var(--reco); border-right: 1.5px solid var(--reco); }
.tp-table tbody tr:last-child td.tp-reco { border-bottom: 1.5px solid var(--reco); border-radius: 0 0 22px 22px; }
.tp-table tbody td { border-left: 1px solid var(--filet); }
.tp-table tbody td.tp-reco { border-left: 1.5px solid var(--reco); }

/* Lignes et groupes */
.tp-table tbody th[scope="row"],
.tp-table td { border-top: 1px solid var(--filet); }
.tp-table__groupe th { background: none; color: #fff; font-size: 13px; letter-spacing: .1em; padding: 22px 22px 14px; border-top: 1px solid var(--filet); }
.tp-table__groupe + tr th[scope="row"], .tp-table__groupe + tr td { border-top: 0; }
.tp-table__groupe td { border-left: 1px solid var(--filet); }
.tp-table__ligne { color: #fff; font-weight: 600; }
.tp-table__desc { color: rgba(255, 255, 255, .58); }
.tp-valeur { color: rgba(255, 255, 255, .88); }
.tp-oui { color: #b9b4f2; background: none; }
.tp-oui svg { width: 19px; height: 19px; stroke-width: 2.4; }
.tp-non { color: rgba(255, 255, 255, .3); background: none; }
.tp-table tbody tr:last-child th { border-bottom-left-radius: 0; }
.tp-table tbody tr:last-child td:last-child { border-bottom-right-radius: 0; }
.tp-table tbody tr:not(.tp-table__groupe):hover th { background: rgba(255, 255, 255, .035); }
.tp-table tbody tr:not(.tp-table__groupe):hover td { background: rgba(255, 255, 255, .045); }
.tp-table tbody tr:not(.tp-table__groupe):hover td.tp-reco { background: rgba(132, 126, 214, .18); }

/* Commutateur : dans la case vide du coin, sur ordinateur. */
.tp-table__coin { vertical-align: bottom; text-align: left; }
.tp-table__coin .tp-cycle { margin: 0; width: fit-content; }
.tp-table__coin .segmented__btn { padding: 10px 20px; }
.tp-compare__pied { color: rgba(255, 255, 255, .6); }

@media (max-width: 900px) {
  .tp-compare__cadre { padding-top: 30px; }
  .tp-table thead th { padding: 18px 8px 16px; }
  .tp-table__nom { font-size: 13px; }
  .tp-table__prix > span:first-child { font-size: 19px; }
  .tp-table__ruban { top: -30px; padding: 6px 4px 7px; font-size: 10.5px !important; letter-spacing: .06em; }
  .tp-table__groupe th { padding: 18px 14px 12px; font-size: 12px; }
}

/* Lignes de groupe : trois cases, pour que les filets verticaux et l'encadre de l'offre recommandee continuent. */
.tp-table__groupe td { border-top: 1px solid var(--filet); padding: 0; }
.tp-table__groupe td.tp-reco { border-top: 1px solid var(--filet); }
.tp-table__groupe + tr td { border-top: 0; }


/* ═════════════ Quatrieme carte : le compte bancaire (premiere de la rangee) ═════════════
   Meme famille que les autres : fiche blanche sur scene teintee. Ici une mini liste d'operations :
   la pension qui tombe, puis le virement inhabituel repere, avec son motif et l'alerte « proche prevenu ». */
.tp-volets { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.tp-volet:nth-child(1) .tp-scene { background: radial-gradient(70% 70% at 15% 10%, rgba(255, 255, 255, .85) 0%, rgba(255, 255, 255, 0) 65%), linear-gradient(155deg, #e6eefc 0%, #d2dcf6 100%); }
.tp-volet:nth-child(1) .tp-scene::before { background-image: radial-gradient(rgba(58, 80, 160, .2) 1px, transparent 1.6px); }
.tp-volet:nth-child(1) .tp-scene::after { background: repeating-radial-gradient(circle, transparent 0 62px, rgba(58, 80, 160, .12) 62px 63.5px); }
.tp-volet:nth-child(1) .tp-ui { zoom: 1; width: min(100%, 290px); padding: 12px 13px 13px; gap: 9px; }
.tp-volet:nth-child(1) .tp-ui__tuile { background: linear-gradient(150deg, #5d74d6 0%, #34459b 100%); }
.tp-volet:nth-child(1) .tp-ui__tuile::after { box-shadow: 0 0 0 2px rgba(93, 116, 214, .4); }
.tp-volet:nth-child(1) .tp-flottant { background: linear-gradient(150deg, #3a2e70, #19143e); }

.tp-lecture { display: inline-flex; align-items: center; gap: 4px; padding: 1px 7px; border-radius: 999px; font-size: 9.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #34459b; background: rgba(93, 116, 214, .13); }
.tp-ops { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.tp-ops li {
  display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; column-gap: 9px; align-items: center;
  padding: 7px 10px; border-radius: 11px; background: var(--surface-pearl);
}
.tp-ops__pt { width: 8px; height: 8px; border-radius: 50%; background: var(--signal-sur); }
.tp-ops__nom { font-size: 12px; font-weight: 600; line-height: 1.25; color: var(--brand-1); min-width: 0; }
.tp-ops__nom small { display: block; margin-top: 1px; font-size: 10.5px; font-weight: 400; color: var(--ink-muted-80); }
.tp-ops__montant { font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap; }
.tp-ops__montant--plus { color: var(--signal-sur); }
.tp-ops li.est-alerte { background: linear-gradient(135deg, #fff1f4, #ffe3ea); box-shadow: inset 0 0 0 1.5px rgba(210, 38, 79, .32), 0 10px 18px -12px rgba(210, 38, 79, .6); }
.tp-ops li.est-alerte .tp-ops__pt { background: #d2264f; box-shadow: 0 0 0 3px rgba(210, 38, 79, .18); }
.tp-ops li.est-alerte .tp-ops__montant { color: #b3153f; }
.tp-ops li.est-alerte .tp-ops__nom small { color: #b3153f; font-weight: 600; }

.tp-js .est-visible .tp-ops li { animation: tpRangee .55s var(--ease-standard) backwards; animation-delay: calc(.45s + var(--r, 0) * .2s); }

/* Quatre cartes en ligne : entre 901 et 1180 px, deux par rangee pour garder des fiches lisibles. */
@media (min-width: 901px) and (max-width: 1180px) {
  .tp-volets { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
  .tp-volet:nth-child(n) .tp-ui { zoom: 1.04; }
}
/* Large : les fiches restent lisibles dans des colonnes plus etroites. */
@media (min-width: 1181px) {
  .tp-volet .tp-scene { padding: 0 14px; }
  .tp-volet .tp-ui { zoom: .98; }
  .tp-volet__titre { font-size: 19px; }
  .tp-volet__texte { padding: 16px 18px 20px; }
  .tp-volet__offres .tp-tag { font-size: 11px; padding-inline: 8px; }
}

/* Quatre colonnes : fiches un peu plus compactes, sans retour a la ligne dans les en-tetes. */
@media (min-width: 1181px) {
  .tp-scene { height: 272px; }
  .tp-ui { width: min(100%, 272px); padding: 11px 12px 12px; gap: 8px; }
  .tp-ui__tete { gap: 8px; }
  .tp-ui__cat { flex-wrap: wrap; gap: 4px 6px; row-gap: 2px; font-size: 11px; }
  .tp-ui__titre { font-size: 12px; }
  .tp-ui__live, .tp-lecture { font-size: 8.5px; padding: 1px 6px; white-space: nowrap; }
  .tp-volet:nth-child(2) .tp-ui { zoom: .94; }
  .tp-volet__num { white-space: nowrap; }
  .tp-volet__num b { flex: 0 0 auto; }
  .tp-flottant { font-size: 11.5px; padding: 6px 11px; right: -10px; bottom: -18px; }
}


/* ═════════════ Comparatif : fonds a l'essai (data-comp sur #comparatif) ═════════════
   Clairs : creme, perle, peche.  Sombres neutres : anthracite, ambre (plus de bleu). */
.tp-compare[data-comp="creme"] { background: radial-gradient(60% 40% at 50% 34%, rgba(248, 203, 141, .55) 0%, rgba(248, 203, 141, 0) 100%), linear-gradient(180deg, #fffbf5 0%, #f8e9d3 60%, #f3dcbd 100%); }
.tp-compare[data-comp="perle"] { background: radial-gradient(60% 36% at 50% 0%, rgba(132, 126, 214, .16) 0%, rgba(132, 126, 214, 0) 100%), linear-gradient(180deg, #fbfbfd 0%, #ecebf3 100%); }
.tp-compare[data-comp="peche"] { background: linear-gradient(135deg, #e2e1f6 0%, #e9e2ec 30%, #eee3e2 55%, #f6e4d6 80%, #fee5ca 100%); }
.tp-compare[data-comp="anthracite"] { background: radial-gradient(50% 34% at 50% 0%, rgba(150, 140, 220, .22) 0%, rgba(150, 140, 220, 0) 100%), linear-gradient(180deg, #1d1d23 0%, #121216 100%); }
.tp-compare[data-comp="ambre"] { background: radial-gradient(56% 38% at 70% 10%, rgba(240, 179, 90, .3) 0%, rgba(240, 179, 90, 0) 100%), linear-gradient(180deg, #271e16 0%, #15100c 100%); }

/* ---- Variantes claires : texte fonce, filets fonces ---- */
.tp-compare:is([data-comp="creme"], [data-comp="perle"], [data-comp="peche"]) .tp-tete--sombre .tp-tete__titre { color: var(--brand-1); }
.tp-compare:is([data-comp="creme"], [data-comp="perle"], [data-comp="peche"]) .eyebrow--sur-fonce { color: var(--action-focus); }
.tp-compare:is([data-comp="creme"], [data-comp="perle"], [data-comp="peche"]) .tp-cycle--sombre { background: var(--brand-1); }
.tp-compare:is([data-comp="creme"], [data-comp="perle"], [data-comp="peche"]) .tp-compare__pied { color: var(--ink-muted-80); }
.tp-compare:is([data-comp="creme"], [data-comp="perle"], [data-comp="peche"]) .tp-table {
  --filet: rgba(25, 20, 62, .12);
  --reco: #6f63c9;
}
.tp-compare:is([data-comp="creme"], [data-comp="perle"], [data-comp="peche"]) .tp-table thead th { background: rgba(255, 255, 255, .92); }
.tp-compare:is([data-comp="creme"], [data-comp="perle"], [data-comp="peche"]) .tp-table.est-collant thead th { box-shadow: 0 16px 26px -20px rgba(25, 20, 62, .35); }
.tp-compare:is([data-comp="creme"], [data-comp="perle"], [data-comp="peche"]) .tp-table thead .tp-reco--tete { background: #f3f1fd; }
.tp-compare:is([data-comp="creme"], [data-comp="perle"], [data-comp="peche"]) .tp-table__nom,
.tp-compare:is([data-comp="creme"], [data-comp="perle"], [data-comp="peche"]) .tp-table__prix > span:first-child { color: var(--brand-1); }
.tp-compare:is([data-comp="creme"], [data-comp="perle"], [data-comp="peche"]) .tp-table__prix { color: var(--ink-muted-80); }
.tp-compare:is([data-comp="creme"], [data-comp="perle"], [data-comp="peche"]) .tp-table__offre .btn--ghost { color: var(--brand-1); box-shadow: inset 0 0 0 1.5px rgba(25, 20, 62, .35); }
.tp-compare:is([data-comp="creme"], [data-comp="perle"], [data-comp="peche"]) .tp-table__offre .btn--ghost:hover { background: rgba(25, 20, 62, .06); }
.tp-compare:is([data-comp="creme"], [data-comp="perle"], [data-comp="peche"]) .tp-table .tp-reco { background: rgba(115, 111, 182, .09); }
.tp-compare:is([data-comp="creme"], [data-comp="perle"], [data-comp="peche"]) .tp-table__groupe th,
.tp-compare:is([data-comp="creme"], [data-comp="perle"], [data-comp="peche"]) .tp-table__ligne { color: var(--brand-1); }
.tp-compare:is([data-comp="creme"], [data-comp="perle"], [data-comp="peche"]) .tp-table__desc { color: var(--ink-muted-80); }
.tp-compare:is([data-comp="creme"], [data-comp="perle"], [data-comp="peche"]) .tp-valeur { color: var(--ink); }
.tp-compare:is([data-comp="creme"], [data-comp="perle"], [data-comp="peche"]) .tp-oui { color: var(--action-focus); }
.tp-compare:is([data-comp="creme"], [data-comp="perle"], [data-comp="peche"]) .tp-non { color: rgba(25, 20, 62, .3); }
.tp-compare:is([data-comp="creme"], [data-comp="perle"], [data-comp="peche"]) .tp-table tbody tr:not(.tp-table__groupe):hover th { background: rgba(25, 20, 62, .035); }
.tp-compare:is([data-comp="creme"], [data-comp="perle"], [data-comp="peche"]) .tp-table tbody tr:not(.tp-table__groupe):hover td { background: rgba(25, 20, 62, .045); }
.tp-compare:is([data-comp="creme"], [data-comp="perle"], [data-comp="peche"]) .tp-table tbody tr:not(.tp-table__groupe):hover td.tp-reco { background: rgba(115, 111, 182, .16); }

/* ---- Variantes sombres neutres ---- */
.tp-compare[data-comp="anthracite"] .tp-table thead th { background: rgba(24, 24, 30, .94); }
.tp-compare[data-comp="anthracite"] .tp-table thead .tp-reco--tete { background: rgba(46, 42, 72, .97); }
.tp-compare[data-comp="anthracite"] .tp-table .tp-reco { background: rgba(150, 140, 220, .09); }

.tp-compare[data-comp="ambre"] .tp-table { --reco: #f0b35a; }
.tp-compare[data-comp="ambre"] .tp-table thead th { background: rgba(30, 22, 16, .94); }
.tp-compare[data-comp="ambre"] .tp-table thead .tp-reco--tete { background: rgba(58, 40, 20, .97); }
.tp-compare[data-comp="ambre"] .tp-table__ruban { color: #2a1a05; background: linear-gradient(160deg, #f8cf85, #e3a13d); }
.tp-compare[data-comp="ambre"] .tp-table .tp-reco { background: rgba(240, 179, 90, .09); }
.tp-compare[data-comp="ambre"] .tp-oui { color: #f2c277; }
.tp-compare[data-comp="ambre"] .tp-table__offre .btn:not(.btn--ghost) { background: #f0b35a; color: #2a1a05; }
.tp-compare[data-comp="ambre"] .tp-table tbody tr:not(.tp-table__groupe):hover td.tp-reco { background: rgba(240, 179, 90, .18); }

/* Carte Banque : phrase de conclusion sous les deux operations. */
.tp-ops__note { margin: 1px 2px 0; font-size: 10.8px; line-height: 1.4; color: var(--ink-muted-80); }

/* Telephone et tablette : la fiche Banque est plus haute, la scene gagne quelques pixels pour ne pas couper la pastille. */
@media (max-width: 900px) {
  .tp-scene { height: 272px; }
}


/* ═════════════ Comparatif : exterieur bleu, tableau blanc a l'interieur (data-comp) ═════════════
   Six bleus : ciel, azur, indigo, aurore, minuit, lagon. Le tableau redevient une carte blanche,
   l'offre recommandee garde son cadre violet et son onglet. */
.tp-compare[data-comp="ciel"] { background: radial-gradient(60% 40% at 50% 0%, rgba(255, 255, 255, .8) 0%, rgba(255, 255, 255, 0) 100%), linear-gradient(180deg, #dfeafd 0%, #b9d0f8 100%); }
.tp-compare[data-comp="azur"] { background: radial-gradient(50% 36% at 18% 0%, rgba(255, 255, 255, .28) 0%, rgba(255, 255, 255, 0) 100%), linear-gradient(150deg, #4068e6 0%, #2b43b5 55%, #1f2f8a 100%); }
.tp-compare[data-comp="indigo"] { background: radial-gradient(56% 40% at 85% 0%, rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, 0) 100%), linear-gradient(150deg, #d8dcfb 0%, #b8bff3 55%, #9fa7ec 100%); }
.tp-compare[data-comp="aurore"] { background: radial-gradient(46% 38% at 94% 6%, rgba(255, 158, 192, .55) 0%, rgba(255, 158, 192, 0) 100%), radial-gradient(46% 40% at 4% 96%, rgba(110, 224, 232, .5) 0%, rgba(110, 224, 232, 0) 100%), linear-gradient(150deg, #4c63e6 0%, #3a3fb8 100%); }
.tp-compare[data-comp="minuit"] { background: radial-gradient(56% 38% at 50% 0%, rgba(90, 120, 230, .45) 0%, rgba(90, 120, 230, 0) 100%), linear-gradient(160deg, #13215a 0%, #0c1640 100%); }
.tp-compare[data-comp="lagon"] { background: radial-gradient(50% 40% at 85% 0%, rgba(255, 255, 255, .3) 0%, rgba(255, 255, 255, 0) 100%), linear-gradient(150deg, #2f6fe0 0%, #2391cc 55%, #1cb3c4 100%); }

/* Titres : clairs sur les bleus soutenus, fonces sur les bleus pales. */
.tp-compare:is([data-comp="ciel"], [data-comp="indigo"]) .tp-tete--sombre .tp-tete__titre { color: var(--brand-1); }
.tp-compare:is([data-comp="ciel"], [data-comp="indigo"]) .eyebrow--sur-fonce { color: var(--action-focus); }
.tp-compare:is([data-comp="ciel"], [data-comp="indigo"]) .tp-compare__pied { color: var(--ink-muted-80); }
.tp-compare:is([data-comp="azur"], [data-comp="aurore"], [data-comp="minuit"], [data-comp="lagon"]) .eyebrow--sur-fonce { color: rgba(255, 255, 255, .8); }

/* Le tableau : carte blanche. */
.tp-compare:is([data-comp="ciel"], [data-comp="azur"], [data-comp="indigo"], [data-comp="aurore"], [data-comp="minuit"], [data-comp="lagon"]) .tp-table {
  --filet: rgba(25, 20, 62, .11);
  --reco: #6f63c9;
  background: #fff;
  border-radius: 26px;
  box-shadow: 0 2px 6px rgba(10, 16, 60, .12), 0 40px 80px -30px rgba(10, 16, 60, .55);
}
.tp-compare:is([data-comp="ciel"], [data-comp="azur"], [data-comp="indigo"], [data-comp="aurore"], [data-comp="minuit"], [data-comp="lagon"]) .tp-cycle--sombre { background: var(--brand-1); }
.tp-compare:is([data-comp="ciel"], [data-comp="azur"], [data-comp="indigo"], [data-comp="aurore"], [data-comp="minuit"], [data-comp="lagon"]) .tp-table thead th { background: rgba(255, 255, 255, .97); }
.tp-compare:is([data-comp="ciel"], [data-comp="azur"], [data-comp="indigo"], [data-comp="aurore"], [data-comp="minuit"], [data-comp="lagon"]) .tp-table thead th:first-child { border-top-left-radius: 26px; }
.tp-compare:is([data-comp="ciel"], [data-comp="azur"], [data-comp="indigo"], [data-comp="aurore"], [data-comp="minuit"], [data-comp="lagon"]) .tp-table.est-collant thead th { box-shadow: 0 16px 26px -20px rgba(25, 20, 62, .35); }
.tp-compare:is([data-comp="ciel"], [data-comp="azur"], [data-comp="indigo"], [data-comp="aurore"], [data-comp="minuit"], [data-comp="lagon"]) .tp-table thead .tp-reco--tete { background: #f3f1fd; }
.tp-compare:is([data-comp="ciel"], [data-comp="azur"], [data-comp="indigo"], [data-comp="aurore"], [data-comp="minuit"], [data-comp="lagon"]) .tp-table__ruban { background: linear-gradient(160deg, #7a70dc, #4e43b8); }
.tp-compare:is([data-comp="ciel"], [data-comp="azur"], [data-comp="indigo"], [data-comp="aurore"], [data-comp="minuit"], [data-comp="lagon"]) .tp-table__nom,
.tp-compare:is([data-comp="ciel"], [data-comp="azur"], [data-comp="indigo"], [data-comp="aurore"], [data-comp="minuit"], [data-comp="lagon"]) .tp-table__prix > span:first-child { color: var(--brand-1); }
.tp-compare:is([data-comp="ciel"], [data-comp="azur"], [data-comp="indigo"], [data-comp="aurore"], [data-comp="minuit"], [data-comp="lagon"]) .tp-table__prix { color: var(--ink-muted-80); }
.tp-compare:is([data-comp="ciel"], [data-comp="azur"], [data-comp="indigo"], [data-comp="aurore"], [data-comp="minuit"], [data-comp="lagon"]) .tp-table__offre .btn--ghost { color: var(--brand-1); box-shadow: inset 0 0 0 1.5px rgba(25, 20, 62, .35); }
.tp-compare:is([data-comp="ciel"], [data-comp="azur"], [data-comp="indigo"], [data-comp="aurore"], [data-comp="minuit"], [data-comp="lagon"]) .tp-table__offre .btn--ghost:hover { background: rgba(25, 20, 62, .06); }
.tp-compare:is([data-comp="ciel"], [data-comp="azur"], [data-comp="indigo"], [data-comp="aurore"], [data-comp="minuit"], [data-comp="lagon"]) .tp-table .tp-reco { background: rgba(115, 111, 182, .08); }
.tp-compare:is([data-comp="ciel"], [data-comp="azur"], [data-comp="indigo"], [data-comp="aurore"], [data-comp="minuit"], [data-comp="lagon"]) .tp-table__groupe th,
.tp-compare:is([data-comp="ciel"], [data-comp="azur"], [data-comp="indigo"], [data-comp="aurore"], [data-comp="minuit"], [data-comp="lagon"]) .tp-table__ligne { color: var(--brand-1); }
.tp-compare:is([data-comp="ciel"], [data-comp="azur"], [data-comp="indigo"], [data-comp="aurore"], [data-comp="minuit"], [data-comp="lagon"]) .tp-table__groupe th { background: var(--surface-pearl); }
.tp-compare:is([data-comp="ciel"], [data-comp="azur"], [data-comp="indigo"], [data-comp="aurore"], [data-comp="minuit"], [data-comp="lagon"]) .tp-table__groupe td { background: var(--surface-pearl); }
.tp-compare:is([data-comp="ciel"], [data-comp="azur"], [data-comp="indigo"], [data-comp="aurore"], [data-comp="minuit"], [data-comp="lagon"]) .tp-table__desc { color: var(--ink-muted-80); }
.tp-compare:is([data-comp="ciel"], [data-comp="azur"], [data-comp="indigo"], [data-comp="aurore"], [data-comp="minuit"], [data-comp="lagon"]) .tp-valeur { color: var(--ink); }
.tp-compare:is([data-comp="ciel"], [data-comp="azur"], [data-comp="indigo"], [data-comp="aurore"], [data-comp="minuit"], [data-comp="lagon"]) .tp-oui { color: var(--action-focus); }
.tp-compare:is([data-comp="ciel"], [data-comp="azur"], [data-comp="indigo"], [data-comp="aurore"], [data-comp="minuit"], [data-comp="lagon"]) .tp-non { color: rgba(25, 20, 62, .3); }
.tp-compare:is([data-comp="ciel"], [data-comp="azur"], [data-comp="indigo"], [data-comp="aurore"], [data-comp="minuit"], [data-comp="lagon"]) .tp-table tbody tr:last-child th { border-bottom-left-radius: 26px; }
.tp-compare:is([data-comp="ciel"], [data-comp="azur"], [data-comp="indigo"], [data-comp="aurore"], [data-comp="minuit"], [data-comp="lagon"]) .tp-table tbody tr:not(.tp-table__groupe):hover th { background: rgba(25, 20, 62, .035); }
.tp-compare:is([data-comp="ciel"], [data-comp="azur"], [data-comp="indigo"], [data-comp="aurore"], [data-comp="minuit"], [data-comp="lagon"]) .tp-table tbody tr:not(.tp-table__groupe):hover td { background: rgba(25, 20, 62, .045); }
.tp-compare:is([data-comp="ciel"], [data-comp="azur"], [data-comp="indigo"], [data-comp="aurore"], [data-comp="minuit"], [data-comp="lagon"]) .tp-table tbody tr:not(.tp-table__groupe):hover td.tp-reco { background: rgba(115, 111, 182, .16); }

/* ═════════════ Comparatif : bleu « minuit » a l'exterieur, carte blanche compacte a l'interieur ═════════════
   Fond marine avec deux lueurs et une trame qui s'efface ; le tableau, plus etroit (820 px), se lit comme
   une carte : en-tete collant, offre recommandee encadree de violet avec son onglet et des coches pleines.
   (Les regles data-comp ci-dessus sont des essais : elles ne s'appliquent plus, aucun attribut n'est pose.) */
.tp-compare {
  /* Meme fond que la section des avis, juste au-dessus : violet nuit, lueur indigo en haut a droite. */
  background:
    radial-gradient(58% 48% at 80% 8%, rgba(115, 111, 182, .38) 0%, rgba(66, 55, 122, .12) 52%, rgba(25, 20, 62, 0) 80%),
    linear-gradient(180deg, #241c53 0%, var(--surface-deep) 46%, #140f31 100%);
}
.tp-compare::before { content: none; }
.tp-compare .eyebrow--sur-fonce { color: var(--on-dark-muted); }
.tp-compare .tp-tete--sombre .tp-tete__titre { color: #fff; }
.tp-compare .tp-tete { margin-bottom: 26px; }

.tp-compare .tp-compare__cadre { max-width: 820px; padding-top: 0; }
.tp-compare .tp-cycle--sombre { background: var(--brand-1); }

.tp-compare .tp-table {
  --filet: rgba(25, 20, 62, .1);
  --reco: var(--action);
  background: #fff;
  border-radius: 24px;
  box-shadow: 0 2px 6px rgba(9, 6, 28, .2), 0 44px 80px -30px rgba(9, 6, 28, .8), 0 0 0 1px rgba(255, 255, 255, .06);
}
.tp-compare .tp-table thead th { background: rgba(255, 255, 255, .97); padding: 18px 12px 15px; }
.tp-compare .tp-table thead th:first-child { border-top-left-radius: 24px; }
.tp-compare .tp-table.est-collant thead th { box-shadow: 0 16px 26px -20px rgba(25, 20, 62, .4); }
.tp-compare .tp-table thead .tp-reco--tete { background: linear-gradient(180deg, #fff, var(--action-tint)); border-radius: 18px 18px 0 0; }
/* « Recommandé » : une pastille rangee dans l'en-tete de la colonne, au-dessus du nom. Plus d'onglet qui
   depasse : rien a aligner sur le cadre, et l'en-tete collant reste d'une seule piece. */
.tp-compare .tp-table__ruban {
  position: static; width: fit-content; margin: 0 auto 9px;
  padding: 3px 11px; border-radius: 999px;
  font-size: 10px !important; letter-spacing: .1em;
  background: linear-gradient(160deg, var(--brand-4), var(--brand-5));
  box-shadow: 0 6px 12px -6px rgba(94, 83, 152, .7);
}
.tp-compare .tp-table__nom { font-size: 12.5px; letter-spacing: .09em; color: var(--brand-1); }
.tp-compare .tp-table__prix { margin-top: 3px; font-size: 12px; color: var(--ink-muted-80); }
.tp-compare .tp-table__prix > span:first-child { font-size: 23px; color: var(--brand-1); }
.tp-compare .tp-table__offre .btn { margin-top: 11px; padding: 7px 18px; font-size: 13px; }
.tp-compare .tp-table__offre .btn--ghost { color: var(--brand-1); box-shadow: inset 0 0 0 1.5px rgba(25, 20, 62, .3); }
.tp-compare .tp-table__offre .btn--ghost:hover { background: rgba(25, 20, 62, .06); }
.tp-compare .tp-table__coin .segmented__btn { padding: 8px 16px; font-size: 12.5px; }

/* Lignes : plus compactes. */
.tp-compare .tp-table thead th:first-child { width: 47%; }
.tp-compare .tp-table tbody th[scope="row"] { padding: 11px 18px; }
.tp-compare .tp-table td { padding: 9px 8px; }
.tp-compare .tp-table__ligne { font-size: 13.5px; color: var(--brand-1); }
.tp-compare .tp-table__desc { margin-top: 2px; font-size: 11.5px; line-height: 1.45; color: var(--ink-muted-80); }
.tp-compare .tp-valeur { font-size: 13px; color: var(--ink); }
.tp-compare .tp-table__groupe th { padding: 15px 18px 9px; font-size: 11px; letter-spacing: .12em; color: var(--brand-5); background: var(--action-tint); }
.tp-compare .tp-table__groupe td { background: var(--action-tint); }
.tp-compare .tp-table .tp-reco { background: rgba(115, 111, 182, .06); }
.tp-compare .tp-table__groupe td.tp-reco { background: var(--action-tint-strong); }

/* Coches : discretes pour l'offre de base, pleines pour l'offre recommandee. */
.tp-compare .tp-oui { width: 22px; height: 22px; color: var(--action-focus); background: var(--action-tint); }
.tp-compare .tp-oui svg { width: 13px; height: 13px; stroke-width: 2.8; }
.tp-compare .tp-reco .tp-oui { color: #fff; background: linear-gradient(145deg, var(--brand-4), var(--brand-5)); box-shadow: 0 6px 12px -6px rgba(94, 83, 152, .8); }
.tp-compare .tp-non { color: rgba(25, 20, 62, .3); background: none; }
.tp-compare .tp-table tbody tr:last-child th { border-bottom-left-radius: 24px; }
.tp-compare .tp-table tbody tr:last-child td.tp-reco { border-radius: 0 0 22px 22px; }
.tp-compare .tp-table tbody tr:not(.tp-table__groupe):hover th { background: rgba(25, 20, 62, .03); }
.tp-compare .tp-table tbody tr:not(.tp-table__groupe):hover td { background: rgba(25, 20, 62, .04); }
.tp-compare .tp-table tbody tr:not(.tp-table__groupe):hover td.tp-reco { background: rgba(115, 111, 182, .15); }
.tp-compare .tp-compare__pied { color: rgba(255, 255, 255, .7); }

@media (max-width: 900px) {
  .tp-compare .tp-compare__cadre { max-width: none; padding-top: 0; }
  .tp-compare .tp-table thead th { padding: 15px 6px 13px; }
  .tp-compare .tp-table thead th:first-child { width: 42%; }
  .tp-compare .tp-table__nom { font-size: 11.5px; letter-spacing: .05em; }
  .tp-compare .tp-table__prix > span:first-child { font-size: 18px; }
  .tp-compare .tp-table__ruban { margin-bottom: 7px; padding: 3px 8px; font-size: 9px !important; letter-spacing: .05em; }
  .tp-compare .tp-table__offre .btn { padding: 7px 14px; }
  .tp-compare .tp-table tbody th[scope="row"] { padding: 11px 10px 11px 14px; }
  .tp-compare .tp-table__groupe th { padding: 14px 14px 8px; }
  .tp-compare .tp-table td { padding: 9px 4px; }
  .tp-compare .tp-table__ligne { font-size: 13.5px; }
  .tp-compare .tp-table__desc { font-size: 11.5px; }
}

/* Carte « Téléphone » : le même iPhone que les écrans de la page d'accueil (cadre dessiné, îlot, écran blanc) à la place du verrou d'écran
   violet. Il part du haut de la scène et le bas est coupé par la carte : on voit la barre d'état, la ligne surveillée et le début de l'alerte. */
.tp-volet .tp-scene--tel { place-items: start center; align-content: start; padding: 22px 14px 0; }
.tp-appareil { --tel-w: 206px; z-index: 1; margin: 0 auto; }
.tp-volet:hover .tp-appareil { transform: translateY(-4px); }
@media (max-width: 560px) { .tp-volet .tp-scene--tel { padding-top: 16px; } }
/* L'écran est verrouillé : le fond d'écran violet de la marque, l'heure, et la notification SentinelleFin qui vient d'arriver. */
.tp-appareil .tel__ecran {
  background:
    radial-gradient(90% 45% at 15% 0%, rgba(160, 150, 255, .55) 0%, rgba(160, 150, 255, 0) 70%),
    radial-gradient(70% 40% at 95% 38%, rgba(255, 175, 120, .22) 0%, rgba(255, 175, 120, 0) 70%),
    linear-gradient(180deg, #6a5fae 0%, #42377a 52%, #231a52 100%);
  color: var(--on-dark);
}
.tp-appareil .tel__barre { color: var(--on-dark); }
.tp-verrou { padding: 18px 10px 0; text-align: center; }
.tp-verrou__heure { margin: 0 0 14px; font-family: var(--font-display); font-size: 40px; font-weight: 600; line-height: 1; letter-spacing: -1.2px; text-shadow: 0 2px 14px rgba(0, 0, 0, .25); }
.tp-notif {
  position: relative; padding: 9px 11px 10px; border-radius: 16px; text-align: left;
  color: var(--ink); background: rgba(255, 255, 255, .95);
  box-shadow: 0 16px 26px -12px rgba(7, 5, 28, .75);
}
/* Deux notifications plus anciennes dépassent dessous, comme sur un vrai écran verrouillé. */
.tp-notif::before,
.tp-notif::after { content: ""; position: absolute; left: 10px; right: 10px; height: 10px; border-radius: 0 0 14px 14px; z-index: -1; }
.tp-notif::before { bottom: -7px; background: rgba(255, 255, 255, .55); }
.tp-notif::after { bottom: -13px; left: 20px; right: 20px; background: rgba(255, 255, 255, .28); }
.tp-notif__tete { display: flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 600; color: var(--ink-muted-80); }
.tp-notif__tete img { border-radius: 5px; }
.tp-notif__quand { margin-left: auto; font-weight: 400; }
.tp-notif__titre { margin: 6px 0 3px; font-size: 12.5px; font-weight: 700; line-height: 1.25; color: var(--brand-1); }
.tp-notif__texte { margin: 0; font-size: 11px; line-height: 1.4; color: var(--ink-muted-80); }

/* En-tête de carte (numéro, rubrique, offres) : il tient toujours dans la carte. Avant, « Téléphone » et ses deux pastilles débordaient du cadre
   (de 9 px sur ordinateur à 86 px sur un petit téléphone). Un peu moins d'espace entre les lettres et entre les pièces ; et sur téléphone étroit,
   les offres passent SOUS le numéro dans les quatre cartes à la fois, pour qu'elles restent alignées entre elles. */
.tp-volet__entete { gap: 8px; min-width: 0; }
.tp-volet__num { gap: 8px; letter-spacing: .08em; white-space: nowrap; }
.tp-volet__offres { gap: 4px; flex: 0 0 auto; }
.tp-tag { padding: 3px 9px; }
@media (max-width: 440px) {
  .tp-volet__offres .tp-tag { font-size: 11px; padding-inline: 8px; }
}
@media (max-width: 400px) {
  .tp-volet__entete { flex-wrap: wrap; row-gap: 8px; justify-content: flex-start; }
  .tp-volet__offres { flex-basis: 100%; }
}
/* Quatre colonnes étroites (de 1181 à 1279 px) : pas la place pour tout sur une ligne, les offres passent dessous dans les quatre cartes. */
@media (min-width: 1181px) and (max-width: 1279px) {
  .tp-volet__entete { flex-wrap: wrap; row-gap: 8px; justify-content: flex-start; }
  .tp-volet__offres { flex-basis: 100%; }
}