@import 'tailwindcss';
@plugin '@tailwindcss/typography';

/* Police Plus Jakarta Sans servie en local via Fontsource (RGPD : aucune requête Google) */
/* ── POLICES : LE REMPLACEMENT EST DESACTIVE ────────────────────────────────
   Fontsource declare `font-display: swap` et embarque neuf alphabets par
   graisse. Deux problemes, un par ligne de ce constat.

   LE REMPLACEMENT. En `swap`, le texte s'affiche d'abord dans le repli puis
   bascule quand la vraie police arrive. Sur connexion lente cette bascule
   survient APRES le premier affichage : le texte se redispose et tout ce qui
   suit le titre du bandeau descend d'un cran.

   Mesure, reseau bride a 700 kbps :
     rien bloque .......... decalage 0,272
     police bloquee ....... decalage 0,000
   Le remplacement est donc la cause, etablie et non supposee. Un repli aux
   mesures ajustees, calcule depuis les fichiers reellement servis, n'a PAS
   suffi a l'empecher.

   `optional` supprime le probleme par construction : si la police n'est pas
   prete presque tout de suite, le navigateur garde le repli pour CETTE
   visite-la et ne bascule jamais. Aucun decalage possible.

   Le prix, dit clairement : sur une PREMIERE visite lente, la page s'affiche
   dans la police systeme. Le fichier est mis en cache dans la foulee, donc des
   la page suivante la typographie est la bonne. Arbitrage tranche par
   Alexandre le 27/08/2026 : stabilite d'abord.

   LES ALPHABETS. On ne garde que le latin. Le cyrillique, le grec et le
   vietnamien etaient telecharges pour rien.

   Les declarations sont ecrites ici plutot qu'importees : `font-display` ne se
   surcharge pas apres coup, chaque @font-face est independant. */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400;
  font-display: optional;
  src: url('@fontsource/plus-jakarta-sans/files/plus-jakarta-sans-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 500;
  font-display: optional;
  src: url('@fontsource/plus-jakarta-sans/files/plus-jakarta-sans-latin-500-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 600;
  font-display: optional;
  src: url('@fontsource/plus-jakarta-sans/files/plus-jakarta-sans-latin-600-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 700;
  font-display: optional;
  src: url('@fontsource/plus-jakarta-sans/files/plus-jakarta-sans-latin-700-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 800;
  font-display: optional;
  src: url('@fontsource/plus-jakarta-sans/files/plus-jakarta-sans-latin-800-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@source '../views/**/*.blade.php';
@source '../views/**/*.php';
@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
@source '../../storage/framework/views/*.php';

@theme {
    --font-sans: 'Plus Jakarta Sans', 'Jakarta Repli', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';

    /* Bleu-navy corporate (institutionnel, grands comptes) */
    --color-navy-50: #eef3fb;
    --color-navy-100: #d8e3f5;
    --color-navy-600: #2a5bb0;
    --color-navy-700: #1b3d7a;
    --color-navy-800: #122c5c;
    --color-navy-900: #0c1f44;
    --color-navy-950: #08152f;

    /* Accent = bleu de marque Permanence Partenaire (remplace l'orange Telib).
       Les classes orange-* du design rendent donc le bleu de marque. */
    --color-orange-400: #2ea3e0;
    --color-orange-500: #0c83c4;
    --color-orange-600: #0a6ca3;

    /* Magenta de marque (rappel du logo, usages ponctuels) */
    --color-brand-pink: #e6007e;
}

/* ══════════════════════════════════════════════════════════════
   Animations / effets high-tech (esprit telib.fr — sobre & premium)
   ══════════════════════════════════════════════════════════════ */

/* Aurores : voiles de lumière qui ondulent derrière le hero */
.pp-aurora { filter: blur(70px); mix-blend-mode: screen; pointer-events: none; }
.pp-au { position: absolute; border-radius: 46% 54% 60% 40% / 50% 45% 55% 50%; opacity: .55; will-change: transform; }
@keyframes pp-au1 { 0%,100%{transform:translate(0,0) scale(1) rotate(0)} 25%{transform:translate(-7%,7%) scale(1.25) rotate(16deg)} 50%{transform:translate(9%,-5%) scale(.9) rotate(-12deg)} 75%{transform:translate(-5%,-9%) scale(1.12) rotate(9deg)} }
@keyframes pp-au2 { 0%,100%{transform:translate(0,0) scale(1)} 33%{transform:translate(11%,9%) scale(1.3)} 66%{transform:translate(-10%,-6%) scale(.84)} }
@keyframes pp-au3 { 0%,100%{transform:translate(0,0) scale(1.1) rotate(0)} 50%{transform:translate(-12%,5%) scale(.92) rotate(-15deg)} }
.pp-au1 { animation: pp-au1 24s ease-in-out infinite; }
.pp-au2 { animation: pp-au2 30s ease-in-out infinite; }
.pp-au3 { animation: pp-au3 20s ease-in-out infinite; }

/* Parallaxe douce liée au curseur (var --mx/--my posées en JS) */
.pp-px { transition: transform .5s cubic-bezier(.2,.8,.2,1); transform: translate(calc(var(--mx,0)*22px), calc(var(--my,0)*22px)); }
.pp-px-far { transition: transform .6s cubic-bezier(.2,.8,.2,1); transform: translate(calc(var(--mx,0)*40px), calc(var(--my,0)*40px)); }

/* Flottement doux */
@keyframes pp-float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
.pp-float { animation: pp-float 6s ease-in-out infinite; }

/* Traits de lumière qui filent (SVG stroke-dasharray) */
@keyframes pp-dash { to { stroke-dashoffset: -1200; } }
.pp-streak { animation: pp-dash 8s linear infinite; }

/* Lueur pulsée */
@keyframes pp-pulse { 0%,100%{opacity:.45; transform:scale(1)} 50%{opacity:.9; transform:scale(1.04)} }
.pp-pulse { animation: pp-pulse 3.2s ease-in-out infinite; }

/* Ondes sonores (voix de la télésecrétaire) — anneaux qui se propagent */
@keyframes pp-wave { 0%{transform:scale(.5);opacity:.7} 100%{transform:scale(1.9);opacity:0} }
.pp-wave { animation: pp-wave 2.8s ease-out infinite; }

/* Barres d'égaliseur audio */
@keyframes pp-eq { 0%,100%{transform:scaleY(.35)} 50%{transform:scaleY(1)} }
.pp-eq { transform-origin:bottom; animation: pp-eq 1.1s ease-in-out infinite; }

/* Particules flottantes (réseau neuronal) */
@keyframes pp-floatUp  { 0%{transform:translateY(0);opacity:0} 15%{opacity:.7} 85%{opacity:.5} 100%{transform:translateY(-120px);opacity:0} }
@keyframes pp-floatDiag{ 0%{transform:translate(0,0);opacity:0} 15%{opacity:.7} 85%{opacity:.4} 100%{transform:translate(40px,-130px);opacity:0} }
.pp-particle { position:absolute; border-radius:9999px; opacity:0; will-change:transform,opacity; }

/* Reflet qui balaie un bouton (CTA premium) */
.pp-shine { position: relative; overflow: hidden; }
.pp-shine::after { content:""; position:absolute; top:0; left:-150%; width:60%; height:100%;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent); transform: skewX(-18deg); }
.pp-shine:hover::after { animation: pp-sweep 1s ease; }
@keyframes pp-sweep { from{left:-150%} to{left:160%} }

/* Révélation au défilement (posée par IntersectionObserver) */
.pp-reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1); }
.pp-reveal.pp-in { opacity: 1; transform: none; }

/* ══════════════════════════════════════════════════════════════
   Couche d'effets premium v2 (cohérence site + micro-interactions)
   ══════════════════════════════════════════════════════════════ */

/* Barre de progression de lecture (haut de page) */
#pp-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 9990;
    background: linear-gradient(90deg, #0c83c4, #2ea3e0 55%, #e6007e);
    box-shadow: 0 0 12px rgba(46,163,224,.55); transition: width .12s linear; }

/* Header densifié au défilement */
header.pp-scrolled { box-shadow: 0 10px 34px -16px rgba(8,40,110,.4); }

/* Soulignement animé des liens (nav) */
.pp-underline { position: relative; }
.pp-underline::after { content: ""; position: absolute; left: 0; bottom: -5px; height: 2px; width: 100%;
    background: linear-gradient(90deg, #0c83c4, #2ea3e0); border-radius: 2px;
    transform: scaleX(0); transform-origin: left; transition: transform .3s cubic-bezier(.2,.8,.2,1); }
.pp-underline:hover::after { transform: scaleX(1); }

/* Accent de titre : dégradé de marque animé */
.pp-grad-text { background: linear-gradient(100deg, #0c83c4, #2ea3e0 42%, #8fd0f4 64%, #0c83c4);
    background-size: 220% auto; -webkit-background-clip: text; background-clip: text; color: transparent;
    animation: pp-grad 7s linear infinite; }
@keyframes pp-grad { to { background-position: 220% center; } }

/* Entrée auto au chargement (hero, sans dépendre du JS) */
@keyframes pp-rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
.pp-rise { opacity: 0; animation: pp-rise .85s cubic-bezier(.2,.8,.2,1) both; }
.pp-rise-1 { animation-delay: .05s; } .pp-rise-2 { animation-delay: .18s; } .pp-rise-3 { animation-delay: .32s; }

/* Carte premium : lift + halo + spotlight suivant le curseur */
.pp-card { position: relative; transition: transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s ease, border-color .4s ease; }
.pp-card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0;
    transition: opacity .4s ease;
    background: radial-gradient(360px circle at var(--spot-x,50%) var(--spot-y,0%), rgba(46,163,224,.14), transparent 60%); }
.pp-card:hover { transform: translateY(-6px); box-shadow: 0 24px 52px -26px rgba(8,40,110,.5); border-color: rgba(46,163,224,.45); }
.pp-card:hover::before { opacity: 1; }
.pp-card-dark::before { background: radial-gradient(380px circle at var(--spot-x,50%) var(--spot-y,0%), rgba(124,182,255,.16), transparent 60%); }

/* Stagger : délai progressif posé en JS via --pp-rd */
.pp-reveal { transition-delay: var(--pp-rd, 0ms); }

/* Carte + reveal sur le même élément : transition combinée (évite que .pp-card
   n'écrase l'animation de révélation et le délai de stagger) */
.pp-card.pp-reveal {
    transition: opacity .7s ease var(--pp-rd, 0ms),
                transform .7s cubic-bezier(.2,.8,.2,1) var(--pp-rd, 0ms),
                box-shadow .4s ease,
                border-color .4s ease;
}

/* Bloc « groupe HANDIVIA » du pied de page (styles sortis de l'inline) */
.pp-group { border-top: 1px solid rgba(127,127,127,.18); padding: 20px 16px; text-align: center; }
.pp-group-label { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: #8094b3; margin: 0 0 10px; }
.pp-group-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; font-size: 14px; }
.pp-group-nav a { color: #9db4d6; text-decoration: none; }
.pp-group-nav a:hover { color: #cfe0ff; }

@media (prefers-reduced-motion: reduce) {
    .pp-au1,.pp-au2,.pp-au3,.pp-float,.pp-pulse,.pp-streak,.pp-wave,.pp-eq { animation: none; }
    .pp-reveal { opacity: 1; transform: none; transition: none; }
    .pp-px,.pp-px-far { transition: none; transform: none; }
    .pp-grad-text { animation: none; }
    .pp-rise { opacity: 1; animation: none; }
    .pp-card { transition: none; }
    #pp-progress { transition: none; }
}

/* ══════════════════════════════════════════════════════════════
   Décorations (hero, auroras, grilles, vignettes) — déplacées depuis les
   styles inline des vues (conformité SEO « 0 style inline »). Déclarations
   strictement identiques : le rendu ne change pas.
   ══════════════════════════════════════════════════════════════ */

/* Home — hero */
.pp-hero { background-color: #0a1c3e; }
.pp-hero-fade { background: linear-gradient(90deg, #0a1c3e 0%, rgba(10,28,62,.92) 24%, rgba(10,28,62,.5) 46%, rgba(10,28,62,.12) 66%, rgba(10,28,62,0) 82%); }
.pp-hero-glow { background: linear-gradient(0deg, rgba(10,28,62,.82) 0%, rgba(10,28,62,0) 32%), radial-gradient(120% 85% at 72% 32%, rgba(40,120,220,.16), transparent 60%); }
.pp-au-a { top: -16%; right: 8%; width: 42%; height: 80%; background: radial-gradient(circle at 50% 50%, #0c83c4, transparent 62%); }
.pp-au-b { bottom: -22%; right: 30%; width: 32%; height: 76%; background: radial-gradient(circle at 50% 50%, #2ea3e0, transparent 64%); }

/* Grilles en perspective */
.pp-grid { background-image: linear-gradient(#fff 1px, transparent 1px), linear-gradient(90deg, #fff 1px, transparent 1px); background-size: 48px 48px;
    -webkit-mask-image: radial-gradient(120% 90% at 70% 10%, #000 0%, transparent 70%); mask-image: radial-gradient(120% 90% at 70% 10%, #000 0%, transparent 70%); }
.pp-grid-ph { background-image: linear-gradient(#fff 1px, transparent 1px), linear-gradient(90deg, #fff 1px, transparent 1px); background-size: 46px 46px;
    -webkit-mask-image: radial-gradient(120% 100% at 22% 0%, #000 0%, transparent 72%); mask-image: radial-gradient(120% 100% at 22% 0%, #000 0%, transparent 72%); }

/* Home — auroras du bloc CTA final */
.pp-au-cta1 { top: -30%; left: 10%; width: 40%; height: 160%; background: radial-gradient(circle at 50% 50%, #0c83c4, transparent 60%); opacity: .35; }
.pp-au-cta2 { top: -30%; right: 8%; width: 34%; height: 160%; background: radial-gradient(circle at 50% 50%, #e6007e, transparent 64%); opacity: .28; }
.pp-cta-glow { background: radial-gradient(50% 90% at 50% 0%, #2a5bb055 0%, transparent 70%); }

/* Page-hero (pages internes) — auroras + couleur édition-aware */
.pp-ph-au1 { top: -40%; right: 4%; width: 34%; height: 170%; background: radial-gradient(circle at 50% 50%, #0c83c4, transparent 62%); }
.pp-ph-au2 { top: -30%; left: -6%; width: 30%; height: 150%; opacity: .4; }
.pp-ph-au2--std  { background: radial-gradient(circle at 50% 50%, #2ea3e0, transparent 64%); }
.pp-ph-au2--plus { background: radial-gradient(circle at 50% 50%, #e6007e, transparent 64%); }

/* Services — auroras du bloc CTA */
.pp-au-svc1 { top: -60%; left: 20%; width: 36%; height: 200%; background: radial-gradient(circle at 50% 50%, #0c83c4, transparent 60%); opacity: .4; }
.pp-au-svc2 { top: -50%; right: 14%; width: 30%; height: 180%; background: radial-gradient(circle at 50% 50%, #e6007e, transparent 64%); opacity: .22; }

/* Blog — lueur d'en-tête */
.pp-blog-glow { background: radial-gradient(50% 70% at 85% 10%, #4f4ba055 0%, transparent 60%); }

/* Carte d'article — vignette dégradée par défaut */
.pp-article-thumb { background: linear-gradient(135deg, #1c2940, #24344d 55%, #f0801f); }

/* Assistant (chatbot) — libellés d'en-tête */
.pp-asst-title  { font-weight: 800; font-size: .92rem; line-height: 1.2; }
.pp-asst-status { font-size: .72rem; color: #bcd3ff; display: flex; align-items: center; gap: 5px; }
.pp-asst-dot    { width: 6px; height: 6px; border-radius: 50%; background: #22c55e; display: inline-block; box-shadow: 0 0 6px #22c55e; }

/* ══ REPLI AUX MESURES AJUSTEES ═════════════════════════════════════════════
   Le temps que Plus Jakarta Sans arrive, le texte s'affiche dans la police
   systeme. Celle-ci est nettement plus etroite : les lignes ne se coupent pas
   au meme endroit, et tout le bloc se redispose a l'arrivee de la vraie
   police. C'est un decalage visuel, et Google le mesure.

   Il ne se voyait pas tant que la page peignait tard : la police etait deja
   arrivee avant le premier pixel, donc rien ne bougeait APRES. Depuis que la
   mesure d'audience ne retarde plus l'affichage (2,4 s au lieu de 4,2 s), la
   page peint AVANT la police — et le decalage devient visible : 0 -> 0,102,
   au-dessus du seuil de 0,1 que Google considere comme mauvais.

   Le defaut ne vient donc pas de l'acceleration : elle l'a revele.

   VALEURS CALCULEES depuis le fichier de police lui-meme, pas estimees :
     largeur moyenne des 52 lettres latines .... 60,38 % de l'em
     largeur moyenne d'Arial ................... 52,71 % de l'em
     -> size-adjust = 60,38 / 52,71 ............ 114,6 %
     ascendante hhea 1038/1000 = 103,80 %, ramenee a l'em ajuste -> 90,6 %
     descendante hhea  222/1000 =  22,20 %, ramenee a l'em ajuste -> 19,4 %

   ⚠️ Plusieurs local() sont enumerees a dessein : les machines qui mesurent
   les sites tournent sous Linux, ou Arial seul ne resout pas. Sans cette
   liste, le repli n'existe pas la ou il compte le plus. */
@font-face {
  font-family: 'Jakarta Repli';
  font-weight: 400 600;
  src: local('Arial'), local('Helvetica Neue'), local('Liberation Sans'), local('DejaVu Sans');
  size-adjust: 114.6%;
  ascent-override: 90.6%;
  descent-override: 19.4%;
  line-gap-override: 0%;
}

/* ── Le meme repli, calibre pour le GRAS ────────────────────────────────────
   Un seul repli ne suffit pas. Celui du dessus est calcule sur la graisse 400 ;
   applique a un titre en 800, il rend le texte trop etroit, le titre tient sur
   moins de lignes, puis se redispose a l'arrivee de la vraie police et pousse
   tout ce qui suit.

   C'est exactement ce que Lighthouse mesurait sur l'edition « plus » : UN seul
   decalage, valant 0,276 a lui seul, sur le paragraphe situe juste sous le
   titre du bandeau. Le paragraphe ne bougeait pas de lui-meme — il etait
   pousse par le titre au-dessus.

   VALEURS CALCULEES depuis la graisse 800 du fichier reellement servi :
     largeur moyenne des 52 lettres latines .... 62,82 % de l'em
     largeur moyenne d'Arial Bold .............. 56,77 % de l'em
     -> size-adjust = 62,82 / 56,77 ............ 110,7 %
     ascendante et descendante ramenees a l'em ajuste. */
@font-face {
  font-family: 'Jakarta Repli';
  font-weight: 700 800;
  src: local('Arial Bold'), local('Arial'), local('Helvetica Neue Bold'), local('Liberation Sans Bold'), local('DejaVu Sans Bold');
  size-adjust: 110.7%;
  ascent-override: 93.8%;
  descent-override: 20.1%;
  line-gap-override: 0%;
}