/* ==========================================================================
   Stackly — page publique « Assistant IA »
   (templates/home/assistant_ia.html.twig)

   La page reprend `home-index.css` pour le conteneur `.hp`, les boutons, les
   titres de section et la resolution des teintes d'outil par [data-tint] ;
   ce fichier ne pose que ce qui lui est propre.

   La teinte de la page est celle du module : --mod-assistant. Elle est posee
   une fois ici, et jamais en dur ailleurs dans la feuille.
   ========================================================================== */

.hp {
  --ia-teinte:     var(--mod-assistant);
  --ia-teinte-ink: var(--mod-assistant-ink);
  --ia-teinte-a:   var(--mod-assistant-tint);
  --ia-teinte-b:   var(--mod-assistant-tint-2);
}

/* ---------- L'annonce --------------------------------------------------- */

.ia-hero {
  max-width: var(--hp-max);
  margin: 0 auto;
  padding: calc(var(--gutter-section) * 1.1) var(--gutter-page) var(--gutter-section);
  text-align: center;
}

.ia-eyebrow {
  font-size: var(--text-label);
  font-weight: var(--weight-bold);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ia-teinte-ink);
  margin: 0 0 var(--space-4);
}

.ia-h1 {
  font-size: clamp(32px, 6vw, var(--text-section));
  line-height: 1.08;
  letter-spacing: -0.02em;
  font-weight: var(--weight-bold);
  color: var(--ink);
  margin: 0 auto var(--space-5);
  max-width: 18ch;
  text-wrap: balance;
}

.ia-lead {
  font-size: var(--text-body-lg);
  line-height: var(--lh-loose);
  color: var(--ink-secondary);
  max-width: 62ch;
  margin: 0 auto var(--space-8);
}

.ia-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
}

.ia-hero-note {
  margin-top: var(--space-4);
  font-size: var(--text-sm);
  color: var(--ink-muted);
}

/* ---------- Ossature des sections --------------------------------------- */

.ia-section {
  max-width: var(--hp-max);
  margin: 0 auto;
  padding: var(--gutter-section) var(--gutter-page);
}

.ia-head {
  text-align: center;
  max-width: 62ch;
  margin: 0 auto var(--space-8);
}

.ia-head .hp-sub { margin-top: var(--space-3); }

.ia-h3 {
  margin: 0 0 var(--space-3);
  font-size: var(--text-title-2);
  font-weight: var(--weight-bold);
  letter-spacing: var(--track-title);
  color: var(--ink);
  text-wrap: balance;
}

.ia-texte {
  margin: 0;
  font-size: var(--text-body);
  line-height: var(--lh-loose);
  color: var(--ink-secondary);
}

.ia-texte--centre {
  max-width: 62ch;
  margin: 0 auto var(--space-10);
  text-align: center;
}

.ia-note {
  max-width: 68ch;
  margin: var(--space-8) auto 0;
  padding-left: var(--space-5);
  border-left: 2px solid var(--ia-teinte);
  font-size: var(--text-sm);
  line-height: var(--lh-loose);
  color: var(--ink-muted);
}

/* ---------- Les croisements ---------------------------------------------
   Deux pastilles d'outil et la phrase que leur rapprochement produit. La
   carte ne porte NI ombre NI fond : ce ne sont pas six objets a comparer,
   c'est une liste de constats. Un filet a gauche suffit a les separer. */

.ia-croisements {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: var(--space-8) var(--space-10);
}

.ia-croisement {
  padding-left: var(--space-5);
  border-left: 1px solid var(--border);
}

.ia-croisement-modules {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-3);
}

.ia-puce {
  display: inline-block;
  padding: 3px var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--tint-a, var(--surface-sunken));
  color: var(--tint-ink, var(--ink-secondary));
  font-size: var(--text-label);
  font-weight: var(--weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.ia-plus {
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--ink-faint);
}

.ia-croisement-texte {
  margin: 0;
  font-size: var(--text-body);
  line-height: var(--lh-loose);
  color: var(--ink-secondary);
}

/* ---------- Ce qu'on peut lui demander ----------------------------------
   Huit cartes, quatre colonnes : le compte tombe juste a 4, a 2 et a 1, et
   aucune orpheline ne reste seule sur sa derniere ligne. Bord simple et pas
   d'ombre — huit ombres cote a cote font un damier, pas une hierarchie. */

.ia-questions {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
}

.ia-question {
  min-width: 0;
  padding: var(--space-6);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--surface);
}

.ia-question-icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin-bottom: var(--space-4);
  border-radius: var(--radius-field);
  background: var(--ia-teinte-a);
  color: var(--ia-teinte-ink);
  font-size: 18px;
}

.ia-question-sujet {
  margin: 0 0 var(--space-2);
  font-size: var(--text-label);
  font-weight: var(--weight-bold);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-faint);
}

/*  C'est la QUESTION qu'on vient lire, pas l'intitule : elle porte l'encre
    pleine et la taille de titre de carte. */
.ia-question-texte {
  margin: 0;
  font-size: var(--text-title-3);
  line-height: var(--lh-snug);
  color: var(--ink);
  text-wrap: pretty;
}

/* ---------- L'echange d'exemple -----------------------------------------
   Repris mot pour mot d'une capture. La question est a droite et la reponse
   a gauche, comme dans le produit : un lecteur qui a vu les captures plus
   bas reconnait la meme forme. */

.ia-echange {
  max-width: 68ch;
  margin: var(--space-12) auto 0;
}

.ia-echange-etiquette {
  margin-bottom: var(--space-4);
  font-size: var(--text-label);
  font-weight: var(--weight-bold);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-faint);
  text-align: center;
}

.ia-echange-question {
  width: fit-content;
  max-width: 100%;
  margin: 0 0 var(--space-4) auto;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-card);
  background: var(--ia-teinte-a);
  color: var(--ia-teinte-ink);
  font-size: var(--text-body);
  font-weight: var(--weight-medium);
}

.ia-echange-reponse {
  padding: var(--space-6);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--surface);
}

.ia-echange-reponse p {
  margin: 0 0 var(--space-3);
  font-size: var(--text-body);
  line-height: var(--lh-loose);
  color: var(--ink-secondary);
}

.ia-echange-reponse p:last-child { margin-bottom: 0; }

/*  La derniere ligne est la plus importante de la page : elle dit qu'il
    redige et que l'envoi reste a l'utilisateur. */
.ia-echange-chute {
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-subtle);
  font-style: italic;
  color: var(--ink-muted) !important;
}

/* ---------- Le schema -----------------------------------------------------
   Cinq colonnes : trois etapes et deux fleches. Les fleches sont de vrais
   elements de la grille et non des pseudo-elements positionnes ; le passage
   en colonne unique n'a donc qu'une rotation a faire. */

.ia-savoir {
  max-width: none;
  background: var(--surface-muted);
}

.ia-savoir > * {
  max-width: var(--hp-max);
  margin-inline: auto;
}

.ia-schema {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-5);
}

.ia-schema-col { min-width: 0; }

/*  Seul le noyau est une carte. Poser les trois a egalite ferait croire a
    trois objets comparables, alors que les deux extremites sont ce qui
    entre et ce qui sort. */
.ia-schema-col--noyau {
  padding: var(--space-6);
  border: 1px solid var(--ia-teinte);
  border-radius: var(--radius-card-lg);
  background: var(--surface);
  box-shadow: var(--shadow-2);
  text-align: center;
}

.ia-schema-legende {
  margin: 0 0 var(--space-4);
  font-size: var(--text-label);
  font-weight: var(--weight-bold);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-faint);
}

.ia-schema-puces {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.ia-schema-jeton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--ia-teinte-a);
  color: var(--ia-teinte-ink);
  font-size: 24px;
}

.ia-schema-titre {
  margin: var(--space-3) 0 var(--space-2);
  font-size: var(--text-title-2);
  font-weight: var(--weight-bold);
  letter-spacing: var(--track-title);
  color: var(--ink);
}

.ia-schema-pied {
  margin: var(--space-3) 0 0;
  font-size: var(--text-sm);
  line-height: var(--lh-loose);
  color: var(--ink-muted);
}

.ia-schema-pied strong {
  font-weight: var(--weight-semibold);
  color: var(--ink-secondary);
}

.ia-schema-fleche {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: var(--ink-disabled);
}

.ia-schema-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-4);
}

.ia-schema-liste li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-3);
  align-items: start;
  font-size: var(--text-sm);
  line-height: var(--lh-loose);
  color: var(--ink-secondary);
}

.ia-schema-liste i {
  margin-top: 2px;
  color: var(--ia-teinte);
  font-size: 15px;
}

/* ---------- Les trois garanties -------------------------------------------
   Trois affirmations, et il n'y en aura pas une quatrieme : une page qui se
   defend longuement sur la securite installe le doute qu'elle voulait lever.
   Pas de carte — la section entiere EST le bloc. */

.ia-garanties-section .ia-head { margin-bottom: var(--space-10); }

.ia-garanties {
  list-style: none;
  margin: 0;
  padding: var(--space-8) 0 0;
  border-top: 1px solid var(--border);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-8);
}

.ia-garantie { min-width: 0; }

.ia-garantie > i {
  display: block;
  margin-bottom: var(--space-3);
  font-size: 20px;
  color: var(--ia-teinte);
}

.ia-garantie-titre {
  margin: 0 0 var(--space-2);
  font-size: var(--text-title-3);
  font-weight: var(--weight-bold);
  color: var(--ink);
}

.ia-garantie-texte {
  margin: 0;
  font-size: var(--text-sm);
  line-height: var(--lh-loose);
  color: var(--ink-secondary);
}

/* ---------- Les deux voies -----------------------------------------------
   Une seule des deux colonnes est mise en avant. Les opposer a egalite
   laisserait croire a deux options equivalentes, alors que l'une demande
   quatre exports avant de pouvoir poser sa question. */

.ia-voies {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
  margin-bottom: var(--space-12);
}

.ia-voie {
  padding: var(--space-6);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--surface-muted);
}

.ia-voie.is-mieux {
  background: var(--surface);
  border-color: var(--ia-teinte);
  box-shadow: 0 0 0 1px var(--ia-teinte);
}

.ia-voie-titre {
  margin: 0 0 var(--space-3);
  font-size: var(--text-title-3);
  font-weight: var(--weight-bold);
  color: var(--ink);
}

.ia-voie.is-mieux .ia-voie-titre { color: var(--ia-teinte-ink); }

.ia-voie-texte {
  margin: 0;
  font-size: var(--text-body);
  line-height: var(--lh-loose);
  color: var(--ink-secondary);
}

.ia-transition { margin-bottom: var(--space-8); }

/* ---------- Les captures -------------------------------------------------
   Texte et image cote a cote, l'image changeant de bord une ligne sur deux.
   `minmax(0, 1fr)` et non `1fr` : une colonne `1fr` ne descend jamais sous
   la largeur minimale de son contenu, et l'image de 1440 px de large
   faisait alors deborder la grille entiere. */

.ia-images .ia-capture + .ia-capture { margin-top: var(--gutter-section); }

.ia-capture {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  align-items: center;
  gap: var(--space-12);
  margin: 0;
}

.ia-capture--inverse .ia-capture-texte { order: 2; }

/*  La premiere vue n'est pas une capture mais un dessin, large de quelques
    dizaines de pixels. Lui laisser les huit douziemes reserves aux captures
    ouvrait un vide entre le texte et lui. Sa colonne suit donc son sujet. */
.ia-capture--dessin {
  grid-template-columns: minmax(0, 4fr) minmax(0, 2fr);
}

.ia-capture-texte { min-width: 0; }

.ia-capture-image {
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-card-lg);
  background: var(--surface);
  box-shadow: var(--shadow-3);
  overflow: hidden;
}

.ia-capture-image img {
  display: block;
  width: 100%;
  height: auto;
}

/*  Le dessin porte son propre cadre : celui de la vignette ferait un
    double contour et une ombre sur une illustration qui n'en est pas une. */
.ia-capture-image--dessin {
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  overflow: visible;
}

/* ---------- L'appel ------------------------------------------------------ */

.ia-cta {
  text-align: center;
  padding: var(--space-16) var(--space-8);
  border: 1px solid var(--border);
  border-radius: var(--radius-card-lg);
  background: var(--surface);
}

.ia-cta .hp-sub {
  max-width: 54ch;
  margin: var(--space-3) auto var(--space-8);
}

.ia-cta-note {
  margin: var(--space-5) 0 0;
  font-size: var(--text-sm);
  color: var(--ink-muted);
}

.ia-cta-note a {
  color: var(--ia-teinte-ink);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ---------- La languette, dessinee ---------------------------------------
   PAS UNE CAPTURE : LE COMPOSANT LUI-MEME.

   Une photographie d'un objet de vingt-sept pixels est un mauvais
   support — agrandie elle se ramollit, reduite elle disparait. Les valeurs
   ci-dessous sont celles de `public/css/modules/assistant.css`, multipliees
   par `--ia-echelle`. Les proportions sont donc exactes ; seule la taille
   change. Si la vraie languette bouge, ces valeurs doivent bouger avec. */

.ia-ecran {
  /*  Le facteur d'agrandissement, et lui seul. Tout le reste en decoule. */
  --ia-echelle: 1.9;

  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-height: calc(143px * var(--ia-echelle) * 1.25);
}

/*  LE TRAIT EST LE BORD DE L'ECRAN.

    Un premier essai posait la languette dans un cadre vide de huit cents
    pixels : le sujet occupait un dixieme de la figure et le reste etait du
    blanc. Reduit a une languette et au trait auquel elle est soudee, le
    dessin dit la meme chose en un coup d'oeil. */
.ia-ecran-bord {
  width: 2px;
  align-self: stretch;
  border-radius: 2px;
  background: var(--border-strong);
}

.ia-ecran-languette {
  width: calc(27px * var(--ia-echelle));
  padding: calc(16px * var(--ia-echelle)) 0 calc(20px * var(--ia-echelle));
  border-radius: calc(14px * var(--ia-echelle)) 0 0 calc(14px * var(--ia-echelle));
  background: var(--mod-assistant);
  color: var(--ink-on-dark);
  box-shadow: var(--shadow-2);

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(12px * var(--ia-echelle));
}

.ia-ecran-languette > i {
  font-size: calc(18px * var(--ia-echelle));
  line-height: 1;
}

.ia-ecran-mot {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--font-ui);
  font-size: calc(13px * var(--ia-echelle));
  font-weight: var(--weight-semibold);
  letter-spacing: 0.02em;
  white-space: nowrap;
}


/* ---------- Tablette ----------------------------------------------------- */

@media (max-width: 1100px) {
  .ia-questions { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /*  Le schema passe en pile : les deux fleches pivotent d'un quart de tour
      plutot que de disparaitre — sans elles, les trois blocs ne se lisent
      plus comme une chaine. */
  .ia-schema { grid-template-columns: minmax(0, 1fr); }
  .ia-schema-fleche i { display: block; transform: rotate(90deg); }

  .ia-garanties { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
}

@media (max-width: 900px) {
  .ia-voies { grid-template-columns: minmax(0, 1fr); }

  /*  Moins de place en largeur : la languette redescend a une echelle qui
      tient dans le cadre sans l'ecraser.

      ET ELLE SE CENTRE. Sur grand ecran, la coller a droite mime sa place
      reelle, contre le bord de la fenetre. Une fois la figure passee sur
      une seule colonne, ce bord n'existe plus : la languette se retrouvait
      seule a droite d'une bande vide de trois cents pixels. Centree, elle
      redevient le sujet de son bloc. */
  .ia-ecran {
    --ia-echelle: 1.5;
    justify-content: center;
  }

  /* Le texte passe SOUS l'image et non au-dessus : la capture reste le
     premier objet de chaque bloc, comme sur grand ecran a droite. */
  .ia-capture {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-6);
  }

  .ia-capture--inverse .ia-capture-texte { order: 0; }
}

/* ---------- Telephone ---------------------------------------------------- */

@media (max-width: 768px) {
  .ia-questions { grid-template-columns: minmax(0, 1fr); }

  .ia-echange { margin-top: var(--space-10); }

  .ia-hero {
    padding: var(--space-16) var(--gutter-page) var(--gutter-section);
  }

  .ia-croisements { gap: var(--space-6); }

  .ia-images .ia-capture + .ia-capture { margin-top: var(--space-16); }

  .ia-cta { padding: var(--space-10) var(--space-6); }
}