/* NextAiCollab - Composants partages. Monochrome, filets fins, zero ombre. */

/* BOUTONS ----------------------------------------------------------------
   Le bouton pilule a disparu. C'etait la seule forme de la page qui datait :
   un arrondi a fond de course est une convention d'application web, elle dit
   "produit SaaS" avant meme qu'on ait lu le libelle. Un rectangle a peine
   adouci (3 px) ne dit rien du tout, et c'est ce qu'on lui demande.

   Le survol du bouton plein ne joue plus sur l'opacite mais sur la couleur de
   fond : un aplat blanc passe a 0,85 d'opacite sur du noir vire au gris sale,
   alors qu'un blanc legerement casse reste un blanc. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 28px;
  border-radius: var(--radius-sm);
  font-weight: 500;
  font-size: 0.93rem;
  letter-spacing: -0.005em;
  white-space: nowrap;
  border: 1px solid transparent;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.btn-primary { background: var(--white); color: var(--black); }
.btn-primary:hover { background: #dedee2; }
.btn-ghost { color: var(--text); border-color: var(--line-2); }
.btn-ghost:hover { border-color: var(--line-3); background: rgba(255, 255, 255, 0.04); }
.btn-lg { padding: 17px 36px; font-size: 0.98rem; }
.btn-block { width: 100%; }

/* La fleche avance au survol : le seul mouvement decoratif du site, et il ne
   joue que sur un geste du visiteur. */
.btn .arw, .link-arrow::after { transition: transform var(--transition); }
.btn:hover .arw, .link-arrow:hover::after { transform: translateX(5px); }

.link-arrow { color: var(--text); font-weight: 500; font-size: 0.94rem; display: inline-flex; align-items: center; gap: 9px; }
.link-arrow::after { content: "\2192"; }

/* HEADER ------------------------------------------------------------------ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: rgba(7, 7, 8, 0.78);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition), background var(--transition);
}
.site-header.scrolled { border-bottom-color: var(--line); background: rgba(7, 7, 8, 0.9); }
.site-header .container { display: flex; align-items: center; justify-content: space-between; gap: 24px; }

.brand { display: inline-flex; align-items: center; flex-shrink: 0; }
.brand img { height: 25px; width: auto; }

.nav { display: flex; align-items: center; gap: 44px; }
.nav-links { display: flex; align-items: center; gap: 34px; }
.nav-links a { color: var(--text-2); font-size: 0.9rem; }
.nav-links a:hover, .nav-links a.active { color: var(--text); }

.nav-actions { display: flex; align-items: center; gap: 16px; }
.nav-actions .btn { padding: 11px 22px; font-size: 0.88rem; }
.nav-toggle { display: none; width: 26px; height: 20px; position: relative; }
.nav-toggle span { position: absolute; left: 0; width: 100%; height: 1.5px; background: var(--text); transition: var(--transition); }
.nav-toggle span:nth-child(1) { top: 2px; }
.nav-toggle span:nth-child(2) { top: 9px; }
.nav-toggle span:nth-child(3) { top: 16px; }
.nav-toggle.is-open span:nth-child(1) { top: 9px; transform: rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open span:nth-child(3) { top: 9px; transform: rotate(-45deg); }

/* FOOTER ------------------------------------------------------------------ */
.site-footer { border-top: 1px solid var(--line); padding-block: 96px 44px; }
.footer-top {
  display: grid;
  grid-template-columns: 2.2fr 1fr 1fr 1fr;
  gap: 56px;
  padding-bottom: 60px;
  border-bottom: 1px solid var(--line);
}
.footer-brand img { height: 22px; margin-bottom: 24px; }
.footer-brand p { max-width: 330px; font-size: 0.9rem; color: var(--text-3); }
.footer-col h4 {
  font-size: 0.68rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--text-3); margin-bottom: 22px;
}
.footer-col a { display: block; color: var(--text-2); font-size: 0.9rem; margin-bottom: 13px; }
.footer-col a:hover { color: var(--text); }
.footer-legal { padding-top: 28px; font-size: 0.76rem; color: var(--text-3); line-height: 1.8; }
.footer-bottom {
  display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
  padding-top: 22px; font-size: 0.8rem; color: var(--text-3);
}
.footer-bottom a { color: var(--text-3); }
.footer-bottom a:hover { color: var(--text-2); }

/* BANDE DE REFERENCES -----------------------------------------------------
   Deux filets, un intitule et six noms. Elle a remplace la bande de capacites,
   qui reprenait mot pour mot les intitules de #services trois ecrans plus bas.

   L'intitule reste en petites capitales espacees, comme tous les .label du
   site ; les noms, eux, sont en casse normale et un cran plus clairs. C'est
   volontaire : ce sont des noms propres, et des noms propres en capitales
   espacees deviennent illisibles - on ne reconnait plus "Immobiliere du
   Bethunois", on dechiffre une suite de lettres. La hierarchie se fait donc ici
   par la couleur du gris et non par la casse.

   HORS LIGNE DEPUIS LE 02/09/2026 : la bande n'est plus rendue sur aucune
   page (pas de nom de client tant que les references ne sont pas remises).
   Les regles restent pour son retour. */
.clients { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.clients .container {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  gap: 12px clamp(30px, 4vw, 56px);
  align-items: baseline;
  padding-block: 28px;
}
.clients-say {
  font-size: 0.7rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--text-3); white-space: nowrap;
}
/* 0,8 rem et 28 px d'ecart au maximum : les six noms font 105 signes, et il ne
   reste que 920 px a cote de l'intitule. Au corps precedent, le sixieme tombait
   seul sur une deuxieme ligne - une bande de reassurance qui deborde d'une
   ligne pour un mot fait exactement l'effet inverse de celui recherche. */
.clients-list { display: flex; flex-wrap: wrap; gap: 10px clamp(20px, 2.2vw, 28px); }
.clients-list li { font-size: 0.8rem; color: var(--text-2); letter-spacing: -0.003em; }

/* DEFILEMENT CONTINU (01/09/2026). Six noms qui tiennent sur une ligne ne
   faisaient pas une bande, ils faisaient une ligne de texte. En mouvement, la
   bande devient un OBJET de la page - et elle peut porter le secteur a cote du
   nom, ce que la ligne fixe n'avait pas la place de faire.

   La liste est ecrite deux fois dans le HTML et la piste se deplace de -50 % :
   la seconde copie prend exactement la place de la premiere au moment ou
   l'animation reboucle, il n'y a donc jamais de trou. Le masque fond les deux
   bords dans la page, comme celui du canvas de #services. 48 s pour un tour :
   on doit pouvoir lire chaque nom deux fois avant qu'il sorte. Le survol met
   en pause, pour qui veut lire un secteur. */
.clients-marquee {
  overflow: hidden; min-width: 0;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  display: flex;
}
.clients-marquee .clients-list {
  flex: 0 0 auto; flex-wrap: nowrap;
  gap: 0; padding-right: clamp(40px, 5vw, 72px);
  animation: clients-defile 48s linear infinite;
}
.clients-marquee:hover .clients-list { animation-play-state: paused; }
.clients-marquee li {
  display: inline-flex; align-items: baseline; gap: 10px; white-space: nowrap;
  padding-right: clamp(40px, 5vw, 72px);
}
.clients-marquee .cl-nom { color: var(--text); font-size: 0.86rem; }
.clients-marquee .cl-sect {
  font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-3);
}
@keyframes clients-defile { to { transform: translateX(-100%); } }

/* Appels a l'action d'un hero ou d'une section forte ---------------------- */
.hero-actions { margin-top: 48px; display: flex; gap: 14px; flex-wrap: wrap; }
.hero-note { margin-top: 34px; font-size: 0.82rem; color: var(--text-3); max-width: 62ch; }
.soclai-actions { margin-top: 44px; display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }

/* LIGNE DE REASSURANCE DU HERO -------------------------------------------
   Trois faits, trois colonnes, sous un filet. C'est la meme information que la
   phrase a points mediants qu'elle remplace ; ce qui change, c'est qu'on la
   LIT. Une ligne de trois arguments a la suite se saute d'un coup d'oeil ;
   trois colonnes titrees se parcourent comme l'ours d'un journal, et chacune
   repond a une objection precise : combien ca coute d'essayer, quand on me
   repond, a qui j'ai affaire. */
.hero-meta {
  margin-top: clamp(56px, 7vw, 84px);
  padding-top: 30px;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px 48px;
  max-width: 880px;
}
.hero-meta dt {
  font-size: 0.66rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--text-3); margin-bottom: 9px;
}
.hero-meta dd { font-size: 0.94rem; color: var(--text); line-height: 1.5; }

/* PANNEAU DE PREUVES DU HERO (01/09/2026) -----------------------------
   Cinq lignes, cinq nombres, sur le modele du panneau d'agents de Soclai :
   meme filet, meme en-tete en capitales. Le grand chiffre tient la gauche, le
   libelle la droite, et chaque ligne est un LIEN vers l'endroit de la page ou
   le chiffre se verifie - c'est la seule raison d'etre d'un chiffre dans un
   hero. Rien ici n'est saisi a la main : les comptes viennent de count() dans
   index.php. Le survol allume la ligne, comme une ligne d'offre. */
.hero-proof {
  border: 1px solid var(--line-2); border-radius: var(--radius-lg);
  background: rgba(16, 16, 19, 0.6);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  overflow: hidden; align-self: end;
}
.hp-head {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 16px 24px; border-bottom: 1px solid var(--line);
  font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-3);
}
.hp-row {
  display: grid; grid-template-columns: 82px minmax(0, 1fr);
  align-items: baseline; gap: 16px;
  padding: 15px 24px; border-bottom: 1px solid var(--line);
  transition: background var(--transition);
}
.hp-row:last-child { border-bottom: 0; }
.hp-row:hover { background: rgba(255, 255, 255, 0.03); }
.hp-num {
  font-size: 1.7rem; font-weight: 600; letter-spacing: -0.03em; line-height: 1;
  color: var(--text); white-space: nowrap;
}
.hp-lab { font-size: 0.86rem; color: var(--text-2); line-height: 1.45; }
.hp-row:hover .hp-lab { color: var(--text); }

/* Panneau "agents" : une ligne par collaborateur, avec son portrait. */
.agent-panel { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.agent-panel .ap-head {
  padding: 19px 26px; border-bottom: 1px solid var(--line);
  font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-3);
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
.agent-row {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  padding: 17px 26px;
  border-bottom: 1px solid var(--line);
}
.agent-row:last-child { border-bottom: none; }
.agent-row .ar-name { color: var(--text); font-weight: 500; font-size: 0.96rem; }
.agent-row .ar-role { color: var(--text-3); font-size: 0.86rem; margin-top: 2px; }

/* Le portrait garde son fond blanc d'origine : dans un cercle, il fait la
   pastille claire qui pose la ligne. Detoure, on aurait des tetes flottantes.
   L'anneau prend la couleur du poste quand la ligne en declare une (--ag), et
   retombe sur le filet gris sinon - une ligne sans couleur reste correcte. */
.ar-face {
  width: 46px; height: 46px; flex-shrink: 0;
  border-radius: 50%; overflow: hidden;
  border: 2px solid var(--ag, var(--line-2));
  background: var(--surface-2);
}
.ar-face img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
/* La derniere ligne n'a pas de visage : c'est celui qu'on n'a pas encore cree. */
.ar-face.is-empty {
  border-style: dashed;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-3); font-size: 1.15rem; line-height: 1;
}

/* Le constat (grille de douleurs) ----------------------------------------
   Partage par l'accueil et la page de campagne : les deux ouvrent en nommant
   le probleme avant de proposer quoi que ce soit. */
.pain { padding: 58px 44px 66px; }

/* LE DESSIN AU TRAIT. Il ne decore pas le titre, il le redit : le site corne,
   le resultat sous la ligne de flottaison, le cadenas sans clef, la liste qui
   revient sur elle-meme (cf. lib/pictos.php). Une photo de banque d'images
   aurait fait le meme office pendant deux secondes, puis coute la credibilite
   de toute la page - on ne prouve pas un probleme reel avec une mise en scene.

   Il est dessine en var(--text-3), le gris des labels, et non en blanc : la
   hierarchie du bloc reste le titre, l'image ne fait que l'annoncer. */
.pain-picto {
  display: block;
  width: 46px; height: 46px;
  margin-bottom: 28px;
  color: var(--text-3);
  transition: color var(--transition), opacity 0.8s var(--ease), transform 0.8s var(--ease);
  opacity: 0;
  transform: translateY(7px);
}
.pain:hover .pain-picto { color: var(--text-2); }

/* Le dessin arrive APRES sa case, et les quatre arrivent en decale. La grille
   entiere porte .reveal ; sans ce delai, les six dessins apparaitraient d'un
   seul bloc et on verrait une animation. Decales de 90 ms, on ne voit qu'une
   page qui se pose. */
.reveal.is-visible .pain-picto { opacity: 1; transform: none; }
.pain:nth-child(2) .pain-picto { transition-delay: 0s, 0.09s, 0.09s; }
.pain:nth-child(3) .pain-picto { transition-delay: 0s, 0.18s, 0.18s; }
.pain:nth-child(4) .pain-picto { transition-delay: 0s, 0.27s, 0.27s; }
.pain:nth-child(5) .pain-picto { transition-delay: 0s, 0.36s, 0.36s; }
.pain:nth-child(6) .pain-picto { transition-delay: 0s, 0.45s, 0.45s; }

.pain h3 { font-size: 1.16rem; margin-bottom: 18px; }
.pain p { font-size: 0.95rem; color: var(--text-2); max-width: 44ch; }
/* Apres des bulles, la note prend plus d'air que apres une grille : la
   derniere queue descend de quatorze pixels sous la bulle, et la doublure de
   treize de plus - les 58 px valables sous une case de tableau n'en font plus
   que quarante ici, et la phrase de conclusion se retrouve collee. */
.pains-bulles + .constat-note { margin-top: clamp(70px, 7vw, 96px); }
.constat-note { margin-top: 58px; max-width: 64ch; font-size: 1.1rem; line-height: 1.72; color: var(--text-2); }

/* LE CALCUL DU CONSTAT (01/09/2026). Quatre cases et trois operateurs, sur une
   ligne : c'est la phrase du dessus, posee comme une operation qu'on peut
   refaire. Les cases sont des cellules de tableau (filets partages), les
   operateurs vivent ENTRE les cases, hors filet, en gris de label : ils ne sont
   pas des donnees. La derniere case porte le fond de surface, comme la colonne
   "nous" de la comparaison : c'est le resultat, pas une etape. */
.constat-calc {
  margin-top: clamp(34px, 4vw, 48px);
  display: flex; align-items: stretch; flex-wrap: wrap; gap: 0;
  max-width: 960px;
}
.constat-calc > div {
  flex: 1 1 150px; min-width: 0;
  padding: 20px 24px 22px;
  border: 1px solid var(--line);
}
.constat-calc > div + span + div { border-left-color: var(--line); }
.constat-calc dt {
  font-size: 0.64rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--text-3); margin-bottom: 10px; white-space: nowrap;
}
.constat-calc dd { font-size: 0.92rem; color: var(--text-2); white-space: nowrap; }
.constat-calc dd .num {
  font-size: 1.6rem; font-weight: 600; letter-spacing: -0.03em; color: var(--text);
  margin-right: 0.3em; line-height: 1;
}
.constat-calc .cc-op {
  flex: 0 0 auto; align-self: center;
  width: 40px; text-align: center;
  font-size: 1.1rem; color: var(--text-3); font-weight: 500;
}
.constat-calc .cc-res { background: var(--surface); border-color: var(--line-2); }
.constat-calc .cc-res dd { color: var(--text); }

/* LES BULLES DE DIALOGUE DU CONSTAT (accueil seulement) ------------------
   Posees le 01/09/2026 sur demande de Maxence, d'apres une planche de bulles
   en quinconce. Ce qui a ete repris, ce qui a ete ecarte, et pourquoi.

   POURQUOI DES BULLES ICI. La grille de filets annonce des CATEGORIES d'un
   meme tableau ; or ces quatre lignes n'en sont pas. "Le prestataire a
   disparu", "le site date, et ca se voit" sont a peu pres mot pour mot ce
   qu'un dirigeant dit au premier rendez-vous. La bulle ajoute la seule chose
   que la case ne disait pas : que ca vient de quelqu'un. C'est a ce titre
   qu'on sort du motif de grille - ici, et nulle part ailleurs sur le site.

   CE QU'ON A GARDE DE LA REFERENCE. La quinconce, la queue de bulle, la
   doublure decalee, et des largeurs volontairement inegales.

   CE QU'ON A ECARTE, ET POURQUOI :
   - le titre en couleur d'accent : la regle du site ne laisse entrer la
     couleur que quand elle porte une information (cf. tokens.css). Ici elle
     n'en porterait aucune. Le titre passe donc en blanc pur, le corps reste
     en gris : l'ecart de valeur remplace l'ecart de teinte ;
   - le texte centre : tout le site est ferre a gauche, et quatre paragraphes
     centres au milieu d'une page qui ne l'est pas se voient immediatement ;
   - la legere rotation des bulles. C'est elle qui donne son charme a la
     planche d'origine, et elle est inapplicable ici : nos bords sont des
     filets d'un pixel a 9 % d'opacite ; tournes d'un demi-degre, ils ne font
     plus un trait mais une suite de points gris. L'irregularite est donc
     obtenue autrement - par les decalages et les largeurs ;
   - l'ombre portee. Remplacee par une DOUBLURE : un second cadre en filet,
     decale, et creux. C'est la meme fonction - detacher la bulle du fond -
     dite dans la langue du site, qui n'a pas une seule ombre portee ailleurs.

   La doublure est faite de deux box-shadow durs empiles : le premier remplit
   un rectangle decale de la couleur du fond de section, le second, un pixel
   plus large, en dessine le filet. Un box-shadow suit le border-radius de la
   boite, donc la doublure epouse la bulle sans etre redessinee. Corollaire a
   connaitre : ce montage suppose un fond de section UNI (--bg). Sur une
   section alternee ou une image, le rectangle de remplissage se verrait. */
.pains-bulles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  column-gap: clamp(28px, 3.4vw, 56px);
  row-gap: clamp(48px, 5vw, 82px);
}

/* LA QUINCONCE. La colonne de droite descend d'un demi-bloc : c'est ce seul
   decalage qui fait lire les quatre bulles comme une conversation qui avance,
   au lieu de quatre cases posees en carre. */
.pains-bulles > :nth-child(even) { margin-top: clamp(38px, 4.6vw, 78px); }

/* Les largeurs ne sont pas egales, et l'ecart est petit expres : a 4 %, on ne
   voit pas quatre largeurs differentes, on voit un ensemble qui n'est pas
   aligne au cordeau. Les paires sont calees a droite de leur colonne. */
.pains-bulles > :nth-child(1) { width: 100%; }
.pains-bulles > :nth-child(2) { width: 96%; margin-left: auto; }
.pains-bulles > :nth-child(3) { width: 93%; }
.pains-bulles > :nth-child(4) { width: 100%; margin-left: auto; }

.pain.bulle {
  position: relative;
  padding: 34px 34px 36px;
  background: var(--surface);
  /* DEUX VALEURS DE FILET, ET C'EST LA HIERARCHIE. La bulle porte le filet
     franc (--line-3), sa doublure le filet moyen (--line-2). Essayees toutes
     les deux en --line, le filet ordinaire du site : a 9 % sur ce fond, la
     doublure ne se voyait pas du tout et il ne restait qu'une carte a coins
     ronds. Ces quatre objets sont les seuls du site a se detacher du fond ;
     ils ont le droit d'un trait plus franc que les cases d'un tableau. */
  border: 1px solid var(--line-3);
  /* 10 px et non --radius-lg (6 px). Le rayon des boutons et des panneaux se
     veut invisible ; celui-ci a un role, il fait la silhouette de la bulle.
     Plus haut on tomberait dans la bulle de messagerie, qui n'est pas le
     registre du site. */
  border-radius: 10px;
  box-shadow: 13px 13px 0 0 var(--bg), 13px 13px 0 1px var(--line-2);
  transition: transform var(--transition), box-shadow var(--transition),
              background var(--transition);
}

/* LA QUEUE. Un carre tourne de 45 degres dont deux bords portent le filet ;
   son fond est opaque et de la couleur de la bulle, ce qui lui fait recouvrir
   le filet du bas au passage - sans quoi un trait traverserait sa base. Elle
   coupe aussi le filet de la doublure la ou elle passe devant, exactement
   comme la queue coupe l'ombre sur la planche d'origine. */
.pain.bulle::after {
  content: '';
  position: absolute; bottom: -10px;
  width: 19px; height: 19px;
  background: var(--surface);
  border-right: 1px solid var(--line-3);
  border-bottom: 1px solid var(--line-3);
  border-bottom-right-radius: 3px;
  transform: rotate(45deg);
  transition: background var(--transition);
}

/* LES QUEUES SE FONT FACE. Colonne de gauche, la queue est a droite de la
   bulle ; colonne de droite, elle est a gauche : les quatre pointent vers le
   milieu de la page au lieu de partir chacune de son cote. Quatre voix qui
   parlent vers le meme point, ce qui est exactement ce que la section dit -
   quatre symptomes, un seul probleme, nomme dans la phrase juste en dessous. */
.pains-bulles > :nth-child(odd) .bulle::after,
.pains-bulles > :nth-child(odd).bulle::after { right: 42px; }
.pains-bulles > :nth-child(even) .bulle::after,
.pains-bulles > :nth-child(even).bulle::after { left: 42px; }

/* Au survol, la bulle avance de cinq pixels VERS sa doublure, qui se reduit
   d'autant, et son fond passe au gris de survol. C'est le seul geste qu'un
   objet en relief puisse faire sans mentir, et il ne coute aucune couleur.

   LE FILET NE BOUGE PAS, et c'est un choix. Passe au blanc, il marchait tres
   bien - trop : quatre bulles qui s'allument l'une apres l'autre au passage de
   la souris donnaient a la section un air d'interface a cliquer, alors qu'il
   n'y a rien a cliquer ici. Le deplacement suffit largement a repondre. Et le
   site tient a trois niveaux de filet, pas un de plus (cf. tokens.css). */
.pain.bulle:hover {
  transform: translate(5px, 5px);
  box-shadow: 8px 8px 0 0 var(--bg), 8px 8px 0 1px var(--line-2);
  background: var(--surface-2);
}
.pain.bulle:hover::after { background: var(--surface-2); }

/* Le titre passe en blanc pur : c'est ce qui remplace l'accent colore de la
   reference. Le dessin retrecit - dans une bulle deux fois moins large qu'une
   case de grille, 46 px de picto prenaient toute la premiere ligne. */
.pain.bulle h3 { color: var(--white); font-size: 1.14rem; margin-bottom: 14px; }
.pain.bulle p { font-size: 0.935rem; max-width: none; }
.pain.bulle .pain-picto { width: 36px; height: 36px; margin-bottom: 18px; }

/* Statistiques ------------------------------------------------------------ */
.stat { padding: 52px 34px 58px; }
.stat-num {
  font-size: clamp(2.5rem, 4.2vw, 3.4rem); font-weight: 600; letter-spacing: -0.03em;
  color: var(--text); line-height: 1; font-variant-numeric: tabular-nums;
}
.stat-label { margin-top: 18px; font-size: 0.85rem; color: var(--text-3); max-width: 30ch; }

/* Etapes ------------------------------------------------------------------ */
.step { padding: 52px 34px 60px; display: flex; flex-direction: column; }
.step-num { font-size: 0.72rem; font-variant-numeric: tabular-nums; color: var(--text-3); letter-spacing: 0.18em; }
.step h3 { margin: 28px 0 12px; font-size: 1.08rem; }
.step p { font-size: 0.89rem; color: var(--text-2); }

/* LE RAIL (01/09/2026). Un trait de deux pixels sur le bord haut de la grille,
   qui se trace de gauche a droite quand elle entre dans l'ecran, et sous
   lequel chaque case porte un POINT a l'aplomb de son numero. Les quatre
   cases cessent d'etre quatre cases : c'est une suite, dans cet ordre, et le
   trait qui se dessine est le temps qui passe. Meme geste que l'axe des
   barres de #services, en blanc puisqu'il n'y a rien a distinguer ici. */
.steps { position: relative; }
.steps::before {
  content: ''; position: absolute; left: 0; right: 0; top: -1px; height: 2px;
  background: var(--line-3);
  transform: scaleX(0); transform-origin: left;
  transition: transform 1.4s var(--ease) 0.1s;
}
.steps.is-visible::before { transform: scaleX(1); }
.steps .step { position: relative; }
.steps .step::before {
  content: ''; position: absolute; top: -5px; left: 34px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--bg-2); border: 1px solid var(--line-3);
  opacity: 0; transition: opacity 0.5s var(--ease);
}
.steps.is-visible .step::before { opacity: 1; }
.steps.is-visible .step:nth-child(2)::before { transition-delay: 0.35s; }
.steps.is-visible .step:nth-child(3)::before { transition-delay: 0.7s; }
.steps.is-visible .step:nth-child(4)::before { transition-delay: 1.05s; }

/* LE LIVRABLE. Sous un filet, en pied de case, cale en bas (margin-top: auto)
   pour que les quatre tombent a la meme hauteur. "Vous recevez" en capitales
   de label, le livrable en blanc : c'est la ligne qu'on veut voir, pas le
   paragraphe au-dessus. */
.step-out {
  margin-top: auto; padding-top: 22px;
  border-top: 1px solid var(--line);
  font-size: 0.86rem !important; color: var(--text) !important; line-height: 1.55;
}
.step-out span {
  display: block; margin-bottom: 8px;
  font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-3);
}
.step > p:not(.step-out) { margin-bottom: 26px; }

/* Questions frequentes ---------------------------------------------------
   <details>/<summary> natifs : ouverture au clavier, contenu present dans le
   DOM pour les moteurs, et aucun JavaScript a maintenir. */
.faq-list { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 32px;
  padding: 30px 0;
  color: var(--text); font-size: 1.06rem; font-weight: 500; letter-spacing: -0.012em;
}
.faq-item summary::-webkit-details-marker { display: none; }
/* Safari ignore list-style sur summary : il faut vider le marqueur lui-meme,
   sinon un chevron natif apparait a cote de notre "+". */
.faq-item summary::marker { content: ""; }
.faq-item summary::after {
  content: "+"; flex-shrink: 0;
  color: var(--text-3); font-size: 1.3rem; line-height: 1; font-weight: 400;
  transition: transform var(--transition), color var(--transition);
}
.faq-item[open] summary::after { transform: rotate(45deg); color: var(--text); }
.faq-item summary:hover { color: var(--white); }
.faq-item .faq-body { padding-bottom: 32px; max-width: 70ch; font-size: 0.96rem; }
.faq-item .faq-body p + p { margin-top: 12px; }

/* Carte generique --------------------------------------------------------- */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 34px;
  transition: border-color var(--transition), background var(--transition);
}
.card:hover { border-color: var(--line-2); background: var(--surface-2); }

/* MANIFESTE --------------------------------------------------------------
   Une phrase, beaucoup de vide, rien d'autre. C'est le bloc le plus cher de la
   page precisement parce qu'il ne contient presque rien : la place qu'on lui
   accorde EST l'argument. Il tombe apres la comparaison des trois options,
   c'est-a-dire au moment ou le visiteur a fini de peser et attend qu'on lui
   dise ce qu'on defend.

   Aucun filet, aucun fond, aucune bordure - un encadre l'aurait rendu
   decoratif. Il flotte, et c'est le vide autour qui le tient. */
.manifesto { text-align: center; }
.manifesto blockquote {
  font-size: clamp(1.75rem, 3.4vw, 2.8rem);
  font-weight: 600;
  line-height: 1.16;
  letter-spacing: -0.03em;
  color: var(--text);
  max-width: 25ch;
  margin: 0 auto;
  text-wrap: balance;
}
.manifesto-foot {
  margin: clamp(40px, 5vw, 60px) auto 0;
  max-width: 58ch;
  font-size: 0.98rem;
  color: var(--text-2);
}

/* CE QUI VOUS RESTE ------------------------------------------------------
   La retombee de la comparaison. Les six lignes ne se vendent pas une par une,
   elles se lisent comme un bordereau de livraison : c'est exactement l'effet
   recherche, parce que la question qui reste apres un devis n'est pas "que
   savez-vous faire" mais "qu'est-ce que j'ai, a la fin". */
.delivered {
  margin-top: clamp(60px, 7vw, 92px);
  display: grid;
  grid-template-columns: minmax(0, 250px) minmax(0, 1fr);
  gap: 20px clamp(48px, 6vw, 88px);
  align-items: start;
}
.delivered .label { margin-bottom: 16px; }
.delivered > div p { font-size: 0.9rem; color: var(--text-3); max-width: 34ch; }
.delivered ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 44px; padding-top: 0.2em; }
.delivered li {
  position: relative; padding-left: 22px;
  font-size: 0.92rem; color: var(--text-2);
}
.delivered li::before {
  content: ""; position: absolute; left: 0; top: 0.78em;
  width: 11px; height: 1px; background: var(--line-3);
}

/* Barre d'action collante (mobile) ----------------------------------------
   Sur telephone, les deux gestes qui convertissent - appeler, reserver - sont
   a portee de pouce en permanence. Elle n'apparait QUE sur les pages qui la
   posent, et jamais sur grand ecran, ou les memes boutons sont deja visibles
   dans l'en-tete. */
.action-bar { display: none; }
@media (max-width: 760px) {
  .action-bar {
    display: grid;
    /* minmax(0, 1fr) et NON 1fr : une piste "1fr" ne descend jamais sous la
       taille minimale de son contenu, et le contenu ici est un libelle en
       white-space: nowrap. Sur un ecran de 390 px, "Reserver un echange"
       imposait donc sa largeur et poussait le second bouton 25 px hors de
       l'ecran. Les deux pistes peuvent maintenant retrecir, et le libelle a le
       droit de passer a la ligne plutot que de deborder. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    position: fixed;
    inset: auto 0 0 0;
    z-index: 120;
    background: rgba(7, 7, 8, 0.94);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-top: 1px solid var(--line);
    /* Barre d'accueil iOS : sans ce padding, le bouton passe dessous. */
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    gap: 10px;
  }
  .action-bar .btn {
    width: 100%;
    padding: 14px 12px;
    font-size: 0.88rem;
    white-space: normal;
    text-align: center;
    line-height: 1.25;
  }
  /* Le pied de page ne doit pas finir cache derriere la barre. */
  body.has-action-bar .site-footer { padding-bottom: 110px; }
}

/* Mobile ------------------------------------------------------------------ */
@media (max-width: 900px) {
  .nav-toggle { display: block; }
  .nav {
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    padding: 12px var(--gutter) 28px;
    transform: translateY(-135%);
    transition: transform 0.4s var(--ease);
    max-height: calc(100dvh - var(--header-h));
    overflow-y: auto;
  }
  .nav.open { transform: translateY(0); }
  .nav-links { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-links a { padding: 16px 0; border-bottom: 1px solid var(--line); font-size: 1rem; }
  .nav-actions { flex-direction: column; align-items: stretch; margin-top: 20px; }
  .nav-actions .btn { width: 100%; padding-block: 14px; }
  .footer-top { grid-template-columns: 1fr 1fr; gap: 40px; }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 860px) {
  .delivered { grid-template-columns: 1fr; }
  .delivered ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .hero-meta { grid-template-columns: 1fr; gap: 20px; }
  .hero-meta dd { font-size: 0.92rem; }
  /* L'intitule passe au-dessus : garde a cote, il ne laisse plus que 130 px aux
     noms, qui tombent alors un par ligne sur six lignes. */
  .clients .container { grid-template-columns: 1fr; gap: 16px; }
}
@media (max-width: 560px) {
  .footer-top { grid-template-columns: 1fr; }
  .delivered ul { grid-template-columns: 1fr; }
}


/* PRESTATIONS : des lignes, et sous chaque ligne le trace de son perimetre --
   Six cartes bordees remplissaient l'ecran de bords et de puces. En lignes
   pleine largeur, chaque prestation a la place de s'expliquer et l'ensemble se
   parcourt comme un sommaire.

   Les mots-cles, eux, ne sont plus une colonne de 260 px releguee sur le cote :
   ils forment LA BARRE du domaine, posee sur un axe, une case par prise en
   charge. La troisieme colonne rendue au texte, c'est 260 px de plus pour le
   propos et une ligne qui se lit d'un seul tenant.

   AUCUNE LARGEUR N'ENCODE UNE VALEUR : les cases se partagent la barre au
   prorata de leur intitule, rien d'autre. Nous n'avons pas de chiffre par
   domaine, et un graphique dont les proportions sont decoratives se disqualifie
   a l'endroit exact ou il demande qu'on le croie. Ce que la barre dit, et c'est
   deja beaucoup : elle est pleine dans les six cas.

   Ne pas y ajouter de hauteurs, de pourcentages ni de scores tant qu'il n'y a
   pas de mesure derriere. */
.offer-list { border-top: 1px solid var(--line); }
.offer {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 30px 56px;
  align-items: start;
  padding: 46px 12px 52px;
  border-bottom: 1px solid var(--line);
  /* La transition est redeclaree EN ENTIER parce que .offer porte aussi
     .reveal : a specificite egale c'est la derniere lue qui gagne, et
     components.css passe apres base.css. Omettre opacity et transform ici,
     c'est supprimer l'apparition de la ligne sans qu'aucune regle n'ait l'air
     fautive. */
  transition: background var(--transition), opacity 0.9s var(--ease), transform 0.9s var(--ease);
}
.offer:hover { background: rgba(255, 255, 255, 0.018); }
/* CHAQUE LIGNE PREND SA TEINTE. Les six sont definies dans tokens.css ; ici
   elles sont seulement distribuees, dans l'ordre de $prestations. C'est un
   nth-child et pas un attribut ecrit dans le HTML pour une raison : la couleur
   est un fait de presentation, pas une donnee du domaine - $prestations ne
   doit pas avoir a connaitre des codes hexadecimaux. En contrepartie, l'ordre
   compte : deplacer une ligne deplace sa couleur avec sa position, jamais avec
   son intitule. La seule ou cela aurait une consequence est la 06, qui doit
   rester le violet de SoclAi.

   Le script du systeme anime LIT --d ici meme (getComputedStyle) : la teinte
   n'est ecrite qu'a un seul endroit, et le point qui tourne ne peut pas
   diverger de la ligne qu'il designe. */
.offer:nth-child(1) { --d: var(--d1); --dc: var(--d1c); --dr: var(--d1r); }
.offer:nth-child(2) { --d: var(--d2); --dc: var(--d2c); --dr: var(--d2r); }
.offer:nth-child(3) { --d: var(--d3); --dc: var(--d3c); --dr: var(--d3r); }
.offer:nth-child(4) { --d: var(--d4); --dc: var(--d4c); --dr: var(--d4r); }
.offer:nth-child(5) { --d: var(--d5); --dc: var(--d5c); --dr: var(--d5r); }
.offer:nth-child(6) { --d: var(--d6); --dc: var(--d6c); --dr: var(--d6r); }

/* Le numero est la CLE de la legende : c'est le seul endroit ou la teinte est
   posee toute seule, sans rien autour, et c'est lui qui apprend au visiteur
   que bleu veut dire 01. Il porte donc le ton clair, en gras. */
.offer-idx {
  font-size: 0.72rem; color: var(--dc); font-weight: 600;
  letter-spacing: 0.18em; padding-top: 0.7em;
}
.offer-tete {
  display: flex; align-items: baseline; justify-content: space-between;
  flex-wrap: wrap; gap: 6px 34px; margin-bottom: 15px;
}
.offer h3 { font-size: 1.42rem; }
.offer p { font-size: 0.97rem; max-width: 56ch; }
/* Le lien porte la couleur de sa ligne. La 06 le faisait deja - elle menait a
   SoclAi et annoncait la couleur du produit quinze centimetres plus bas ; ce
   cas particulier devient la regle generale, et la regle speciale disparait de
   home.css. */
.offer .link-arrow { margin-top: 18px; font-size: 0.91rem; color: var(--dc); }

/* L'etiquette de valeur, comme le nombre imprime au-dessus d'une barre : elle
   annonce le compte, et il se verifie en comptant les cases juste en dessous.
   C'est la seule facon honnete d'ecrire un chiffre ici. */
.offer-compte {
  font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-3); white-space: nowrap;
}
/* Le compte de la ligne prend la teinte de la ligne ; celui de l'axe, non : il
   totalise les six domaines et n'appartient a aucun. Les deux sont en gras -
   c'est le chiffre qu'on veut voir, pas le mot qui le suit. */
.offer-compte .num {
  color: var(--dc); font-weight: 600; letter-spacing: 0.06em; margin-right: 0.5em;
}
.offer-axe .num {
  color: var(--text-2); font-weight: 600; letter-spacing: 0.06em; margin-right: 0.5em;
}

/* La ligne d'axe posee au-dessus de la liste : ce qui est trace, et en quelle
   unite - exactement le role de la legende d'un graphique. Les deux nombres
   sont des comptes calcules, pas des estimations. */
.offer-axe {
  display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px 34px;
  padding: 0 12px 14px;
  font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-3);
}

/* LA BARRE --------------------------------------------------------------- */
.offer-track {
  grid-column: 2; position: relative;
  display: flex; align-items: stretch;
  margin-top: 4px;
}
/* L'axe est un ::after et non un border-bottom, pour une seule raison : il se
   trace de gauche a droite quand la ligne entre dans l'ecran, et les cases se
   posent dessus ensuite. Un bord aurait ete la avant elles. */
.offer-track::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: rgba(var(--dr), 0.6);
  transform: scaleX(0); transform-origin: left;
  transition: transform 1s var(--ease) 0.05s;
}
.offer.is-visible .offer-track::after { transform: scaleX(1); }

.offer-part {
  flex: 1 1 auto; min-width: 0;
  padding: 16px 16px 15px;
  font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase;
  /* Le ton CLAIR pour le texte, jamais le ton vif : a 0,68 rem en capitales
     espacees, un #6d5bd0 sur noir tombe a 3,9:1 et se lit a l'arrache. Le ton
     clair passe 9:1. Et le gras, demande le 01/09, fait le reste du travail :
     ces intitules sont ce que le visiteur balaie en premier. */
  color: var(--dc);
  font-weight: 600;
  /* Le fond et le filet du haut portent le ton VIF, mais tres dilue : la case
     doit se teinter, pas s'allumer. Six barres pleines a pleine saturation, ce
     serait un tableau de bord, exactement ce qu'on evite depuis le debut. */
  background: rgba(var(--dr), 0.075);
  /* TOUTE LA COULEUR EST DANS CETTE ARETE. Un aplat saturé sur six lignes
     donnerait un tableau de bord ; deux pixels de teinte pleine en crete de
     barre arretent l'oeil aussi surement et ne salissent rien. C'est le meme
     raisonnement que les filets du reste du site, avec de la couleur dedans. */
  border-top: 2px solid rgba(var(--dr), 0.9);
  border-left: 1px solid rgba(var(--dr), 0.28);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  opacity: 0; transform: translateY(7px);
  /* Quatre proprietes, quatre delais : le decalage ne doit toucher que
     l'arrivee. S'il s'appliquait aussi a background et color, le survol
     repondrait un tiers de seconde trop tard. */
  transition:
    opacity 0.75s var(--ease),
    transform 0.75s var(--ease),
    background var(--transition),
    color var(--transition);
  transition-delay: 0.12s, 0.12s, 0s, 0s;
}
.offer-part:first-child { border-left: 0; }
.offer-part:nth-child(2) { transition-delay: 0.21s, 0.21s, 0s, 0s; }
.offer-part:nth-child(3) { transition-delay: 0.3s, 0.3s, 0s, 0s; }
.offer-part:nth-child(4) { transition-delay: 0.39s, 0.39s, 0s, 0s; }
.offer.is-visible .offer-part { opacity: 1; transform: none; }
.offer:hover .offer-part { background: rgba(var(--dr), 0.13); }
.offer-part:hover { background: rgba(var(--dr), 0.22); color: var(--white); }

/* Le domaine que le systeme anime designe a l'instant s'allume dans la liste
   (classe posee par assets/js/services-viz.js). Le dessin et la liste cessent
   d'etre deux objets cote a cote : c'est le meme, vu deux fois. Volontairement
   tres discret - cela change toutes les 3,9 s, et un clignotement franc
   deviendrait vite insupportable a la lecture. La couleur n'y change rien :
   maintenant que les cases sont deja teintees au repos, l'ecart entre une
   ligne allumee et les autres reste faible, et il fallait qu'il le reste. La
   seule chose qui passe au ton PLEIN est l'axe - un trait de un pixel. */
.offer.is-actif { background: rgba(var(--dr), 0.035); }
.offer.is-actif .offer-part {
  background: rgba(var(--dr), 0.15);
  border-top-color: var(--d);
}
.offer.is-actif .offer-track::after { background: var(--d); }

/* Comparaison des trois manieres de regler le probleme -------------------
   La colonne "nous" n'est pas mise en avant par une couleur, elle l'est par un
   fond de surface et un intitule qui passe en blanc : la hierarchie tient sans
   sortir du noir et blanc. */
.cmp { padding: 54px 40px 58px; display: flex; flex-direction: column; }
.cmp-kind {
  font-size: 0.68rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--text-3); margin-bottom: 30px;
}
.cmp h3 { font-size: 1.24rem; margin-bottom: 18px; }
.cmp p { font-size: 0.94rem; }
/* Pas de regle "p + p" ici : elle l'emporterait en specificite sur le
   margin-top: auto du pied et celui-ci cesserait de se caler en bas de la
   carte, ce qui ne se voit que sur la colonne au texte le plus court. */
.cmp-foot {
  margin-top: auto; padding-top: 34px;
  font-size: 0.83rem; color: var(--text-3);
}
.cmp-us { background: var(--surface); }
.cmp-us .cmp-kind { color: var(--text); }
.cmp-us .cmp-foot { color: var(--text-2); }

/* LE TABLEAU COMPARATIF (01/09/2026). Quatre colonnes : les criteres, puis
   les trois options. Chaque colonne est une grille de 8 rangees (intitule,
   titre, cinq criteres, pied) qui S'ALIGNE SUR CELLES DU PARENT (subgrid) :
   la rangee "Quand ca demarre" a la meme hauteur dans les trois colonnes, quel
   que soit le texte le plus long. C'est ce qui fait qu'on peut lire EN
   TRAVERS - et comparer, c'est lire en travers.

   Sans subgrid (navigateurs anterieurs a 2023), chaque colonne garde ses
   propres hauteurs : les lignes ne s'alignent plus mais tout reste lisible,
   et chaque cellule porte son critere en petites capitales pour cette raison
   - sur grand ecran il est masque, la colonne de gauche le dit deja.

   La colonne "nous" ne gagne aucune couleur : un fond de surface, un filet
   moyen, et un intitule en blanc. La hierarchie tient sans sortir du noir et
   blanc, comme partout. */
.cmp-table {
  display: grid;
  grid-template-columns: minmax(0, 0.7fr) repeat(3, minmax(0, 1fr));
  grid-template-rows: auto auto repeat(5, auto) auto;
  border-top: 1px solid var(--line); border-left: 1px solid var(--line);
}
.cmp-table > * {
  display: grid; grid-row: 1 / -1; grid-template-rows: subgrid;
  padding: 0;
  border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
/* LES MARGES, REVUES LE 01/09/2026 au soir (« ajouter du padding tout ca ») :
   la premiere version reprenait les 30 px des cartes, et dans un tableau de
   huit rangees ca se lisait serre - l'intitule de colonne collait au filet du
   haut et le titre lui collait dessous. Les cases d'un tableau ont besoin de
   plus d'air que les cartes, pas moins : on lit en travers, et l'oeil doit
   pouvoir isoler une rangee. 36 px en tete, 28 par cellule, 34 en pied. */
.cmp-table .cmp-kind { padding: 38px 34px 0; margin: 0; }
/* Pas de filet entre l'intitule de colonne et le titre : les deux font UN
   en-tete, et c'est ce filet qui donnait l'impression que "Option 1" etait
   ecrase entre deux traits. */
/* .cmp-cell.cmp-h et non .cmp-h seul : la regle generique des cellules est
   ecrite plus bas et, a specificite egale, elle l'emporterait - c'est
   exactement ce qui s'est passe a la premiere tentative. */
.cmp-table .cmp-cell.cmp-h { padding: 16px 34px 38px; margin: 0; align-self: start; border-top: 0; }
.cmp-table .cmp-cell { padding: 28px 34px 30px; border-top: 1px solid var(--line); }
.cmp-table .cmp-cell p { font-size: 0.9rem; line-height: 1.62; }
.cmp-table .cmp-cell-lab { display: none; }
.cmp-table .cmp-foot { padding: 30px 34px 38px; margin: 0; border-top: 1px solid var(--line); align-self: stretch; }
.cmp-crit { color: var(--text-3); }
.cmp-crit .cmp-crit-lab {
  font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--text-2); align-self: start;
}
.cmp-table .cmp-us { border-color: var(--line-2); position: relative; }
.cmp-table .cmp-us::before {
  content: ''; position: absolute; left: -1px; right: -1px; top: -1px; height: 2px;
  background: var(--white);
}
.cmp-table .cmp-us .cmp-cell p { color: var(--text); }

@media (max-width: 980px) {
  /* Plus de colonne de criteres : chaque cellule porte le sien. Les trois
     options s'empilent en cartes, mais restent des tableaux dedans - la
     rangee "critere / reponse" se lit comme une fiche. */
  .cmp-table { grid-template-columns: 1fr; grid-template-rows: none; }
  .cmp-table > * { grid-row: auto; grid-template-rows: none; display: block; }
  .cmp-crit { display: none; }
  .cmp-table .cmp-cell {
    display: grid; grid-template-columns: minmax(0, 150px) minmax(0, 1fr); gap: 16px 28px;
    padding: 22px 30px 24px;
  }
  .cmp-table .cmp-cell-lab {
    display: block; font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--text-3); padding-top: 0.3em;
  }
  .cmp-table .cmp-kind { padding: 34px 30px 0; }
  .cmp-table .cmp-cell.cmp-h { padding: 14px 30px 30px; }
  .cmp-table .cmp-foot { padding: 26px 30px 34px; }
}
@media (max-width: 560px) {
  .cmp-table .cmp-cell { grid-template-columns: 1fr; gap: 6px; padding: 16px 22px; }
  .cmp-table .cmp-kind { padding-inline: 22px; }
  .cmp-table .cmp-cell.cmp-h { padding-inline: 22px; }
  .cmp-table .cmp-foot { padding-inline: 22px; }
}

/* MESURE, pas estimation : le partage au prorata tient jusqu'a 920 px de
   fenetre. En dessous, "Feuille de route chiffree" et "Applications metier"
   depassent leur case de 5 a 13 px et se terminent en points de suspension.
   Les cases passent donc en colonnes EGALES, avec des intitules qui ont le
   droit de revenir a la ligne - un retour a la ligne se lit, une troncature
   non. Des colonnes egales, c'est d'ailleurs un axe categoriel en bonne et due
   forme : on n'y perd rien du graphique. */
@media (max-width: 920px) {
  .offer-part {
    flex: 1 1 0; white-space: normal; overflow: visible;
    padding: 12px 12px 13px; font-size: 0.63rem; letter-spacing: 0.1em;
    /* Filet de securite pour les mots qu'aucune colonne ne peut contenir en
       entier - "Automatisation", "telephonique". hyphens: auto coupe alors la
       ou le francais le permet (la page est en lang="fr"), et break-word ne
       s'active que si meme la cesure ne suffit pas. Aucun des deux ne se voit
       tant qu'il reste de la place. */
    overflow-wrap: break-word; hyphens: auto;
  }
}
@media (max-width: 860px) {
  .offer { grid-template-columns: 48px minmax(0, 1fr); gap: 24px; padding: 38px 0 42px; }
}
@media (max-width: 700px) {
  /* Quatre colonnes dans 250 px, ce n'est plus un graphique, c'est de la
     typographie a la verticale. La barre se deplie donc en pile, et le dernier
     filet du bas fait l'axe. flex repasse a 0 0 auto : en colonne, la base de
     0 imposee plus haut s'appliquerait a la HAUTEUR et ecraserait les cases. */
  .offer-track { flex-direction: column; }
  .offer-track::after { display: none; }
  /* L'axe horizontal disparait avec la barre ; la couleur, elle, ne doit pas
     disparaitre avec lui. Elle se redresse en RAIL VERTICAL le long des cases
     empilees : le meme role, tourne de quatre-vingt-dix degres. Le filet de
     gauche est reecrit aussi sur :first-child, sinon la regle a deux classes
     du bloc principal (border-left: 0) l'emporterait sur celle-ci. */
  .offer-part {
    flex: 0 0 auto; padding: 13px 14px;
    border-top: 0; border-bottom: 1px solid var(--line);
    border-left: 3px solid rgba(var(--dr), 0.9);
  }
  .offer-part:first-child {
    border-top: 0;
    border-left: 3px solid rgba(var(--dr), 0.9);
  }
}
/* Les bulles repilent a 860 px et non a 620 comme le reste des .cols-2 : a
   deux colonnes, sous cette largeur, une bulle tombe a 300 px de large et son
   paragraphe descend a une trentaine de caracteres par ligne. En pile, la
   quinconce ne disparait pas pour autant - elle devient une INDENTATION une
   ligne sur deux, ce qui garde l'alternance et donc le fil de conversation. */
@media (max-width: 860px) {
  .pains-bulles { grid-template-columns: 1fr; row-gap: 44px; }
  .pains-bulles > :nth-child(even) { margin-top: 0; }
  .pains-bulles > :nth-child(1),
  .pains-bulles > :nth-child(3) { width: 100%; margin-left: 0; }
  .pains-bulles > :nth-child(2),
  .pains-bulles > :nth-child(4) { width: calc(100% - 34px); margin-left: 34px; }
}
@media (max-width: 620px) {
  /* Plus d'indentation du tout : 34 px pris sur 330 de large, ce n'est plus
     une alternance, c'est une bulle a l'etroit. La doublure retrecit avec. */
  .pains-bulles > :nth-child(2),
  .pains-bulles > :nth-child(4) { width: 100%; margin-left: 0; }
  .pain.bulle { box-shadow: 9px 9px 0 0 var(--bg), 9px 9px 0 1px var(--line-2); }
  /* Reprise du reglage de home.css : il est moins specifique que la regle
     d'adjacence ci-dessus, donc il ne s'appliquerait pas tout seul ici. */
  .pains-bulles + .constat-note { margin-top: 54px; }
  .pain.bulle:hover { transform: none; box-shadow: 9px 9px 0 0 var(--bg), 9px 9px 0 1px var(--line-2); }
  .pain, .cmp { padding-inline: 26px; }
  .pain { padding-block: 44px 50px; }
  .pain-picto { width: 40px; height: 40px; margin-bottom: 22px; }
  .pain.bulle { padding: 28px 26px 32px; }
  .pain.bulle .pain-picto { width: 34px; height: 34px; margin-bottom: 18px; }
  .stat, .step { padding-inline: 26px; }
}


/* SOCLAI : la seule couleur du site =====================================
   Le site est monochrome par principe, et cette section est son unique
   exception. Elle ne gagne pas une couleur d'accent, elle EMPRUNTE celle de
   SoclAi (#6d5bd0, cf. le tokens.css du projet BAZ-LOCAL) : le bloc presente un
   produit qui a sa propre identite, et la couleur dit "ici, ce n'est plus
   NextAiCollab". C'est une information, pas une decoration - et c'est aussi ce
   qui l'empeche de deborder : rien en dehors de #soclai n'y touche.

   DEUX valeurs et non une. #6d5bd0 tient le contraste sous un aplat (blanc
   dessus : 5,2:1) mais pas celui d'un petit texte sur fond noir (3,8:1, sous le
   seuil de 4,5:1). Le texte prend donc la variante claire, les fonds la pleine.

   Le selecteur porte sur l'ID : la page de campagne a la meme section, sous le
   meme id, elle herite donc de tout ceci sans une ligne de plus. */
#soclai {
  --sc: #6d5bd0;
  --sc-clair: #b6acec;
  --sc-vif: #7f6ee0;
  --sc-voile: rgba(109, 91, 208, 0.12);
}

#soclai .label,
#soclai .link-arrow,
#soclai .ap-head span:last-child { color: var(--sc-clair); }

/* Le bouton du produit n'est pas blanc comme les autres : c'est le seul geste
   de la page qui mene ailleurs que chez nous, et il doit se voir comme tel. */
#soclai .btn-primary { background: var(--sc); color: var(--white); }
#soclai .btn-primary:hover { background: var(--sc-vif); }
#soclai .btn-ghost { color: var(--sc-clair); border-color: rgba(109, 91, 208, 0.5); }
#soclai .btn-ghost:hover { border-color: var(--sc); background: var(--sc-voile); }

/* Les panneaux du bloc prennent un filet legerement teinte : assez pour que
   l'ensemble se tienne, trop peu pour qu'on nomme la couleur. */
#soclai .agent-panel { border-color: rgba(109, 91, 208, 0.28); }
#soclai .ap-head { border-bottom-color: rgba(109, 91, 208, 0.22); }