/* One Myadvai gradient, shared by every page. Original colors and stops in --grad. */
:root {
  --brand-button-ink: #040714;
  --control-surface: #ffffff;
  --control-ink: #0b1f5c;
}
.signature-site :is(.signature-slider,.sig-header,.sig-path,.signature-cta,.signature-subhero,.faq-hero,.sig-footer,.neural-hero) {
  --control-surface: #12172d;
  --control-ink: #f4f7ff;
}

/* Page openings share the interactive network used on the homepage. */
.signature-subhero.neural-hero::before {
  z-index: -2;
  background: radial-gradient(ellipse at 8% 70%, #00c2ff0d, transparent 60%),
              radial-gradient(ellipse at 75% 15%, #7a5cff12, transparent 60%);
}
.neural-hero .neural-field { opacity: .85; }
.neural-hero-meta { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.neural-hero-meta :is(.eyebrow,.kicker) { margin: 0; }
.neural-hero-meta .kicker { color: #b2bdd5; }
.neural-hero-meta .motion-toggle { flex-shrink: 0; }
.neural-hero .subhero-layout h1 { text-shadow: 0 2px 18px #0a102480; }
@media (max-width:640px) {
  .neural-hero .neural-field { opacity: .65; }
}
@media (max-width:360px) {
  .signature-subpage .signature-legal-hero h1 { font-size: 32px; }
}

/* Filled calls to action: exact original gradient, dark text for legibility. */
.signature-site :is(.btn-primary,.action-white),
.signature-site .sig-header .main-nav .sig-nav-cta {
  background: var(--grad);
  color: var(--brand-button-ink);
  border-color: transparent;
  box-shadow: 0 7px 25px #7a5cff36;
  text-shadow: none;
}
.signature-site .sig-header .main-nav .sig-nav-cta,
.signature-site .sig-header .main-nav .sig-nav-cta:hover {
  color: var(--brand-button-ink)!important;
}
.signature-site :is(.btn-primary,.action-white):hover,
.signature-site .sig-header .main-nav .sig-nav-cta:hover {
  background: var(--grad);
  color: var(--brand-button-ink);
  filter: none;
  box-shadow: 0 10px 30px #7a5cff50;
}

/* Secondary actions use the same colors as a fine border. */
.signature-site :is(.btn-ghost,.action-outline,.motion-toggle,.hero-arrow),
.signature-site .review-controls button {
  border: 1px solid transparent;
  background: linear-gradient(var(--control-surface),var(--control-surface)) padding-box, var(--grad) border-box;
  color: var(--control-ink);
  box-shadow: none;
}
.signature-site :is(.btn-ghost,.action-outline,.motion-toggle,.hero-arrow):hover,
.signature-site .review-controls button:hover {
  border-color: transparent;
  background: linear-gradient(var(--control-surface),var(--control-surface)) padding-box, var(--grad) border-box;
  color: var(--control-ink);
  box-shadow: 0 0 0 3px #7a5cff1f;
}
.signature-site :is(.btn-primary,.btn-ghost,.action,.sig-nav-cta,.hero-arrow,.motion-toggle):focus-visible,
.signature-site .review-controls button:focus-visible {
  outline: 3px solid var(--cyan);
  outline-offset: 4px;
}

/* Titles: gradient letters on dark surfaces, a gradient underline on light ones. */
.signature-site :is(.subhero-layout,.path-heading,.cta-line,.faq-hero) :is(h1,h2) em {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.signature-site :is(.intro-layout,.expertise-heading,.overview-heading,.faq-intro,.method-copy) h2 em {
  color: var(--navy);
  background: var(--grad) left bottom / 100% .07em no-repeat;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding-bottom: .1em;
}
.signature-site :is(.ink-link,.faq-related,.text-action) {
  border-bottom: 0;
  background: var(--grad) left bottom / 100% 2px no-repeat;
  padding-bottom: 9px;
}
.signature-site :is(.ink-link,.faq-related,.text-action):hover { color: var(--violet); }
.signature-site .text-action:hover { color: var(--cyan-soft); }
.signature-site .sig-header .main-nav a[aria-current="page"]:not(.sig-nav-cta)::after {
  display: block;
  background: var(--grad);
  transform: scaleX(1);
  height: 2px;
}

/* Cards, pictogram frames and open accordion controls share the same treatment. */
.signature-site :is(.expertise-card-symbol,.value-symbol,.icon-chip) {
  background: linear-gradient(#f5f5ff,#eef8ff) padding-box, var(--grad) border-box;
  border: 1px solid transparent;
}

/* Custom use-case pictograms: dark surfaces and a consistent fine-line drawing. */
.signature-subpage #cas-usage .usecase-icon {
  width: 68px;
  height: 68px;
  margin-bottom: 24px;
  border-radius: 20px;
  border: 1px solid #7a5cff36;
  border-top-color: #00c2ff38;
  background: linear-gradient(120deg, #00c2ff0c 0%, #7a5cff10 55%, #c93dff0b 100%);
  box-shadow: inset 0 1px 0 #ffffff05, 0 8px 24px #04071415;
}
.signature-subpage #cas-usage .usecase-icon svg {
  width: 44px;
  height: 44px;
  overflow: visible;
}
.signature-site .expertise-card::before,
.signature-site .card-grad-top::before,
.signature-site .eyebrow::before,
.signature-site .hero-dot.is-active span,
.signature-site .signature-quote figcaption>span { background: var(--grad); }
.signature-site .path-step[open] .path-plus,
.signature-site .faq-item[open] .faq-plus {
  border-color: transparent;
  background: var(--grad);
}
.signature-site .path-step[open] .path-plus::before,
.signature-site .path-step[open] .path-plus::after,
.signature-site .faq-item[open] .faq-plus::before,
.signature-site .faq-item[open] .faq-plus::after { background: var(--brand-button-ink); }
.signature-site .expertise-card-number { color: var(--navy); }
.signature-site .expertise-card:hover .expertise-card-icon { color: var(--violet); }
.signature-site .hero-dot:focus-visible { outline-color: var(--cyan); }
.signature-site .slider-pause { color: var(--cyan-soft); }

/* A discreet shared signature at the closing section and footer. */
.signature-site .signature-cta::before,
.signature-site .sig-footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--grad);
}
.signature-site .sig-footer { position: relative; }
.signature-site .status-dot { background: var(--grad); box-shadow: 0 0 14px #00c2ff60; }

/* Consent choices keep equal visual prominence and unchanged behavior. */
.signature-site .mv-ck :is(.mv-ck-ok,.mv-ck-no) {
  color: #f4f7ff;
  border: 1px solid transparent;
  background: linear-gradient(#12172d,#12172d) padding-box, var(--grad) border-box;
  font-family: var(--font-title);
}
@media (prefers-reduced-motion: reduce) {
  .signature-site :is(.btn,.action,.sig-nav-cta):hover { transform: none; }
}

/* --------------------------------------------------------------------------
   Lisere bleu sur les boutons a fond degrade — corrige le 13/10/2026.

   Ces elements portent une bordure de 1 px rendue transparente. Or le degrade
   restait calcule sur la boite interieure (background-origin vaut padding-box
   par defaut) alors qu'il est peint jusqu'au bord exterieur (background-clip :
   border-box). Il manquait donc un anneau d'un pixel tout autour, que le
   navigateur comblait en repetant le motif : le debut du degrade — le bleu —
   reapparaissait sur le bord oppose, et le liseré se voyait, surtout sur les
   pastilles rondes.

   Mesure avant correction sur le bouton d'en-tete : surface peinte 239x46,
   surface du degrade 237x44.

   On aligne l'origine du degrade sur la surface reellement peinte. Aucune
   incidence sur les dimensions ni sur la mise en page.

   Le raccourci « background » reinitialise cette propriete : elle est donc
   redeclaree pour les etats survole, focus et ouvert.
   -------------------------------------------------------------------------- */
.signature-site :is(.btn-primary,.action-white,.sig-nav-cta,.path-plus,.faq-plus),
.signature-site :is(.btn-primary,.action-white,.sig-nav-cta,.path-plus,.faq-plus):hover,
.signature-site :is(.btn-primary,.action-white,.sig-nav-cta,.path-plus,.faq-plus):focus-visible,
.signature-site .sig-header .main-nav .sig-nav-cta,
.signature-site .sig-header .main-nav .sig-nav-cta:hover,
.signature-site .path-step[open] .path-plus,
.signature-site .faq-item[open] .faq-plus,
.signature-subpage #cas-usage .usecase-icon {
  background-origin: border-box;
}

/* ==========================================================================
   AJUSTEMENTS DEMANDES LE 13/10/2026
   Trois retouches ciblees. L'identite, la structure et les contenus ne
   changent pas.
   ========================================================================== */

/* --- A. Section « 01 / Le declic Myadvai » : bandeau plus compact ---------
   Mesure avant : 662 px de haut a 855 px de large, dont 160 px de marges
   verticales et 84 px au-dessus des chiffres. On resserre sans toucher au
   texte, et on renforce le soulignement degrade de la phrase d'accroche,
   qui passe de 0,07 a 0,11 em — la mise en valeur se fait par la couleur de
   marque, comme ailleurs sur fond clair, et non par la taille. */
.signature-site .sig-intro { padding-block: 72px; }
.signature-site .sig-intro .section-meta { margin-bottom: 32px; }
.signature-site .sig-intro .intro-layout { gap: 56px; align-items: start; }
.signature-site .sig-intro .intro-layout h2 { font-size: clamp(34px, 4.1vw, 58px); }
.signature-site .sig-intro .proof-numbers { margin-top: 44px; padding-top: 26px; }
.signature-site .sig-intro .intro-layout h2 em {
  background-size: 100% 0.11em;
  padding-bottom: 0.13em;
}
@media (max-width: 1100px) {
  .signature-site .sig-intro { padding-block: 56px; }
  .signature-site .sig-intro .section-meta { margin-bottom: 26px; }
  .signature-site .sig-intro .proof-numbers { margin-top: 36px; }
}
@media (max-width: 640px) {
  .signature-site .sig-intro { padding-block: 46px; }
  .signature-site .sig-intro .proof-numbers { margin-top: 30px; }
}

/* --- B. Bandeau des technologies IA : couleurs d'origine et alignement ----
   Les logos etaient desatures (grayscale 0.8) et attenues (opacite 0.75),
   puis forces dans une boite identique de 110x30. Or ils n'ont pas le meme
   format : ChatGPT est un carre (1:1), Claude 4,66:1, Copilot 4,25:1,
   Gemini 2,71:1. A boite egale, le carre s'affichait donc minuscule a cote
   des logotypes larges — c'est la l'origine du desalignement percu.
   On revient a la couleur, on cale la hauteur et on laisse la largeur libre :
   aucune deformation. La marque carree est legerement agrandie pour un poids
   visuel comparable, usage courant en composition de logos. */
.signature-site .sig-tools img {
  filter: none;
  opacity: 1;
  width: auto;
  height: 30px;
  max-width: 155px;
  object-fit: contain;
}
/* Les logos sont en chargement differe et n'ont pas d'attributs de dimension :
   sans largeur connue, la place n'est pas reservee et la rangee sursauterait a
   l'affichage. On declare donc le rapport natif de chaque fichier (mesure sur
   les sources, toutes hautes de 120 px) : la largeur se deduit de la hauteur,
   la place est reservee des le depart et aucune proportion n'est alteree. */
.signature-site .sig-tools img[src*="chatgpt"] { height: 38px; aspect-ratio: 120 / 120; }
.signature-site .sig-tools img[src*="claude"]  { aspect-ratio: 559 / 120; }
.signature-site .sig-tools img[src*="copilot"] { aspect-ratio: 510 / 120; }
.signature-site .sig-tools img[src*="gemini"]  { aspect-ratio: 325 / 120; }
.signature-site .sig-tools .container > div {
  gap: clamp(26px, 5vw, 60px);
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
}
@media (max-width: 900px) {
  .signature-site .sig-tools img { height: 26px; }
  .signature-site .sig-tools img[src*="chatgpt"] { height: 33px; }
  .signature-site .sig-tools .container > div { justify-content: space-between; }
}
@media (max-width: 640px) {
  .signature-site .sig-tools img { height: 22px; }
  .signature-site .sig-tools img[src*="chatgpt"] { height: 28px; }
  .signature-site .sig-tools .container > div { gap: 18px; }
}
@media (max-width: 400px) {
  /* A 320 px, la somme des logos (245 px) plus trois ecarts de 18 px depassait
     les 288 px disponibles : la rangee basculait sur deux lignes. On resserre
     l'ecart pour conserver un bandeau d'une seule ligne. */
  .signature-site .sig-tools .container > div { gap: 10px; }
}
@media (max-width: 360px) {
  .signature-site .sig-tools img { height: 19px; }
  .signature-site .sig-tools img[src*="chatgpt"] { height: 24px; }
}

/* --- C. Zoom progressif de la premiere diapositive ------------------------
   L'effet existe pour toutes les diapositives (.hero-slide.is-active img).
   Mais la premiere porte « is-active » directement dans le HTML : son
   animation de 9 s demarre donc des l'application du CSS, avant que l'image
   de 1920 px ne soit telechargee et decodee. Une partie du zoom se jouait
   hors de vue et le visiteur ne voyait rien bouger.
   On attend que l'image soit prete ; le script pose alors « is-ready ».
   Les autres diapositives sont inchangees : leur image est deja chargee
   lorsqu'elles deviennent actives. */
.signature-slider:not(.is-ready) .hero-slide.is-active img { animation: none; }

/* --- Phrase d'accroche du bandeau intro, aux couleurs Myadvai -------------
   « La difference, c'est ce que vous en faites. »

   Le degrade de marque tel quel n'etait pas utilisable ici : sur le fond clair
   de la section (#f7f8fb), son cyan tombe a 1,95 de contraste, loin sous les
   3:1 exiges pour un texte de 24 px — les premiers mots auraient ete a peine
   lisibles. On garde donc les trois teintes dans le meme ordre, assombries
   uniformement : pire contraste mesure le long du degrade, 4,58.

   La couleur unie posee avant sert de repli aux navigateurs qui ne savent pas
   decouper un fond sur du texte. */
.signature-site .sig-intro .intro-copy .big-copy {
  /* Un cran plus gras : la phrase prend du poids sans aller jusqu'au 800 du
     titre voisin, qui doit rester le point d'entree du regard. Des traits plus
     epais rendent aussi le degrade plus lisible. */
  /* Graisse 800, comme le titre voisin : la phrase prend le meme poids, a
     taille reduite. Des traits plus epais supportent des teintes plus claires,
     ce qui permet de se rapprocher du degrade de marque : le violet #7055ff et
     le magenta #b935e0 sont ceux de la charte, seul le cyan est assombri
     (#00c2ff tombait a 1,95 de contraste sur ce fond clair). Pire contraste
     mesure le long du degrade : 3,70, pour 3:1 requis a cette taille en gras. */
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #7055ff;
  background: linear-gradient(118deg, #0b8ab8 0%, #7055ff 55%, #b935e0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .signature-site .sig-intro .intro-copy .big-copy {
    background: none;
    -webkit-text-fill-color: #7055ff;
  }
}

/* --- Cadrage des visuels d'en-tete des sous-pages -----------------------
   Une regle object-position:70% avait ete posee ici pour rattraper le
   cadrage de la page A propos, dont la photo 16/9 perdait un tiers de sa
   largeur dans un cadre de rapport 1,18. Elle visait toutes les sous-pages
   alors qu'elle ne concernait que celle-la, et decalait donc aussi les
   en-tetes d'Offre et de Contact. La photo d'A propos est desormais carree :
   elle ne perd que de la hauteur, le cadrage horizontal n'a plus d'objet.
   La regle est donc retiree et les trois pages reviennent au centrage. */

/* --- Compteurs des chiffres cles ------------------------------------------
   La largeur est reservee par le script (min-width en ch) ; les chiffres
   tabulaires garantissent que tous ont la meme avance, donc aucun tremblement
   pendant le decompte. */
.signature-site .proof-numbers .compteur {
  display: inline-block;
  font-variant-numeric: tabular-nums lining-nums;
}

/* --- Chiffres cles de l'accueil : couleur de marque sur les chiffres seuls --
   Le degrade ne porte que sur le chiffre lui-meme, pas sur les mots : « ans »
   et « Des milliers » gardent le navy d'origine (continuite.css). La cible est
   donc .compteur, le span que signature.js pose autour du nombre, et non le
   <strong> entier. Un <strong> sans chiffre n'a pas de .compteur : il reste
   noir sans qu'aucune regle n'ait a le prevoir.
   Variante fond clair du degrade de marque, celle de la phrase d'accroche
   juste au-dessus : violet #7055ff et magenta #b935e0 sont ceux de la charte,
   seul le cyan est assombri, #00c2ff tombant a 1,95 de contraste sur le
   #f7f8fb de cette section. Pire contraste le long du degrade : 3,70, pour
   3:1 requis a cette taille en graisse 800.
   Le compteur reecrit le texte du span a chaque image ; le fond etant porte
   par ce meme span, le degrade suit sans scintillement. */
.signature-site .proof-numbers .compteur {
  /* Le chiffre gagne un quart de corps par rapport aux mots qui l'entourent :
     « 10 » domine « ans », comme sur un cadran. En em, pour que l'ecart tienne
     a toutes les largeurs sans dupliquer les points de rupture. */
  font-size: 1.25em;
  line-height: 1;
  color: #7055ff;
  background: linear-gradient(118deg, #0b8ab8 0%, #7055ff 55%, #b935e0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .signature-site .proof-numbers .compteur {
    background: none;
    -webkit-text-fill-color: #7055ff;
  }
}

/* --- Icones des cartes : retablies ---------------------------------------
   coherence.css masque d'un bloc toutes les icones des sections de service
   (.signature-subpage .service-section .icon-chip{display:none}), ce qui
   emportait aussi celles des cartes. Or elles sont bien dans le HTML, deja
   coloriees aux trois teintes de la charte en alternance. On rouvre les
   seules icones de carte ; celle du chapeau de section reste masquee, c'est
   un choix de la refonte.
   signature.css impose border-radius:0 aux .icon-chip des sous-pages : avec
   l'anneau degrade pose plus haut, cela donnait un carre a angles vifs. On
   remet un rayon proportionne, 13 px pour 42 px de cote, soit le meme rapport
   que le chip d'origine (16 px pour 52 px). */
.signature-subpage .service-section .card > .icon-chip.card-icon {
  display: inline-flex;
  border-radius: 13px;
  margin-bottom: 16px;
}

/* --- Visuels des modules -------------------------------------------------
   Les quatre modules n'avaient aucune image. Le visuel se place entre le
   chapeau de section et les cartes. Le rapport 16/9 est declare ici en plus
   des attributs width/height : il reserve la place avant le chargement, donc
   rien ne saute sous l'image pendant la descente (chargement differe). */
.signature-subpage .module-visuel { margin: 0 0 38px; }
.signature-subpage .module-visuel img {
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}
@media (max-width: 640px) {
  .signature-subpage .module-visuel { margin-bottom: 28px; }
}

/* --- Contrastes : deux petits textes gris sous le seuil ------------------
   Mesures sur fond compose, seuil 4,5:1 requis en dessous de 24 px.
   Numeros de la liste « methode »  : #8290a7 sur blanc    -> 3,23  ECHEC
   Compteur d'avis « 01 / 09 »      : #7d85a0 sur #eceefa  -> 3,17  ECHEC
   Les teintes sont assombries sans changer de nuance ; rien d'autre ne
   bouge. Verifie : les numeros du parcours (#8291b4 et #6cdfff sur fond
   sombre) sont a 5,98 et 12,24, ils ne sont pas touches. */
.signature-site .method-list li > span:first-child { color: #6b7689; }
.signature-site .review-count { color: #656c82; }

/* --- Modules de l'accueil : cadre au rapport des images -------------------
   Le cadre etait en 16/10 avec object-fit:cover, herite du temps ou ces
   emplacements reprenaient des photos du diaporama. Les quatre visuels de
   modules sont en 16/9 : dans un cadre 16/10, cover aurait rogne 11 % de la
   largeur, soit 5,5 % de chaque cote. C'est sans consequence sur une photo
   d'ambiance, mais ici cela mordait sur la colonne « Mistral » du module 1
   et sur le panneau de droite du module 3, dont le contenu est le sujet meme
   de l'image. Le cadre prend donc le rapport des images. */
.signature-site .path-panel figure img { aspect-ratio: 16 / 9; }
@media (max-width: 640px) {
  .signature-site .path-panel figure img { aspect-ratio: 16 / 9; }
}

/* --- Contrastes de la page Questions IA ----------------------------------
   Deux series de petits numeros restaient sous le seuil sur le #f8f9fc de
   la section. Mesures sur fond compose, seuil 4,5:1 requis en dessous de
   24 px :
     numeros de la navigation laterale, 9 px  : #8b98b2 -> 2,76  ECHEC
     numeros des titres de groupe,     10 px  : #8593ab -> 2,95  ECHEC
   Les teintes sont assombries sans changer de nuance. */
.signature-site .faq-navigation a > span { color: #687286; }
.signature-site .faq-group-heading > span { color: #687385; }