/* =========================================================================
   Page Solutions — sections propres à cette page.
   Fichier séparé, comme faq.css : styles.css reste le socle partagé et n'est
   pas alourdi pour une seule page. Tout s'appuie sur les tokens existants
   (--l-txt, --l-soft, --l-brd, --blue, --blue-2, --blue-glow, --ease) et sur
   les composants déjà en place (.container, .reveal, .tt-cta, .t-cta).
   ========================================================================= */

/* ---------------- Hero ---------------- */
/* le padding bas degage la preuve sociale de la section suivante */
.shero { padding: 150px 0 22px; }
/* Hero centre : le contenu tient dans une colonne de 900 px au milieu de la
   page, le sous-titre dans une colonne plus etroite pour rester lisible. */
.shero__in { max-width: 900px; margin: 0 auto; text-align: center; }
.shero__tag {
  display: inline-block; font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 13px; font-weight: 600; letter-spacing: .06em; color: var(--blue);
}
.shero__title {
  text-wrap: balance;
  font-family: "Sora","Inter",sans-serif; font-size: clamp(33px, 4.6vw, 54px);
  font-weight: 800; line-height: 1.05; letter-spacing: -.035em;
  color: var(--l-txt); margin: 16px 0 20px;
}
.shero__sub { font-size: clamp(16.5px, 1.5vw, 18.5px); line-height: 1.62; color: var(--l-soft); max-width: 720px; margin: 0 auto 32px; }
.shero__actions { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; }
.shero__ghost {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 15px; font-weight: 500; color: var(--l-soft);
  border: 1px solid var(--l-brd); border-radius: 999px; padding: 13px 20px;
  transition: border-color .2s var(--ease), color .2s var(--ease);
}
.shero__ghost:hover { border-color: rgba(63,95,230,.4); color: var(--blue); }
.shero__ghost svg { width: 15px; height: 15px; }

/* ---------------- Les tâches que nous automatisons ---------------- */
.sec-eyebrow {
  display: inline-block; font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 12.5px; font-weight: 600; letter-spacing: .06em; color: var(--blue); margin-bottom: 12px;
}
.sec-title {
  font-family: "Sora","Inter",sans-serif; font-size: clamp(27px, 3.3vw, 40px);
  font-weight: 800; line-height: 1.12; letter-spacing: -.03em; color: var(--l-txt); margin: 0 0 14px;
}
.sec-sub { font-size: 16.5px; line-height: 1.62; color: var(--l-soft); max-width: 560px; margin: 0; }

/* Trois colonnes reliées : les tâches à gauche, Envision IA au centre, les
   trois familles de solutions à droite. Les traits sont dessinés en CSS
   (aucune librairie), et passent en vertical sous 900 px. */
/* traits de liaison : discrets, purement décoratifs */

/* ---------------- Preuve sociale du hero ----------------
   Composition strictement identique a celle de /faq/ (.fqtm) et /offre/
   (.otm) : citation, puis portrait rond et prenom, puis les cinq etoiles,
   le tout centre. Les trois avis occupent la meme case de grille et se
   relaient en fondu, en CSS seul (aucun script, aucune hauteur qui saute).
   Seule difference avec la FAQ : pas de filet superieur, la section
   suivante en pose deja un quarante pixels plus bas. */
.shpr { margin: 34px auto 0; max-width: 620px; }
/* Le meme bloc sert aussi sous le CTA final : un peu plus detache de la ligne
   « 30 min · Gratuit · Sans engagement », et de l'air avant le footer. */
.scta .shpr { margin-top: 38px; }
.scta { padding-bottom: 22px; }
.shpr__stage { display: grid; }
.shpr__item {
  grid-area: 1 / 1; margin: 0; text-align: center;
  opacity: 0;
  animation: shprfade 12s ease-in-out infinite both;
}
.shpr__item:nth-child(2) { animation-delay: 4s; }
.shpr__item:nth-child(3) { animation-delay: 8s; }
.shpr:hover .shpr__item { animation-play-state: paused; }
@keyframes shprfade {
  0%   { opacity: 0; transform: translateY(6px); }
  6%   { opacity: 1; transform: none; }
  27%  { opacity: 1; transform: none; }
  33%  { opacity: 0; transform: translateY(-6px); }
  100% { opacity: 0; transform: translateY(-6px); }
}
.shpr__quote { font-size: 15.5px; line-height: 1.6; color: var(--l-txt); margin: 0 0 16px; text-wrap: balance; }
.shpr__who { display: flex; align-items: center; justify-content: center; gap: 9px; }
.shpr__ava { width: 30px; height: 30px; flex: none; border-radius: 50%; overflow: hidden; background: #e8ecf5; }
.shpr__ava img { width: 100%; height: 100%; object-fit: cover; display: block; }
.shpr__name { font-size: 13px; font-weight: 600; color: var(--l-txt); }
.shpr__org { font-weight: 400; color: var(--l-soft); }
.shpr__stars { margin-top: 9px; color: #f5a623; font-size: 16px; letter-spacing: .16em; line-height: 1; }
@media (max-width: 560px) {
  .shpr { margin-top: 28px; }
  .shpr__quote { font-size: 15px; }
}
/* Sans animation : un seul avis, jamais les trois superposes. */
@media (prefers-reduced-motion: reduce) {
  .shpr__item { animation: none; opacity: 0; }
  .shpr__item:first-child { opacity: 1; }
}

/* ---------------- Approche sur mesure ----------------
   Section courte placee entre le hero et les trois familles. Deux colonnes
   sur desktop (le titre a gauche, le propos a droite), empilees sous 860 px. */
.ssm { padding: 10px 0 0; }
/* la section suivante fournit deja sa respiration : on evite le double espace */
.ssm + .ttf { padding-top: 76px; }
/* Aucun filet de separation : la rupture avec le hero ne tient qu'a
   l'espacement. Colonne de titre volontairement etroite (500 px) pour que la
   premiere phrase tienne sur une ligne au lieu de s'etaler. */
.ssm__in {
  display: grid; grid-template-columns: minmax(0, 500px) minmax(0, 1fr);
  gap: 18px 56px; align-items: start;
  padding: 24px 0 0;
}
.ssm .sec-eyebrow { grid-column: 1; margin: 0 0 10px; }
.ssm__title {
  grid-column: 1; grid-row: 2;
  font-family: "Sora","Inter",sans-serif; font-size: clamp(24px, 2.6vw, 32px);
  font-weight: 800; line-height: 1.13; letter-spacing: -.03em; color: var(--l-txt); margin: 0;
  text-wrap: pretty;
}
/* « sur-mesure » ne doit jamais casser sur son trait d'union */
.ssm__title .nb { white-space: nowrap; }
/* La seconde phrase equilibre ses lignes pour elle-meme : sans cela elle se
   coupait sur « autour de », en laissant une preposition en bout de ligne.
   Aucun mot n'est modifie, seuls les retours a la ligne changent. */
.ssm__title .ssm__t2 { display: block; text-wrap: balance; }
/* Le texte demarre a la hauteur du titre, pas a celle du label : la ligne
   haute des deux colonnes est donc « Aucune solution standardisee. » */
.ssm__lead {
  grid-column: 2; grid-row: 2;
  font-size: 16.5px; line-height: 1.65; color: var(--l-soft); margin: 0; max-width: 620px;
}
.ssm__punch {
  grid-column: 2; grid-row: 3;
  margin: 18px 0 0; padding-left: 16px; border-left: 2px solid var(--blue-2);
  font-size: 16.5px; line-height: 1.5; font-weight: 600; color: var(--l-txt);
}
@media (max-width: 860px) {
  .ssm__in { grid-template-columns: 1fr; gap: 14px; }
  .ssm .sec-eyebrow, .ssm__title, .ssm__lead, .ssm__punch { grid-column: 1; grid-row: auto; }
  .ssm__punch { margin-top: 6px; }
}

/* Petit label de famille, au-dessus du titre de chaque bloc .ttf */
.ttf__kind {
  display: block; font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 11.5px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
  color: #8b93a6; margin-bottom: 7px;
}

/* ---------------- Exemples par métier ---------------- */
/* ==================================================================
   SOLUTIONS PAR ACTIVITÉ
   Un sélecteur d'activité, puis un panneau qui change sans recharger.
   Rien de nouveau côté peinture : mêmes cartes blanches, mêmes bordures
   `--l-brd`, mêmes rayons et même bleu que le reste de la page. Le bleu
   ne sert qu'à deux choses ici : l'onglet actif et le libellé de famille.
   ================================================================== */
.sact { padding: 104px 0 0; }
.sact__head { max-width: 720px; margin-bottom: 30px; }

/* ---- sélecteur d'activité ---- */
/* Le conteneur porte le débordement horizontal : sur mobile les huit
   onglets défilent latéralement DANS cette bande, jamais la page. */
.sact__tabwrap { position: relative; margin-bottom: 34px; }

/* Contrôleur d'activités : c'est le composant .hs__nav de l'accueil, repris tel
   quel (pastille, boutons ronds, chevrons). On ne fait que le positionner et le
   réserver au mobile — au-delà de 760 px les huit pastilles tiennent à l'écran. */
.sact__nav { display: none; }
.sact__tabs {
  display: flex; flex-wrap: wrap; gap: 9px;
  padding: 0; margin: 0;
}
.sact__tab {
  flex: none; padding: 10px 17px; border-radius: 999px;
  border: 1px solid var(--l-brd); background: #fff;
  font-family: inherit; font-size: 14.2px; font-weight: 500; color: var(--l-soft);
  cursor: pointer; white-space: nowrap;
  transition: border-color .22s var(--ease), color .22s var(--ease),
              background .22s var(--ease), box-shadow .22s var(--ease);
}
.sact__tab:hover { border-color: rgba(63, 95, 230, .34); color: var(--l-txt); }
.sact__tab:focus-visible { outline: 2px solid var(--blue-2); outline-offset: 2px; }
.sact__tab.is-on {
  background: linear-gradient(180deg, var(--blue-2), var(--blue));
  border-color: transparent; color: #fff; font-weight: 600;
  box-shadow: 0 12px 26px -14px var(--blue-glow);
}

/* ---- panneau d'une activité ---- */
.sact__panels { position: relative; }
/* Sans JavaScript, les huit panneaux restent affichés les uns sous les
   autres : le contenu demeure lisible et indexable. */
html.no-js .sact__panel[hidden] { display: grid; }
html.no-js .sact__panel + .sact__panel { margin-top: 46px; }
.sact__panel {
  display: grid; grid-template-columns: 330px minmax(0, 1fr); gap: 44px;
  align-items: start;
}
.sact__panel[hidden] { display: none; }
html:not(.no-js) .sact__panel { animation: sactIn .34s var(--ease-smooth) both; }
@keyframes sactIn { from { opacity: 0; transform: translateY(8px); } }

.sact__label {
  display: inline-block; margin-bottom: 12px;
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 11.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--blue);
}
.sact__title {
  font-family: "Sora", "Inter", sans-serif; font-weight: 700;
  font-size: clamp(21px, 2.1vw, 26px); line-height: 1.22; letter-spacing: -.02em;
  color: var(--l-txt); margin: 0 0 13px;
}
.sact__lead { font-size: 15.4px; line-height: 1.62; color: var(--l-soft); margin: 0; }

.sact__cases { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.sact__case {
  background: #fff; border: 1px solid var(--l-brd); border-radius: 16px; padding: 20px;
  transition: border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
.sact__case:hover {
  border-color: rgba(63, 95, 230, .3); transform: translateY(-2px);
  box-shadow: 0 22px 44px -30px var(--blue-glow);
}
/* Le type de solution, très discret : un point et quelques capitales.
   Il rattache le cas d'usage aux trois familles présentées plus haut. */
.sact__kind {
  display: inline-flex; align-items: center; gap: 6px; margin-bottom: 9px;
  font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--blue);
}
.sact__kind::before {
  content: ""; width: 4px; height: 4px; border-radius: 50%; background: currentColor;
}
.sact__case-t {
  font-family: "Sora", "Inter", sans-serif; font-size: 15.5px; font-weight: 700;
  line-height: 1.3; color: var(--l-txt); margin: 0 0 7px;
}
.sact__case-d { font-size: 14px; line-height: 1.56; color: var(--l-soft); margin: 0; }

/* ---- pied de section ---- */
.sact__foot {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 18px; margin-top: 34px;
  padding: 24px 28px; border-radius: 18px;
  background: var(--l-bg); border: 1px solid var(--l-brd);
}
.sact__foot-t {
  margin: 0; font-family: "Sora", "Inter", sans-serif;
  font-size: 17px; font-weight: 700; color: var(--l-txt);
}
.sact__all {
  margin-top: 18px; font-size: 15.2px; line-height: 1.6; color: var(--l-soft);
}
.sact__all b { color: var(--l-txt); font-weight: 600; }

/* Deux colonnes imbriquees (intro + cartes, puis cartes sur deux colonnes)
   etranglaient les cartes en dessous de 1120 px : leurs descriptions passaient
   a quatre lignes. L'intro repasse donc au-dessus des cartes plus tot, ce qui
   leur rend toute la largeur. */
@media (max-width: 1120px) {
  .sact__panel { grid-template-columns: minmax(0, 1fr); gap: 26px; }
}
@media (max-width: 760px) {
  .sact { padding-top: 78px; }
  /* Aligné à droite, juste au-dessus des pastilles : discret, et il indique
     le sens de lecture de la bande. */
  .sact__nav { display: flex; flex-direction: row; width: max-content; margin: 0 0 14px auto; }
  /* L'état désactivé en bout de liste vient déjà de .hs__nav button:disabled
     (opacity .38) : rien à redéfinir ici. */
  /* Huit onglets ne tiennent pas sur une ligne de téléphone : ils défilent
     dans leur bande, avec un accrochage pour que l'arrêt tombe juste. */
  .sact__tabs {
    flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
    padding: 2px 22px 4px; margin: 0 -22px;
    /* l'accrochage doit tenir compte du debord lateral, sinon la pastille
       centree se cale 22 px trop loin */
    scroll-padding-inline: 22px;
    /* Les bords s'estompent : la pastille coupee se lit alors comme « il y a
       la suite » et non comme une marge. La zone opaque commence a 22 px,
       exactement la ou demarre la premiere pastille : elle reste nette. */
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22px, #000 calc(100% - 30px), transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 22px, #000 calc(100% - 30px), transparent 100%);
  }
  .sact__tabs::-webkit-scrollbar { display: none; }
  /* centre plutot que start : l'activite choisie se place au milieu et laisse
     voir un morceau de la precedente et de la suivante. Pour la premiere de la
     liste le navigateur borne le defilement : elle reste a gauche, la suivante
     depasse a droite — c'est le comportement attendu. */
  .sact__tab { scroll-snap-align: center; }
  .sact__cases { grid-template-columns: minmax(0, 1fr); }
  .sact__foot { padding: 20px; }
  .sact__foot .btn { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  html:not(.no-js) .sact__panel { animation: none; }
  .sact__tab, .sact__case { transition: none; }
  .sact__case:hover { transform: none; }
}


/* ---------------- Responsive ---------------- */
@media (max-width: 900px) {
  /* le schéma passe en vertical : les traits horizontaux n'ont plus de sens */
}
@media (max-width: 760px) {
  .shero { padding-top: 122px; }
  .shero__actions { gap: 10px; }
  .shero__actions > * { width: 100%; justify-content: center; }
}

/* ---------------- Trois familles : grille a 3 blocs ----------------
   Le composant .ttf est concu pour deux colonnes. Les trois familles tiennent
   sur une ligne en grand ecran, puis se replient. */
.ttf__grid--fam { grid-template-columns: repeat(3, 1fr); }
.ttf__grid--fam .ttf__visual { height: 268px; margin-bottom: 20px; }

/* Cadrage du visuel Agents IA : la composition d'orbites est dessinee sur
   300 px et debordait du cadre de 268 px (anneaux rognes en haut et en bas,
   un satellite coupe de 18 px). On la met a l'echelle sans rien changer a son
   contenu, via la propriete `scale` : elle se compose avec les `transform`
   qui portent deja les animations d'orbite. */
.ttf__grid--fam .ttf__net > *:not(.ttf__rings2) { scale: .8; }
/* Les anneaux sont redimensionnes plutot que mis a l'echelle : leur centrage
   repose sur un translate(-50%, -50%), que `scale` fausserait (le pourcentage
   est calcule avant la mise a l'echelle, le cercle descendait de 14 px). */
.ttf__grid--fam .ttf__rings2 { width: 240px; height: 240px; }

/* Alignement strict des trois colonnes : chaque bloc reprend les lignes de la
   grille parente (subgrid), donc visuel, label, titre, description, exemples
   et bouton se posent tous a la meme hauteur, quelles que soient les longueurs
   de texte. Les navigateurs sans subgrid retombent sur le flux normal, la
   section reste correcte, seulement moins reglee. */
@supports (grid-template-rows: subgrid) {
  .ttf__grid--fam { grid-template-rows: auto; align-items: start; }
  .ttf__grid--fam .ttf__block {
    display: grid; grid-template-rows: subgrid; grid-row: span 6;
    row-gap: 0;
  }
}

/* Un seul niveau d'exemples par famille, replie par defaut. Le conteneur
   .ttf__reveal porte la fermeture (le script pose max-height et la classe
   .open dessus) : la liste et la note qu'il contient s'affichent ensemble.
   La liste elle-meme est donc rendue inconditionnellement visible ici, sinon
   la regle partagee de styles.css la garderait repliee a l'interieur. */
.ttf__reveal {
  max-height: 0; overflow: hidden; opacity: 0;
  transition: max-height .45s ease, opacity .35s ease, margin-top .35s ease;
}
.ttf__reveal.open { opacity: 1; margin-top: 14px; }
.ttf__grid--fam .ttf__list {
  max-height: none; opacity: 1; overflow: visible; margin: 0; transition: none;
}

/* Note rassurante des Agents IA : lisible, mais nettement en retrait des
   exemples pour qu'on ne la lise pas comme un cas d'usage de plus. */
.ttf__note {
  margin: 14px 0 0; padding: 11px 14px;
  border-radius: 12px; background: rgba(63,95,230,.055);
  font-size: 13.5px; line-height: 1.5; color: var(--l-soft);
}
.ttf__grid--fam .ttf__block p,
.ttf__grid--fam .ttf__list { max-width: none; }
@media (max-width: 1100px) {
  .ttf__grid--fam { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  .ttf__grid--fam { grid-template-columns: 1fr; }
  .ttf__grid--fam .ttf__visual { height: 300px; }
}

/* Sous 560 px, styles.css donne deja au cadre .ttf__dash sa geometrie exacte :
   314 x 180, soit la maquette de 524 x 300 reduite a 0,6. La hauteur de 300 px
   ci-dessus, pensee pour la colonne unique des tablettes, l'ecrasait a
   specificite egale (deux classes de chaque cote, la feuille la plus tardive
   l'emportant) et laissait jusqu'a 120 px de vide sous la maquette. On rend la
   main au composant : le cadre epouse de nouveau la hauteur de son contenu. */
@media (max-width: 560px) {
  .ttf__grid--fam .ttf__visual.ttf__dash { height: 180px; }
}

/* ---------------- Cloture ----------------
   Meme respiration que la cloture de la FAQ. La classe est definie ici car
   faq.css n'est pas charge sur cette page ; le composant .t-cta--audit
   lui-meme vit dans styles.css et est repris tel quel. */
/* La section Methode ne s'intercale plus ici : le CTA final suit directement
   les integrations, son padding haut est reduit d'autant pour que la jonction
   ne laisse pas un grand blanc. */
.scta { padding: 64px 0 0; }
@media (max-width: 760px) { .scta { padding-top: 74px; } }

/* ================= Composition centree de la page =================
   Le hero est centre : les en-tetes des sections suivantes le sont aussi,
   pour que la page se lise sur un seul axe. On ne touche qu'aux en-tetes
   (label, titre, chapeau) et au selecteur d'activite : les grilles, les
   cartes et les listes gardent leur alignement a gauche, seul lisible.
   La regle #familles est volontairement portee par l'identifiant : le
   composant .ttf est partage avec la page d'accueil, qui reste alignee
   a gauche (ce fichier n'est charge que par solutions.html, la portee
   est donc doublement sure). */
#familles .ttf__top { justify-content: center; text-align: center; }
#familles .ttf__intro { max-width: 760px; margin: 0 auto; }
/* Plus de retour a la ligne force : le titre s'equilibre tout seul, deux
   lignes en desktop et une coupure propre en mobile. */
#familles .ttf__title { text-wrap: balance; }
#familles .ttf__sub { max-width: 580px; margin: 0 auto; }

.sact__head { margin-left: auto; margin-right: auto; text-align: center; }
.sact__head .sec-sub { margin-left: auto; margin-right: auto; }

/* Les huit onglets d'activite se centrent sous leur titre. Sous 760 px la
   bande redevient une piste qui defile : on lui rend son alignement de
   depart, sinon le premier onglet n'est plus au bord gauche. */
.sact__tabs { justify-content: center; }
@media (max-width: 760px) { .sact__tabs { justify-content: flex-start; } }

/* Phrase de cloture de la section activites : centree elle aussi. */
.sact__all { text-align: center; max-width: 760px; margin-left: auto; margin-right: auto; }