/* ============ Liens de maillage interne ============ */
.ptso-link { color: #e11d48; text-decoration: none; border-bottom: 1px solid rgba(225,29,72,.35); }
.ptso-link:hover { border-bottom-color: #e11d48; }

/* ============ Verre dépoli renforcé ============ */
.glass { backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%); }

/* ============ ORBE SIRI — nuage de fumée ============ */
.siri-orb {
  position: relative; width: 60px; height: 60px; border-radius: 9999px;
  display: grid; place-items: center; cursor: pointer; border: none; padding: 0;
  background: radial-gradient(circle at 35% 30%, #ff6b6b, #e11d48 45%, #7c3aed 75%, #1e3a8a 100%);
  box-shadow: 0 10px 32px rgba(225,29,72,.45), inset 0 0 12px rgba(255,255,255,.25);
  overflow: hidden; isolation: isolate;
  animation: siri-heart 1.5s ease-in-out infinite;
  will-change: transform;
}
.siri-orb--sm { width: 30px; height: 30px; box-shadow: 0 4px 14px rgba(225,29,72,.4); }

/* Volutes de fumée : plusieurs couches floues qui dérivent à des rythmes différents */
.siri-orb::before, .siri-orb::after, .siri-orb-inner, .siri-orb-inner::before {
  content: ""; position: absolute; border-radius: 9999px; filter: blur(8px); mix-blend-mode: screen;
}
.siri-orb-inner { inset: -25%; background:
  radial-gradient(38% 38% at 30% 30%, rgba(255,59,48,.95), transparent 70%),
  radial-gradient(42% 42% at 70% 60%, rgba(124,58,237,.9), transparent 70%);
  animation: smoke-a 3.4s ease-in-out infinite; }
.siri-orb-inner::before { inset: 8%; background:
  radial-gradient(48% 48% at 60% 30%, rgba(6,182,212,.85), transparent 70%);
  animation: smoke-b 4.2s ease-in-out infinite; }
.siri-orb::before { inset: -15%; background:
  radial-gradient(44% 44% at 35% 70%, rgba(37,99,235,.85), transparent 70%);
  animation: smoke-b 3.8s ease-in-out infinite reverse; }
.siri-orb::after { inset: -20%; background:
  radial-gradient(40% 40% at 75% 35%, rgba(255,107,107,.8), transparent 70%);
  animation: smoke-a 4.6s ease-in-out infinite reverse; }
.siri-orb--sm .siri-orb-inner, .siri-orb--sm::before, .siri-orb--sm::after { filter: blur(4px); }

/* État réfléchi / parle : le cœur s'emballe, la fumée s'accélère */
.siri-orb[data-state="thinking"], .siri-orb[data-state="speaking"] { animation: siri-heart .8s ease-in-out infinite, siri-glow 1.1s ease-in-out infinite; }
.siri-orb[data-state="thinking"] .siri-orb-inner,
.siri-orb[data-state="speaking"] .siri-orb-inner { animation-duration: 1.5s; }
.siri-orb[data-state="thinking"] .siri-orb-inner::before,
.siri-orb[data-state="speaking"] .siri-orb-inner::before,
.siri-orb[data-state="thinking"]::before, .siri-orb[data-state="speaking"]::before,
.siri-orb[data-state="thinking"]::after, .siri-orb[data-state="speaking"]::after { animation-duration: 1.8s; }

@keyframes smoke-a {
  0%   { transform: translate(0,0) rotate(0deg) scale(1); }
  25%  { transform: translate(14%,-12%) rotate(90deg) scale(1.25); }
  50%  { transform: translate(6%,12%) rotate(180deg) scale(.85); }
  75%  { transform: translate(-12%,6%) rotate(270deg) scale(1.15); }
  100% { transform: translate(0,0) rotate(360deg) scale(1); }
}
@keyframes smoke-b {
  0%   { transform: translate(0,0) rotate(0deg) scale(1.05); }
  33%  { transform: translate(-14%,10%) rotate(120deg) scale(1.3); }
  66%  { transform: translate(12%,-10%) rotate(240deg) scale(.9); }
  100% { transform: translate(0,0) rotate(360deg) scale(1.05); }
}
@keyframes siri-heart {
  0%   { transform: scale(1); }
  12%  { transform: scale(1.15); }
  24%  { transform: scale(1.0); }
  36%  { transform: scale(1.09); }
  50%  { transform: scale(1.0); }
  100% { transform: scale(1); }
}
@keyframes siri-glow {
  0%,100% { box-shadow: 0 10px 32px rgba(225,29,72,.5), inset 0 0 12px rgba(255,255,255,.25); }
  50%     { box-shadow: 0 14px 54px rgba(124,58,237,.85), inset 0 0 18px rgba(255,255,255,.35); }
}
@keyframes siri-float { 0%,100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-5px) scale(1.04); } }
@keyframes siri-pulse { 0%,100% { box-shadow: 0 10px 32px rgba(225,29,72,.45); } 50% { box-shadow: 0 14px 50px rgba(124,58,237,.8); } }

/* ============ Apparition au défilement ============ */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.reveal-in { opacity: 1; transform: none; }

/* ============ Badge d'icône ============ */
.icon-badge { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px;
  background: linear-gradient(135deg, rgba(225,29,72,.14), rgba(124,58,237,.14)); color: #e11d48; }
.icon-badge svg { width: 22px; height: 22px; }

/* ============ Survol des cartes ============ */
.card-lift { transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s; }
.card-lift:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -12px rgba(0,0,0,.25); }

/* ============ Bulles de chat ============ */
.chat-bubble { max-width: 85%; padding: 8px 12px; border-radius: 16px; line-height: 1.4; }
.chat-user { margin-left: auto; background: #e11d48; color: #fff; border-bottom-right-radius: 4px; }
.chat-bot { background: rgba(120,120,128,.16); border-bottom-left-radius: 4px; }
.dark .chat-bot { background: rgba(120,120,128,.28); }
.chat-typing span { display:inline-block; width:6px; height:6px; border-radius:9999px; background: currentColor; opacity:.5; animation: typing 1.2s infinite; }
.chat-typing span:nth-child(2){ animation-delay:.2s } .chat-typing span:nth-child(3){ animation-delay:.4s }
@keyframes typing { 0%,60%,100%{ transform: translateY(0); opacity:.4 } 30%{ transform: translateY(-4px); opacity:1 } }

/* ============ Accordéon FAQ ============ */
.faq-item > button svg { transition: transform .25s ease; }
.faq-item.open > button svg { transform: rotate(45deg); }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height .3s ease; }

/* ============ Anneaux d'activité (Apple Watch) ============ */
.ring-track { stroke: rgba(120,120,128,.2); }
.ring-progress { transition: stroke-dashoffset 1s ease; transform: rotate(-90deg); transform-origin: 50% 50%; stroke-linecap: round; }

/* ============ Réduction de mouvement ============ */
@media (prefers-reduced-motion: reduce) {
  /* L'orbe IA reste animée (battement) — c'est un élément interactif voulu.
     On allège seulement les apparitions au défilement. */
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  * { scroll-behavior: auto !important; }
}

/* ============ Focus clavier visible ============ */
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 2px solid #e11d48; outline-offset: 2px;
}

/* ============ Touches colorées / vivantes ============ */
.text-gradient {
  background: linear-gradient(110deg, #ff3b30 0%, #e11d48 30%, #7c3aed 65%, #06b6d4 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  background-size: 200% auto; animation: grad-pan 6s linear infinite;
}
@keyframes grad-pan { to { background-position: 200% center; } }

.btn-grad {
  background: linear-gradient(110deg, #ff3b30, #e11d48 45%, #7c3aed);
  background-size: 160% auto; transition: background-position .5s ease, transform .2s ease, box-shadow .3s;
  box-shadow: 0 8px 24px -6px rgba(225,29,72,.6);
}
.btn-grad:hover { background-position: right center; transform: translateY(-1px); box-shadow: 0 12px 30px -6px rgba(124,58,237,.6); }

.icon-badge { background: linear-gradient(135deg, rgba(225,29,72,.18), rgba(124,58,237,.18)); }
.icon-badge:hover { background: linear-gradient(135deg, rgba(225,29,72,.3), rgba(124,58,237,.3)); }

/* ============ Typographie : titres vs texte ============ */
h1, h2, h3, h4, .font-display { font-family: 'Bricolage Grotesque', Inter, system-ui, sans-serif; letter-spacing: -0.01em; }
body { font-family: 'Inter', -apple-system, system-ui, sans-serif; }

/* ============ Trait décoratif sous les titres ============ */
.t-dash::after {
  content: ''; display: block; width: 0; height: 4px; border-radius: 99px; margin-top: .8rem;
  background: linear-gradient(90deg, #e11d48, #7c3aed);
  transition: width .7s cubic-bezier(.2,.8,.2,1);
}
.t-dash.t-dash-in::after { width: 52px; }
.t-dash.is-center::after { margin-left: auto; margin-right: auto; }

/* ============ Phrase qui défile (hero) ============ */
.rotator { display:inline-block; transition: opacity .4s ease, transform .4s ease; }
.rotator.is-out { opacity: 0; transform: translateY(-8px); }

/* Contenu des pages générées */
.prose-ptso h2 { font-family:'Bricolage Grotesque',sans-serif; font-size:1.5rem; font-weight:700; margin-top:2rem; margin-bottom:.5rem; letter-spacing:-.01em; }
.prose-ptso p { margin-bottom: 1rem; }
.prose-ptso ul { list-style: disc; padding-left: 1.25rem; margin-bottom: 1rem; }

/* ===== Correctif mobile : pas de carré autour de l'orbe Jasmine ===== */
.siri-orb,
.siri-orb:focus,
.siri-orb:focus-visible,
.siri-orb:active {
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: none;
  appearance: none;
  outline: none !important;
  border: none !important;
  background-color: transparent;
}
#siri-launcher, #siri-toggle { -webkit-tap-highlight-color: transparent; background: transparent; }

/* ===== Mise en forme des contenus riches (pages éditables, articles) ===== */
.prose-ptso { line-height: 1.75; }
.prose-ptso h2 { font-family: "Bricolage Grotesque", Inter, sans-serif; font-weight: 700; font-size: 1.6rem; line-height: 1.2; margin: 2rem 0 .85rem; }
.prose-ptso h3 { font-family: "Bricolage Grotesque", Inter, sans-serif; font-weight: 600; font-size: 1.25rem; margin: 1.5rem 0 .6rem; }
.prose-ptso p { margin: 0 0 1.05rem; color: #3f3f46; }
.dark .prose-ptso p { color: #d4d4d8; }
.prose-ptso strong { font-weight: 700; color: #e11d48; }
.prose-ptso a:not([class*="bg-"]) { color: #e11d48; text-decoration: underline; text-underline-offset: 2px; }
.prose-ptso ul, .prose-ptso ol { margin: 0 0 1.1rem 1.25rem; }
.prose-ptso ul { list-style: disc; }
.prose-ptso ol { list-style: decimal; }
.prose-ptso li { margin: .35rem 0; }
.prose-ptso img { border-radius: 14px; margin: 1.2rem 0; max-width: 100%; height: auto; }

/* ===== Correctif carré orbe sur MOBILE uniquement (découpe circulaire forcée) ===== */
@media (max-width: 767px), (hover: none) {
  .siri-orb, .siri-orb--sm {
    clip-path: circle(50% at 50% 50%);
    -webkit-mask-image: -webkit-radial-gradient(circle, #fff 99%, transparent 100%);
            mask-image: radial-gradient(circle, #fff 99%, transparent 100%);
  }
}

/* ===== Animations supplémentaires (survol images, apparition) ===== */
.card-lift img, .card-lift video { transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.card-lift:hover img, .card-lift:hover video { transform: scale(1.045); }
a, button { transition: color .2s ease, background-color .2s ease, border-color .2s ease, transform .2s ease; }
.icon-badge { transition: transform .3s ease, background-color .3s ease; }
.card-lift:hover .icon-badge, a:hover > .icon-badge { transform: translateY(-2px) scale(1.06); }
@media (prefers-reduced-motion: reduce) {
  .card-lift:hover img, .card-lift:hover video, .card-lift:hover .icon-badge { transform: none; }
}

/* ===== Miniature vidéo : badge ▶ play (se masque pendant la lecture) ===== */
.video-thumb { position: relative; line-height: 0; }
.video-thumb .video-play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 56px; height: 56px; border-radius: 9999px;
  background: rgba(0,0,0,.5); box-shadow: 0 4px 18px rgba(0,0,0,.35);
  pointer-events: none; transition: opacity .3s ease, transform .3s ease, background-color .3s ease;
}
.video-thumb .video-play::after {
  content: ''; position: absolute; top: 50%; left: 54%; transform: translate(-50%, -50%);
  border-style: solid; border-width: 10px 0 10px 17px; border-color: transparent transparent transparent #fff;
}
.video-thumb:hover .video-play { transform: translate(-50%, -50%) scale(1.08); background: rgba(225,29,72,.9); }
.video-thumb.playing .video-play { opacity: 0; }