/* ===================================================================
   site-fx.css — habillage futuriste partagé (additif, non destructif)
   Charte : violet #7a3cff, cyan #38e8ff, fond spatial sombre.
   Contient : #1 fondu d'entrée de page · #4 séparateurs néon ·
              #5 dégradé animé des titres · #2 état du reveal au scroll.
   Toutes les animations sont coupées si prefers-reduced-motion.
   =================================================================== */

/* ---- #1 : fondu d'entrée de page (materialisation douce) ----------
   Placé sous @media no-preference : par défaut (reduced-motion ou CSS
   absent) la page reste a opacity:1 -> jamais de contenu invisible. */
@media (prefers-reduced-motion: no-preference){
  @keyframes fxPageIn{from{opacity:0}to{opacity:1}}
  body{animation:fxPageIn .5s ease both;}
}

/* ---- #4 : separateurs neon entre les grandes sections -------------
   ::before ajoute une fine ligne degradee centree en haut de section.
   Cibles verifiees SANS pseudo-element existant (aucune collision). */
.section-wrap::before,
.services::before,
.content-wrap::before,
.cta-section::before,
.site-footer-pro::before{
  content:"";
  display:block;
  height:1px;
  width:clamp(120px,28%,220px);
  margin:0 auto 34px;
  border-radius:2px;
  background:linear-gradient(90deg,transparent,#7a3cff,#38e8ff,transparent);
  box-shadow:0 0 10px rgba(122,60,255,.50),0 0 18px rgba(56,232,255,.22);
}
/* Le footer garde son padding : on colle la ligne tout en haut. */
.site-footer-pro::before{margin-bottom:26px;}

/* ---- #5 : degrade anime des titres .grad-text (lent, discret) -----
   Va-et-vient doux (alternate) pour eviter tout snap/clignotement. */
@media (prefers-reduced-motion: no-preference){
  @keyframes fxGrad{0%{background-position:0% 50%}100%{background-position:100% 50%}}
  .grad-text{
    background-size:200% auto;
    animation:fxGrad 8s ease-in-out infinite alternate;
  }
}

/* ---- #2 : etat visuel du reveal au scroll -------------------------
   La classe .fx-reveal n'est posee QUE par site-fx.js, et seulement
   sur des elements sous la ligne de flottaison -> aucun flash, et si
   le JS ne s'execute pas rien n'est masque (SEO/UX safe). */
.fx-reveal{
  opacity:0;
  transform:translateY(22px);              /* etait 28px : glisse plus court */
  transition:opacity .45s cubic-bezier(.16,1,.3,1),
             transform .45s cubic-bezier(.16,1,.3,1);   /* etait .8s : plus rapide */
  will-change:opacity,transform;
}
.fx-reveal.fx-in{opacity:1;transform:none;}

@media (prefers-reduced-motion: reduce){
  .fx-reveal{opacity:1 !important;transform:none !important;}
}

/* ---- #6 : fil d'Ariane discret (SEO conserve, visuellement efface) ---
   Objectif : le .breadcrumb reste dans le DOM (Google le lit + l'affiche
   en SERP, le JSON-LD BreadcrumbList intact), mais devient quasi invisible
   et compact pour laisser le H1 remonter.
   - AUCUN display:none / visibility:hidden -> reste lu par Google ET par
     les lecteurs d'ecran (l'opacity n'affecte pas l'arbre d'accessibilite).
   - Selecteur nav.breadcrumb (specificite 0,1,1) : bat la regle inline
     .breadcrumb (0,1,0) de chaque page quel que soit l'ordre de chargement.
   - Survol + focus clavier : l'opacite remonte pour rester consultable
     (focus-within = accessibilite au clavier, bonus).

   CORRECTIF 17/07 — le fil etait colle sous la navbar (ecart mesure : 0px).
   Cause : margin-top valait EXACTEMENT var(--nav-h) (76px), soit la hauteur
   de la navbar fixe -> le haut du fil tombait pile sur son bord inferieur,
   sans un pixel de respiration, d'ou l'impression d'un fil "a moitie avale".
   Il faut donc la hauteur de la navbar PLUS un vrai ecart visuel.
   La navbar passe a 62px des que la page scrolle (.nav.shrink) : l'ecart ne
   fait que grandir ensuite, le cas critique est bien scrollY=0, traite ici. */
nav.breadcrumb{
  font-size:.7rem;                        /* etait .82rem : plus petit */
  line-height:1.3;                        /* hauteur de ligne resserree */
  opacity:.38;                            /* present mais tres discret */
  /* top = hauteur navbar + 12px d'ecart REEL (etait var(--nav-h) tout court,
     soit 0px d'ecart : le fil touchait la navbar).
     bottom = -10px : recompense l'ecart ajoute en tirant le H1 vers le haut,
     pour ne pas reintroduire de blanc au-dessus du contenu. */
  margin:calc(var(--nav-h) + 12px) auto -10px;
  padding:0 clamp(16px,5vw,32px);         /* etait 8px en haut */
  transition:opacity .2s ease;
}
nav.breadcrumb:hover,
nav.breadcrumb:focus-within{
  opacity:.85;                            /* redevient lisible au survol/focus */
}

/* ---- #7 : fond galaxie UNIFORME (pas de bande, pas de ligne) -----------
   Le fond spatial (fond-ecran.webp) est pose une seule fois sur <body> en
   background-attachment:fixed. Les bandes/lignes horizontales viennent de
   sections PLEINE LARGEUR qui superposent leur propre fond/bordure au fond
   du body -> la ou les couches se cumulent, le ciel s'assombrit.
   Correctif : on rend transparentes les sections pleine largeur et on retire
   leurs bordures horizontales, pour que le fond du body traverse d'un bloc.
   -> NE CIBLE PAS les cartes/panneaux contenus (.card, .process-section,
      .cta-band, .svc, .benefit-box, .solution-card...) : ils gardent leur
      effet verre depoli, c'est voulu.
   -> NE TOUCHE PAS le canvas d'etoiles ni le footer. */
.hero,
.header-wrap,
.content-wrap,
.section-wrap{
  background:transparent !important;      /* le fond vient du body uniquement */
  background-image:none !important;       /* supprime tout overlay/gradient de section */
}
/* la seule bordure horizontale pleine largeur repere (hero de nos_realisations) :
   c'est elle qui dessine la "ligne de demarcation" sous le hero. */
.hero{
  border-top:0 !important;
  border-bottom:0 !important;
}

/* ---- #8 : footer colle en bas (fin du vide galaxie sous le footer) ------
   .page est une colonne flex en min-height:100vh et le footer en est le
   dernier enfant direct. Deux causes de "footer au milieu + vide dessous" :
   1) nos_realisations avait .page{padding-bottom:120px} -> une bande sous le
      footer (les autres pages sont deja a 0). On force 0 partout (no-op
      ailleurs).
   2) sans mecanisme sticky, un contenu plus court que l'ecran laisse du vide
      sous le footer. margin-top:auto pousse le footer tout en bas quand il
      reste de la place, et vaut 0 quand le contenu remplit deja l'ecran.
   -> aucun impact sur les pages ou le footer n'est pas enfant direct de .page. */
.page{ padding-bottom:0 !important; }
.page > .site-footer-pro{ margin-top:auto; }

/* ---- #9 : tuiles de service cliquables — affordance -----------------------
   Les tuiles sont deja des <a> (.svc sur la home, .card > .card-link sur
   nos_solutions). On ajoute seulement l'affordance visible : lien "En savoir
   plus", fleche qui glisse, glow de bordure, focus clavier, reduced-motion.
   IMPORTANT : rien ne cible un .card "nu" (les panneaux de contenu) — les regles
   de survol sont scopees soit par .tile-cta present, soit par :has(> .card-link). */
:root{ --accent-2:#38e8ff; }

.tile-cta{
  display:inline-flex; align-items:center; gap:6px; margin-top:18px;
  color:var(--accent-2); font-size:.9rem; font-weight:600; letter-spacing:.01em;
}
.tile-cta .arrow{ transition:transform .2s ease; }

/* Survol (pointeur fin) : la fleche glisse vers la droite.
   Ne s'applique qu'aux cartes qui contiennent un .tile-cta -> jamais aux panneaux. */
@media (hover:hover){
  .card:hover .tile-cta .arrow,
  .svc:hover  .tile-cta .arrow{ transform:translateX(5px); }
}

/* nos_solutions : la bordure de la tuile s'illumine cyan/violet au survol.
   Scope strict via :has(> .card-link) -> uniquement les cartes-liens de service,
   jamais les .card panneaux de contenu (qui n'ont pas de .card-link enfant).
   Le soulevement (transform) reste porte par la regle inline existante. */
.card:has(> .card-link):hover{
  border-color:rgba(140,190,255,.55);
  box-shadow:0 16px 42px rgba(0,0,0,.45), 0 0 0 1px rgba(104,232,255,.35), 0 0 26px rgba(155,107,255,.22);
}

/* Focus clavier visible sur les tuiles de la home (.svc n'en avait pas ;
   .card-link a deja son :focus-visible inline sur nos_solutions). */
.svc:focus-visible{ outline:2px solid var(--accent-2); outline-offset:4px; border-radius:20px; }

/* Respect de prefers-reduced-motion : la fleche ne bouge plus. */
@media (prefers-reduced-motion:reduce){
  .tile-cta .arrow{ transition:none; }
  .card:hover .tile-cta .arrow,
  .svc:hover  .tile-cta .arrow{ transform:none; }
}

/* ---- #10 : « En savoir plus → » calé en bas de chaque tuile ---------------
   Sans ca, le lien suit le texte : sur une tuile au texte plus court, il remonte
   et n'est plus aligne avec les autres. On passe la tuile-lien en colonne flex
   et on pousse le lien tout en bas (margin-top:auto). Les tuiles d'une meme
   rangee ont deja la meme hauteur (grid stretch) -> les liens s'alignent.
   Sur mobile (1 colonne), chaque carte fait sa propre hauteur -> le lien reste
   juste sous le texte : comportement naturel, rien a caler.
   Scope : uniquement .card-link (nos_solutions) et .svc (home) — jamais les
   panneaux de contenu .card (qui n'ont pas de .card-link / ne sont pas .svc). */
.card-link,
.svc{ display:flex; flex-direction:column; }

.card-link .tile-cta,
.svc .tile-cta{
  margin-top:auto;    /* pousse le lien tout en bas de la tuile */
  padding-top:16px;   /* espace mini au-dessus, meme sur la tuile la plus haute */
  align-self:center;  /* conserve le centrage (tuiles en text-align:center) */
}

/* ---- #11 : page Realisations — cartes portfolio -------------------------
   1) Bas de carte (« Visiter le site → » / annee) cale en bas, aligne sur toute
      la rangee, quelle que soit la longueur du texte. La carte passe en colonne
      flex, .work-info absorbe l'espace, .work-footer est pousse en bas.
   2) L'ancien badge de type (sur l'image) devient la 1re etiquette, en violet.
   3) Bouton « Essayer l'agent » (demo WhatsApp) sur la carte Agent IA.
   Scope : classes .work-* uniquement presentes sur nos_realisations.html.
   Sur mobile (1 colonne) chaque carte fait sa hauteur -> comportement naturel. */
.work-card{ display:flex; flex-direction:column; }
.work-thumb{ flex-shrink:0; }              /* garde le ratio de l'image, pas de squish */
.work-info{ flex:1; display:flex; flex-direction:column; }
.work-footer{ margin-top:auto; }           /* footer (lien + annee) colle en bas */

/* Etiquette de type (ex-badge) : 1re position, violet, pour la distinguer */
.work-tag.type{
  background:rgba(122,60,255,.9);
  border:1px solid rgba(122,60,255,.9);
  color:#fff; text-transform:uppercase; letter-spacing:.05em;
}

/* Bouton demo WhatsApp « Essayer l'agent → » (carte Agent IA) */
.work-cta-jarvis{
  display:flex; align-items:center; justify-content:center; gap:8px;
  margin:14px 0 4px; padding:.72rem 1rem; border-radius:12px;
  background:#25D366; color:#fff; font-weight:700; font-size:.92rem;
  text-decoration:none; transition:transform .15s ease, box-shadow .2s ease;
}
.work-cta-jarvis:hover{ transform:translateY(-1px); box-shadow:0 8px 22px rgba(37,211,102,.4); }
.work-cta-jarvis svg{ width:20px; height:20px; fill:#fff; flex:none; }

/* ---- #12 : pictos dans les cartes-benefices (.benefit-icon.picto) ----------
   Cadre neon facon home pour les cartes qui affichent un picto image :
   formation-ia-oisans.html + les 12 pages villes creation-site-web-*.html.
   Scope par la classe .picto -> n'affecte PAS les .benefit-icon a <svg> des
   pages services (applications, agents, solutions_ia). Une seule source, pas de
   duplication. Mobile OK (les cartes s'empilent, l'icone reste centree). */
/* (a) Conteneur transparent : le grand .card qui entoure les cartes-benefices
   (formation + villes) laissait passer un rectangle violet clair sur la galaxie.
   Scope par :has(.benefit-icon.picto) -> UNIQUEMENT ces pages, jamais les .card
   panneaux des pages services (qui ont .benefit-icon a <svg>, sans .picto). */
.card:has(.benefit-icon.picto){ background:none; border:0; box-shadow:none; }

/* (b) Pictos : valeurs EXACTES du picto home (.svc .ic) pour un eclat identique
   (degrade dense .5/.22, bordure .6, halo neon marque, pulse, brightness 1.35).
   MEME regle etendue aux cartes « Types de sites web » de sites_web_page.html
   (.solution-icon.picto, icone en ligne a gauche du titre) -> une seule source,
   pas de version affaiblie. Le layout en ligne annule juste le centrage (margin). */
.benefit-icon.picto,
.solution-icon.picto{
  width:76px; height:76px; border-radius:20px; display:grid; place-items:center; margin:0 auto 14px;
  background:radial-gradient(circle at 50% 35%, rgba(122,60,255,.5), rgba(56,232,255,.22));
  border:1.5px solid rgba(160,190,255,.6);
  box-shadow:inset 0 0 26px rgba(56,232,255,.22), 0 0 26px rgba(122,60,255,.35), 0 6px 20px rgba(122,60,255,.28);
  animation:pictoPulse 3.2s ease-in-out infinite;
  transition:transform .3s ease, box-shadow .3s ease;
}
/* .solution-icon.picto : icone en ligne dans .solution-header (flex), pas de centrage vertical/bas */
.solution-icon.picto{ margin:0; }
.benefit-icon.picto img,
.solution-icon.picto img{
  width:52px; height:52px; object-fit:contain; display:block;
  filter:drop-shadow(0 0 10px rgba(56,232,255,.9)) drop-shadow(0 0 18px rgba(122,60,255,.5)) brightness(1.35) saturate(1.3);
  transition:transform .3s ease, filter .3s ease;
}
.benefit-box:hover .benefit-icon.picto,
.solution-card:hover .solution-icon.picto{
  transform:translateY(-4px) scale(1.1); animation:none;
  box-shadow:inset 0 0 32px rgba(56,232,255,.3), 0 0 50px rgba(122,60,255,.7), 0 14px 38px rgba(122,60,255,.5);
}
.benefit-box:hover .benefit-icon.picto img,
.solution-card:hover .solution-icon.picto img{
  filter:drop-shadow(0 0 14px rgba(56,232,255,1)) drop-shadow(0 0 24px rgba(122,60,255,.7)) brightness(1.5) saturate(1.4);
}
@keyframes pictoPulse{
  0%,100%{ box-shadow:inset 0 0 26px rgba(56,232,255,.22), 0 0 22px rgba(122,60,255,.30), 0 6px 20px rgba(122,60,255,.28); }
  50%{ box-shadow:inset 0 0 30px rgba(56,232,255,.32), 0 0 40px rgba(122,60,255,.55), 0 6px 20px rgba(122,60,255,.28); }
}
@media (prefers-reduced-motion:reduce){
  .benefit-icon.picto,
  .solution-icon.picto{ animation:none; transition:none; }
  .benefit-icon.picto img,
  .solution-icon.picto img{ transition:none; }
  .benefit-box:hover .benefit-icon.picto,
  .solution-card:hover .solution-icon.picto{ transform:none; }
}