/* NextAiCollab - Accueil. Monochrome, editorial, aere.
   Ne contient QUE de la mise en page propre a cette page : tout ce qui se
   repete ailleurs (boutons, filets, grilles, statistiques, questions, lignes de
   prestations, comparaison, manifeste) vit dans base.css et components.css. */

/* HERO --------------------------------------------------------------------
   Une seule colonne, alignee a gauche, et beaucoup de vide au-dessus. Un hero
   qui commence a 96 px du haut donne l'impression qu'on est presse de vendre ;
   a 160 px, le titre arrive apres une respiration, et c'est cette respiration
   qui se lit comme de l'assurance.

   La lueur n'est pas un degrade decoratif : c'est une source de lumiere, tres
   haute et tres faible (3,5 % de blanc, rayon enorme), qui empeche le haut de
   la page d'etre un aplat noir mort. On ne doit pas la voir, on doit voir que
   le titre est eclaire. */
.hero {
  position: relative;
  padding-block: clamp(112px, 19vh, 200px) clamp(84px, 11vh, 132px);
}
/* z-index negatif et non un empilement de contexte : .hero ne cree pas de
   contexte (position: relative, z-index auto), la lueur passe donc derriere son
   contenu tout en restant devant le fond de page. Les cotes ne debordent pas -
   inset horizontal a zero - pour ne rien devoir a overflow-x: hidden. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 160%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(64% 58% at 32% 6%,
    rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.018) 42%, rgba(255, 255, 255, 0) 72%);
}
/* LA GRILLE DE PLAN (01/09/2026). Sous la lueur, un quadrillage de filets a
   4 % de blanc, pas de 72 px, fondu par un masque radial : on ne le voit
   qu'autour du titre, et il disparait avant les bords. C'est le papier
   millimetre d'un plan d'architecte - le seul motif de fond que le site
   s'autorise, parce qu'il est fait de la meme chose que tout le reste : des
   filets d'un pixel. Il dit "ici on construit" sans une image. */
.hero::after {
  content: "";
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 72px 72px;
  background-position: center top;
  -webkit-mask-image: radial-gradient(70% 80% at 42% 30%, #000 0%, rgba(0,0,0,0.5) 45%, transparent 78%);
          mask-image: radial-gradient(70% 80% at 42% 30%, #000 0%, rgba(0,0,0,0.5) 45%, transparent 78%);
}

/* Titre a gauche, panneau de preuves a droite, cales sur le bas. La colonne de
   droite est plus etroite que la moitie : c'est un tableau de bord en marge,
   pas un second titre. */
.hero-grid {
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.65fr);
  gap: 48px clamp(48px, 6vw, 96px); align-items: end;
}
.hero h1 { max-width: 15ch; }
.hero .lead { margin-top: 36px; max-width: 56ch; }


/* CONSTAT ------------------------------------------------------------------ */
.constat-note strong { color: var(--text); }

/* Le numero de la realisation, en haut a gauche de la capture, sur une
   pastille de fond : c'est l'index d'un catalogue, et il permet d'en parler
   au telephone ("le 03, le coworking"). */
.ref-shot { position: relative; }
.ref-idx {
  position: absolute; top: 12px; left: 12px; z-index: 1;
  padding: 5px 9px; border-radius: var(--radius-sm);
  background: rgba(7, 7, 8, 0.82); border: 1px solid var(--line-2);
  font-size: 0.66rem; letter-spacing: 0.18em; color: var(--text);
}

/* METHODE : les engagements ferment la section, apres une vraie respiration.
   Sans cet ecart, les deux grilles en filets se touchent et se lisent comme une
   seule de huit cases. */
.pledges { margin-top: clamp(80px, 11vh, 128px); }
.pledges > .label { margin-bottom: 30px; }

/* LE SYSTEME ANIME DE #services ==========================================
   Dessine dans un <canvas> par assets/js/services-viz.js, en blanc sur noir.
   La regle de couleur du site n'a pas bouge : ce bloc est de l'interface, il
   est donc monochrome, et c'est tant mieux - un systeme en fil de fer blanc
   impressionne davantage qu'un systeme colore, qui ferait aussitot economiseur
   d'ecran.

   HAUTEUR DONNEE PAR LE JAVASCRIPT, jamais par le HTML : la classe .is-live
   est posee par le script au demarrage. Sans lui, le bloc n'existe pas et la
   page passe du titre a la liste sans laisser une bande noire de 400 px.

   LE MASQUE EST L'ESSENTIEL. Un canvas est un rectangle, et un rectangle dans
   une page sans bord se voit comme une vignette collee. Le degrade en masque
   fait disparaitre le dessin dans le fond au lieu de le decouper : on ne voit
   plus un cadre, on voit un objet suspendu dans la page. */
.svc-viz { display: none; }
.svc-viz.is-live {
  display: block;
  position: relative;
  height: clamp(320px, 36vw, 480px);
  margin: clamp(38px, 5vw, 72px) 0 clamp(30px, 4vw, 56px);
  /* Ceinture et bretelles : le canvas est redimensionne par le script, jamais
     par la mise en page, et rien ne doit pouvoir deborder de la page pendant
     qu'il rattrape son retard. */
  overflow: hidden;
}
/* LE MASQUE DU CANVAS, CORRIGE LE 01/09/2026. Il coupait au lieu de fondre :
   « en haut en bas ya un cut [...] faut faire un truc transition smooth pas
   une ligne ». Cause verifiee par le calcul et confirmee par un banc d'essai
   isole (un canvas plein rempli d'une seule couleur, avec chaque masque, sans
   rien d'autre) : avec 78% 84% at 50% 46%, #000 44%, transparent 100%, la
   distance du centre au bord HAUT valait 0,548 fois le rayon vertical - or le
   dernier arret de couleur (transparent) tombe a 1,0. Le bord etait donc
   atteint a 55 % du trajet, la ou le masque restait encore opaque a 81 %.
   overflow: hidden sur .svc-viz.is-live tranchait alors ce qui restait :
   81 % d'opacite en haut, 64 % en bas, 64 % a gauche et a droite - une ligne
   nette aux quatre bords, pas un fondu.

   Les nouveaux rayons (42 % / 38 %) sont choisis pour que le DERNIER arret
   (transparent, a 100 % du rayon) tombe avant la distance au bord le plus
   proche dans chaque axe : 0,46 en haut est le plus serre des quatre, et
   42 %/38 % y arrivent a 1,19-1,21 - le fondu est donc fini, et la marge qui
   reste jusqu'au bord est deja du noir pur. Ca vaut a tous les paliers,
   puisque center et rayons sont en pourcentages de la boite : la hauteur de
   .svc-viz.is-live change avec le clamp() du haut de ce fichier (480px a
   300px), mais aucun de ces deux nombres n'en depend. */
.svc-viz canvas {
  display: block; width: 100%; height: 100%;
  -webkit-mask-image: radial-gradient(ellipse 42% 38% at 50% 46%, #000 38%, transparent 100%);
          mask-image: radial-gradient(ellipse 42% 38% at 50% 46%, #000 38%, transparent 100%);
}

/* La legende ne suit pas le point qui s'allume, elle reste ou elle est. Un
   intitule qui se deplace avec un objet en rotation devient illisible au bout
   de deux secondes ; cale en bas a gauche, dans la meme colonne que le titre
   de la section, il se lit toujours - et l'oeil fait le lien tout seul,
   puisque le texte et le point changent au meme instant.

   Le numero repris de .offer-idx (01 a 06) est ce qui rattache le dessin a la
   liste d'en dessous : le systeme egrene les six lignes qu'on va lire. */
.svc-viz-legende {
  position: absolute; left: 0; bottom: 0; margin: 0;
  display: flex; align-items: baseline; gap: 18px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.42s var(--ease);
}
.svc-viz-legende.is-on { opacity: 1; }
/* Le numero de la legende porte la teinte du domaine affiche - la meme que
   son .offer-idx dans la liste, et que son point dans le dessin. --d-actif est
   pose sur l'hote par services-viz.js a chaque changement. Le repli en gris
   sert la fraction de seconde qui precede la premiere ecriture, et le cas ou
   le script ne tournerait pas du tout. */
.svc-viz-num {
  font-size: 0.72rem; letter-spacing: 0.18em; font-weight: 600;
  color: var(--d-actif, var(--text-3));
  transition: color 0.42s var(--ease);
}
.svc-viz-nom {
  font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--text); line-height: 1.5;
}

@media (max-width: 700px) {
  .svc-viz.is-live { height: clamp(240px, 62vw, 300px); }
  .svc-viz-nom { font-size: 0.7rem; letter-spacing: 0.12em; }
  .svc-viz-legende { gap: 12px; }
}

/* La regle qui colorait le seul lien de la 06 en violet SoclAi a ete retiree
   le 01/09/2026 : depuis que chaque ligne porte sa teinte (cf. la cle des six
   domaines dans tokens.css), .offer .link-arrow prend var(--dc) tout seul, et
   la 06 recoit exactement la meme couleur qu'avant - elle la tient maintenant
   de la meme regle que les cinq autres, au lieu d'une exception. */

/* REALISATIONS ===========================================================
   HORS LIGNE DEPUIS LE 02/09/2026. Le HTML de la galerie (.refs, .ref, .refs-cta
   reste utilise sous les graphiques) et le numero de capture (.ref-idx) ne sont
   plus rendus : le site ne cite plus de client par son nom en attendant de
   remettre les references. Les regles restent, pour ce jour-la. Ce qui suit
   dans la page, ce sont les resultats Search Console, en graphiques (.gsc).

   LA COULEUR N'ENTRE ICI QUE PAR LE CONTENU. Aucun filet, aucun titre, aucun
   bouton, aucune legende de ce bloc n'est colore : tout ce qui est de
   l'interface reste strictement noir et blanc. La couleur vient uniquement des
   captures - des sites clients et des comptes Search Console - et elle y est
   laissee INTACTE. Les desaturer aurait fait plus "raccord" pendant dix
   secondes, mais on retouche alors une piece a conviction, et une page qui a
   peur de ses propres preuves se voit tout de suite. Le grain fixe de
   body::after passe par-dessus et suffit a les poser dans la page.

   La cellule entiere est un <a>. Le motif .rule-grid fournit deja les filets :
   on n'ajoute donc ni bord, ni ombre, ni fond - seulement un voile de survol a
   1,8 % et un tres leger zoom de la capture. */
.ref { display: flex; flex-direction: column; transition: background var(--transition); }
.ref:hover { background: rgba(255, 255, 255, 0.018); }

.ref-shot { overflow: hidden; border-bottom: 1px solid var(--line); background: var(--surface); }
/* 0,7 s et 3,5 % : a peine un deplacement, jamais un effet. Les captures font
   toutes 1200 x 800, donc aucun recadrage n'a lieu ici. */
.ref-shot img { width: 100%; transition: transform 0.7s var(--ease); }
.ref:hover .ref-shot img { transform: scale(1.035); }

.ref-body { flex: 1; display: flex; flex-direction: column; padding: 32px 30px 34px; }
.ref-kind {
  font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--text-3); margin-bottom: 15px;
}
.ref h3 { font-size: 1.26rem; margin-bottom: 13px; }
.ref p { font-size: 0.92rem; color: var(--text-2); }

.ref-points { margin-top: 20px; display: grid; gap: 9px; }
.ref-points li { position: relative; padding-left: 20px; font-size: 0.85rem; color: var(--text-2); }
.ref-points li::before {
  content: ""; position: absolute; left: 0; top: 0.75em;
  width: 10px; height: 1px; background: var(--line-3);
}

/* margin-top: auto -> les adresses tombent a la meme hauteur dans les trois
   cellules d'une meme ligne, quelle que soit la longueur des textes. Ne pas
   introduire de regle "p + p" dans ce bloc : elle l'emporterait en specificite
   et casserait ce calage, comme cela s'est deja produit sur .cmp-foot. */
.ref-link {
  margin-top: auto; padding-top: 28px;
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.85rem; color: var(--text-3);
  transition: color var(--transition);
}
.ref-link::after { content: "\2197"; transition: transform var(--transition); }
.ref:hover .ref-link { color: var(--text); }
.ref:hover .ref-link::after { transform: translate(3px, -3px); }

/* Rappel d'action apres la galerie : le visiteur vient de voir six projets,
   c'est le moment ou il se demande si le sien y ressemble. */
.refs-cta {
  margin-top: clamp(54px, 6vw, 78px);
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: 26px clamp(40px, 5vw, 76px); align-items: center;
}
.refs-cta p { font-size: 1.04rem; line-height: 1.72; max-width: 62ch; }

/* RESULTATS MESURES -------------------------------------------------------
   Depuis le 02/09/2026, la section commence par eux : la galerie qui les
   precedait est hors ligne. Plus de filet ni de marge d'ouverture, donc. Les
   regles .perf-head / .perf-row / .perf-kpi (l'ancienne ligne "capture +
   releve") sont conservees pour le jour ou une capture reviendrait. */
.perf { margin-top: 0; padding-top: 0; border-top: 0; }
.perf-head { max-width: 720px; margin-bottom: clamp(40px, 5vw, 60px); }
.perf-head h3 {
  font-size: clamp(1.6rem, 2.6vw, 2.1rem);
  line-height: 1.14; letter-spacing: -0.03em; margin-bottom: 18px;
}
.perf-head p { font-size: 1.02rem; line-height: 1.72; max-width: 62ch; }
.perf-head .link-arrow { margin-top: 26px; }

.perf-row {
  display: grid;
  grid-template-columns: minmax(0, 256px) minmax(0, 1fr);
  gap: 24px clamp(40px, 5vw, 76px);
  align-items: center;
  padding-block: clamp(32px, 4vw, 44px);
  border-top: 1px solid var(--line);
}
.perf-row:last-child { border-bottom: 1px solid var(--line); }
.perf-row strong { display: block; font-size: 1.06rem; color: var(--text); letter-spacing: -0.015em; }
.perf-when { display: block; margin-top: 8px; font-size: 0.8rem; color: var(--text-3); }
.perf-kpi { margin-top: 22px; }
.perf-kpi > div {
  display: flex; align-items: baseline; justify-content: space-between; gap: 18px;
  padding: 10px 0; border-top: 1px solid var(--line);
}
.perf-kpi dt { font-size: 0.69rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-3); }
.perf-kpi dd { font-size: 1.02rem; color: var(--text); font-weight: 500; }
.perf-row img { border: 1px solid var(--line); border-radius: var(--radius-sm); }

/* GRAPHIQUES SEARCH CONSOLE (02/09/2026) ----------------------------------
   Une figure par compte, dans l'ordre de l'outil : l'intitule, les quatre
   tuiles, le trace. La figure est bordee d'un filet et posee sur --surface,
   comme l'etaient les captures : c'est un objet rapporte dans la page, pas
   un element de la page. Trois figures, un ecart entre chacune.

   LES TUILES. Les deux premieres sont pleines, bleue et violette, comme dans
   l'outil ; ce sont les deux courbes, et la tuile est leur legende. Les deux
   autres n'ont pas de courbe et restent grises. Le texte des tuiles pleines
   est blanc pur : sur un aplat de couleur, le blanc casse du site tourne au
   gris sale.

   LE TRACE. Le SVG est etire (preserveAspectRatio="none") ; les traits gardent
   leur epaisseur par vector-effect. Les axes et les mois sont du HTML pose
   autour, donc lisibles a toute largeur (cf. lib/gsc.php). */
.perf { display: grid; gap: clamp(28px, 3vw, 40px); }
.gsc {
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface); padding: clamp(20px, 2.4vw, 30px);
}
.gsc-cap { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; margin-bottom: 20px; }
.gsc-cap strong { font-size: 1.06rem; color: var(--text); letter-spacing: -0.015em; }
.gsc-cap span { font-size: 0.84rem; color: var(--text-3); }

.gsc-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.gsc-tile {
  display: flex; flex-direction: column; gap: 10px;
  padding: 16px 18px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.gsc-tile span { font-size: 0.72rem; color: var(--text-3); line-height: 1.3; }
.gsc-tile strong { font-size: 1.55rem; font-weight: 500; letter-spacing: -0.02em; color: var(--text); line-height: 1; }
.gsc-tile.is-clics { background: #3f7ee8; border-color: #3f7ee8; }
.gsc-tile.is-impr  { background: #6a45b8; border-color: #6a45b8; }
.gsc-tile.is-clics span, .gsc-tile.is-impr span { color: rgba(255, 255, 255, 0.82); }
.gsc-tile.is-clics strong, .gsc-tile.is-impr strong { color: #fff; }

.gsc-plot {
  display: grid; grid-template-columns: 44px minmax(0, 1fr) 52px; gap: 0 12px;
  margin-top: 26px;
}
/* Les axes : l'intitule en haut (Clics / Impressions), puis quatre valeurs
   reparties sur la hauteur du trace, alignees sur ses lignes de grille. */
.gsc-axe { display: flex; flex-direction: column; font-size: 0.7rem; color: var(--text-3); }
/* Hauteurs en px, pas en em : l'intitule et le trace n'ont pas la meme taille
   de police, et l'un doit decaler l'autre d'exactement la meme valeur. */
.gsc-axe em { font-style: normal; font-size: 0.66rem; letter-spacing: 0.06em; height: 14px; margin-bottom: 10px; line-height: 14px; }
.gsc-axe span { flex: 1; line-height: 0; }
.gsc-axe span:last-child { flex: 0; }
.gsc-axe-g { text-align: right; }
.gsc-axe-d { text-align: left; }
.gsc-area { position: relative; height: 220px; margin-top: 24px; }
.gsc-area svg { display: block; width: 100%; height: 100%; overflow: visible; }
.gsc-grid line { stroke: var(--line-2); stroke-width: 1; vector-effect: non-scaling-stroke; }
.gsc-area polyline {
  fill: none; stroke-width: 1.6; vector-effect: non-scaling-stroke;
  stroke-linejoin: round; stroke-linecap: round;
}
.gsc-clics { stroke: #4a8cf5; }
.gsc-impr  { stroke: #8b63d6; }
/* Les mois, poses sous le trace a leur abscisse. Le premier, colle a gauche,
   ne peut pas etre centre sur son point sans sortir du cadre. */
.gsc-mois { position: relative; height: 22px; margin-top: 8px; font-size: 0.7rem; color: var(--text-3); }
.gsc-mois span { position: absolute; top: 4px; transform: translateX(-50%); white-space: nowrap; }
.gsc-mois span:first-child { transform: none; }

/* MANIFESTE ---------------------------------------------------------------
   Pas de filet superieur : la phrase n'ouvre pas une nouvelle section, elle
   ferme la precedente. Un trait au-dessus en aurait fait un chapitre de plus ;
   sans trait, elle est la conclusion de la comparaison, ce qu'elle est
   reellement. */
.section.manifesto { border-top: none; padding-block: clamp(104px, 15vh, 190px); }

/* SOCLAI =================================================================
   La seule section du site qui s'autorise des images ET de la couleur. Elle
   vend un produit, pas une prestation : un produit, ca se montre, et il arrive
   avec son identite. Les visuels viennent de soclai.com en couleur d'origine ;
   la teinte d'accent (--sc) est definie dans components.css, sous #soclai, pour
   que la page de campagne en herite sans duplication.

   Une lueur tres basse pose le bloc dans la page : c'est elle qui fait la
   coupure quand on defile vite. 11 % au plus, sur un rayon tres large - au-dela
   on voit la bande de degrade avant de voir la couleur. */
#soclai {
  background: radial-gradient(130% 72% at 50% 44%,
    rgba(109, 91, 208, 0.11) 0%, rgba(109, 91, 208, 0.045) 40%, rgba(109, 91, 208, 0) 74%);
}

/* Bandeau d'ouverture, pleine largeur, colle au haut de la section : entre deux
   filets, il fait la coupure du site. La scene est sombre a la source, sa
   couleur y reste sourde - beige, olive, marine - et n'entre pas en concurrence
   avec le violet du produit.

   DEUX degrades et non un. Un voile vertical seul assombrissait les visages -
   ils sont dans le bas de l'image, exactement la ou il faut le plus de densite
   pour lire le titre. Le voile HORIZONTAL fait le travail du contraste a gauche,
   ou vit le texte, et laisse la droite claire, ou vit l'equipe ; le voile
   vertical ne sert plus qu'a fondre les deux bords dans la page. */
#soclai { padding-top: 0; }
.sc-band { position: relative; isolation: isolate; border-bottom: 1px solid var(--line); }
.sc-band img {
  width: 100%;
  height: clamp(380px, 50vh, 580px);
  object-fit: cover;
  object-position: center 42%;
}
.sc-band::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(to right, rgba(7, 7, 8, 0.96) 0%, rgba(7, 7, 8, 0.9) 44%, rgba(7, 7, 8, 0.3) 72%, rgba(7, 7, 8, 0.1) 100%),
    linear-gradient(to bottom, rgba(7, 7, 8, 0.7) 0%, rgba(7, 7, 8, 0) 22%, rgba(7, 7, 8, 0) 66%, rgba(7, 7, 8, 0.72) 100%);
}
.sc-band-in {
  position: absolute; inset: auto 0 0 0; z-index: 2;
  padding-bottom: clamp(38px, 5.5vh, 66px);
}
.sc-band-in h2 { max-width: 20ch; }
.sc-band-in .label { margin-bottom: 20px; }

/* Le discours : texte a gauche, equipe a droite. */
.sc-split {
  margin-top: clamp(80px, 11vh, 124px);
  display: grid; grid-template-columns: 1fr 1fr; gap: 88px; align-items: start;
}
.sc-lead { font-size: 1.14rem; line-height: 1.68; color: var(--text-2); }
.sc-feats { margin-top: 48px; }
.sc-feat { padding: 28px 0; border-top: 1px solid var(--line); }
.sc-feat:last-child { border-bottom: 1px solid var(--line); }
.sc-feat h4 { margin-bottom: 7px; }
.sc-feat p { font-size: 0.91rem; margin: 0; }

/* Captures de l'application ---------------------------------------------
   Interface claire et coloree posee sur une page noire : c'est voulu, un ecran
   doit eclairer. C'est ici que la couleur entre le plus - violet des boutons,
   vert des statuts, pastilles des assistants - et c'est la meilleure preuve que
   le produit existe. Le cadre a filet et sa barre de titre disent "capture" sans
   imiter une fenetre de navigateur, qui aurait vieilli le rendu. */
.sc-shots { margin-top: clamp(80px, 11vh, 132px); }
.shot { border: 1px solid rgba(109, 91, 208, 0.28); border-radius: var(--radius-lg); overflow: hidden; background: var(--surface); }
.shot-bar {
  display: flex; align-items: center; gap: 14px;
  padding: 13px 20px; border-bottom: 1px solid rgba(109, 91, 208, 0.22);
  font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-3);
}
.shot-dots { display: flex; gap: 6px; flex-shrink: 0; }
.shot-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--line-3); }
.shot-dots i:first-child { background: var(--sc); }
.shot img { width: 100%; display: block; }
.shot-cap { margin-top: 20px; font-size: 0.89rem; color: var(--text-3); max-width: 58ch; }

.sc-shots-pair { margin-top: 44px; display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: start; }

/* Outils connectes : logos dans leurs couleurs de marque ----------------
   Ils etaient gris, et c'etait deux fois un probleme : illisibles pour la moitie
   d'entre eux (un glyphe blanc sur aplat de couleur vire au blanc sur blanc des
   qu'on eclaircit), et surtout meconnaissables - un bandeau d'integrations ne
   sert a rien si on ne reconnait pas les marques d'un coup d'oeil. En couleur,
   ils restent des SVG : plus nets, plus legers, et aucun filtre a calibrer. */
.sc-integ { margin-top: clamp(80px, 11vh, 132px); padding-top: 56px; border-top: 1px solid var(--line); }
.sc-integ-head { display: flex; justify-content: space-between; align-items: baseline; gap: 40px; flex-wrap: wrap; }
.sc-integ-head p { font-size: 0.95rem; max-width: 46ch; }
.sc-integ-grid {
  margin-top: 44px;
  display: grid; grid-template-columns: repeat(6, 1fr);
  border-top: 1px solid var(--line); border-left: 1px solid var(--line);
}
.sc-integ-grid li {
  display: flex; align-items: center; justify-content: center;
  padding: 32px 16px;
  border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.sc-integ-grid img {
  height: 30px; width: auto; max-width: 100%;
  opacity: 0.92;
  transition: opacity var(--transition);
}
.sc-integ-grid li:hover img { opacity: 1; }

.sc-cta { margin-top: clamp(68px, 9vh, 104px); }

/* BRAND BAND : le logo en grand, respiration avant l'appel final ---------- */
.brand-band { border-top: 1px solid var(--line); text-align: center; padding-block: clamp(88px, 15vh, 180px); }
.brand-band img { width: min(660px, 82%); margin-inline: auto; }
.brand-band .bb-tag { margin-top: 34px; font-size: 0.72rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--text-3); }

/* CTA --------------------------------------------------------------------- */
.cta { text-align: center; }
.cta h2 { max-width: 18ch; margin-inline: auto; }
.cta > .container > .reveal > p { max-width: 54ch; margin: 26px auto 0; font-size: 1.1rem; color: var(--text-2); }
.cta .hero-actions { margin-top: 48px; justify-content: center; }

/* La garantie, juste sous les boutons : c'est la derniere objection avant le
   clic, et c'est aussi le seul endroit de la page ou l'on prend un engagement
   qui nous coute. Sans filet ni encadre - une promesse encadree ressemble a
   une mention legale. */
.cta-garantie {
  margin: 34px auto 0;
  max-width: 60ch;
  font-size: 0.94rem;
  color: var(--text-3);
  line-height: 1.72;
}
.cta-garantie strong { color: var(--text-2); font-weight: 500; }

/* Les trois portes d'entree, sous l'appel a l'action et dans la meme section :
   c'etait une section a part, elle ne disait rien de plus que le bouton
   au-dessus d'elle. */
.contact-grid { margin-top: clamp(80px, 11vh, 120px); text-align: left; }
.contact-item { padding: 44px 34px 48px; display: flex; flex-direction: column; }
.contact-item .step-num { margin-bottom: 22px; }
.contact-item h3 { font-size: 1.04rem; margin-bottom: 11px; }
.contact-item a { margin-top: auto; align-self: flex-start; }
.contact-item p { font-size: 0.89rem; color: var(--text-2); margin-bottom: 20px; }
.contact-item a { color: var(--text); border-bottom: 1px solid var(--line-2); padding-bottom: 2px; }
.contact-item a:hover { border-bottom-color: var(--text); }

/* Responsive -------------------------------------------------------------- */
@media (max-width: 1000px) {
  /* Le panneau passe sous le texte, et perd sa largeur de marge : en pleine
     largeur il devient un tableau a part entiere, ce qui se lit tres bien. */
  .hero-grid { grid-template-columns: 1fr; gap: 44px; }
  .hero-proof { max-width: 640px; }
}
@media (max-width: 980px) {
  .sc-split { grid-template-columns: 1fr; gap: 56px; }
  .sc-integ-grid { grid-template-columns: repeat(4, 1fr); }
  /* Trois cases dans une grille passee a deux colonnes laissent une case vide,
     bordee, au milieu de la page. La comparaison s'empile - ses cartes sont
     hautes et se lisent aussi bien l'une sous l'autre ; les trois portes
     d'entree restent a trois, leur texte tient dans un tiers de tablette. */
  #pourquoi .rule-grid { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: repeat(3, 1fr); }
}
/* En dessous de 980 px, le titre occupe toute la largeur du bandeau : le voile
   lateral ne le couvre plus, il laisse sa derniere ligne sur l'image claire - et,
   pris a l'envers, il noircit l'equipe entiere puisqu'elle est desormais etalee
   sous le texte. On repasse donc au voile vertical, celui qui n'assombrit que le
   bas du cadre. */
@media (max-width: 980px) {
  .sc-band::after {
    background: linear-gradient(to top,
      rgba(7, 7, 8, 0.97) 0%, rgba(7, 7, 8, 0.9) 44%, rgba(7, 7, 8, 0.4) 76%, rgba(7, 7, 8, 0.3) 100%);
  }
  .sc-band img { object-position: center 30%; }
}
@media (max-width: 760px) {
  .sc-shots-pair { grid-template-columns: 1fr; gap: 34px; }
}
@media (max-width: 620px) {
  .contact-grid { grid-template-columns: 1fr; }
  .contact-item { padding-inline: 26px; }
  .constat-note { margin-top: 42px; font-size: 1.02rem; }
  /* Les operateurs passent entre des lignes empilees : chaque case prend
     toute la largeur et l'operateur se centre au-dessus de la suivante. */
  .constat-calc { flex-direction: column; }
  .constat-calc > div { flex-basis: auto; }
  .constat-calc .cc-op { width: auto; padding: 6px 0; }
  .hp-row { grid-template-columns: 64px minmax(0, 1fr); padding: 13px 18px; }
  .hp-num { font-size: 1.4rem; }
  .hp-head { padding: 13px 18px; }
  .sc-integ-grid { grid-template-columns: repeat(3, 1fr); }
  .sc-integ-grid li { padding: 24px 12px; }
  .sc-integ-grid img { height: 26px; }
  .shot-bar { padding: 11px 16px; font-size: 0.66rem; letter-spacing: 0.14em; }
}

/* Responsive des realisations -------------------------------------------
   La galerie suit .cols-3 (deux colonnes sous 980 px, une seule sous 620) :
   rien a redeclarer. Restent le tableau de resultats, qui perd sa colonne de
   releve, et le rappel d'action, qui passe le bouton sous le texte. */
@media (max-width: 980px) {
  .gsc-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .perf-row { grid-template-columns: 1fr; }
  .perf-kpi { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(16px, 3vw, 32px); }
  .perf-kpi > div { flex-direction: column; align-items: flex-start; gap: 5px; }
}
@media (max-width: 820px) {
  .refs-cta { grid-template-columns: 1fr; }
  .refs-cta .btn { justify-self: start; }
}
@media (max-width: 560px) {
  /* Trois colonnes de 100 px cassent "Position moyenne" en deux lignes sous une
     valeur seule : on revient a l'intitule a gauche, la valeur a droite. */
  .perf-kpi { grid-template-columns: 1fr; }
  .perf-kpi > div { flex-direction: row; align-items: baseline; justify-content: space-between; gap: 18px; }
  /* A 400 px, les deux axes mangeraient le tiers du trace : l'axe des
     impressions disparait (la tuile violette reste sa legende) et celui de
     gauche se resserre. */
  .gsc-plot { grid-template-columns: 34px minmax(0, 1fr); }
  .gsc-axe-d { display: none; }
  .gsc-area { height: 170px; }
  .gsc-tile { padding: 14px 14px 12px; }
  .gsc-tile strong { font-size: 1.3rem; }
  .gsc-mois .is-serre { display: none; }
  .ref-body { padding: 28px 24px 30px; }
}