/* EOCHE v2 : styles propres aux pages /agence-n8n/ et /automatisation-ia/ (doctrine « sur mesure », 2026-09-23).
   Charge apres eoche.v2.css. Classes prefixees n8n- ou ia-, ou limitees a .page-agence-n8n et .page-automatisation.
   Matiere : fonds clairs, cartes blanches a ombre douce, une scene noire pour la preuve. Seul decor anime : le monogramme.
   Tailles : cette feuille ne fixe plus la taille du texte courant ni celle des titres au telephone.
   L'echelle commune (eoche.v2.css) s'applique : H1 36 px, H2 32 px, H3 22 px, texte 17 px.
   Les seules tailles gardees ici valent a partir de 768 px, pour des titres propres a ces pages.
   Passe editoriale du 23/09/2026 : plus de texte replie au fil des sections (seul « Pour aller plus loin »
   reste, en fin de /automatisation-ia/), plus de comparatif en tableau ni d'encadre de reserves. */

/* ══════════════════════════════════════════════════════════════════
   BRIQUES DE LA PAGE
   ══════════════════════════════════════════════════════════════════ */
.n8n-texte { max-width: 60ch; margin-top: 18px; line-height: 1.65; color: #3F3F46; }
.scene .n8n-texte { color: #D4D4D8; }
.n8n-texte--fort { color: var(--texte-clair); font-weight: 600; }
.scene .n8n-texte--fort { color: #fff; }

/* Carte blanche en relief, la matiere de la charte d'origine */
.n8n-carte {
  border-radius: var(--r-l);
  background: #fff;
  border: 1px solid var(--ligne-claire);
  box-shadow: var(--ombre-claire);
}
.blanc .n8n-carte { box-shadow: 0 1px 2px rgba(9, 9, 11, 0.04), 0 22px 44px -26px rgba(9, 9, 11, 0.28); }

/* Deux colonnes : le titre et sa phrase a gauche, le contenu a droite */
.n8n-deux { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: start; gap: 40px clamp(40px, 6vw, 96px); }
.n8n-deux__tete .tete-section { margin-bottom: 0; }
.n8n-deux__corps { min-width: 0; }
.n8n-deux__corps .note-lien { margin-top: 18px; }

/* Titres de cartes propres a ces pages : au telephone, l'echelle commune (H3 22 px) s'applique.
   Sur tablette et ordinateur, jamais sous ces 22 px, 24 px au plus. */
@media (min-width: 768px) {
  .n8n-ligne__titre, .n8n-chaine__titre, .ia-tache__titre { font-size: clamp(22px, 1.8vw, 24px); }
}

/* ══════════════════════════════════════════════════════════════════
   PREMIERE VUE : le gabarit commun (fil, H1, une phrase, deux boutons, monogramme sur ordinateur)
   Les deux H1 sont longs : sur tablette et ordinateur, un cran sous le gabarit pour tenir en quatre lignes.
   ══════════════════════════════════════════════════════════════════ */
@media (min-width: 768px) {
  .n8n-heros .page-heros__titre { max-width: 19ch; font-size: clamp(38px, 4.4vw, 64px); line-height: 1.02; }
  .ia-heros .page-heros__titre { max-width: 18ch; font-size: clamp(38px, 4.6vw, 66px); line-height: 1.02; }
}

/* ══════════════════════════════════════════════════════════════════
   CE QUE NOUS BRANCHONS : une carte, quatre lignes
   ══════════════════════════════════════════════════════════════════ */
.n8n-carte.n8n-lignes { margin: 0; padding: 6px clamp(22px, 3vw, 36px); list-style: none; }
.n8n-ligne { display: grid; grid-template-columns: minmax(0, 0.42fr) minmax(0, 0.58fr); align-items: baseline; gap: 6px 28px; padding: 24px 0; }
.n8n-ligne + .n8n-ligne { border-top: 1px solid var(--ligne-claire); }
.n8n-ligne__titre { line-height: 1.25; letter-spacing: -0.015em; }
.n8n-ligne__texte { line-height: 1.6; color: #3F3F46; }

/* ══════════════════════════════════════════════════════════════════
   PREUVE MAISON : la chaine de notre machine de prospection, en cinq etapes
   Des etapes, donc des cercles pleins comme les etapes du site (plus de cercle au trait, troisieme style) :
   sur la scene noire, le meme disque plein en inverse, blanc casse a chiffre noir, sans contour.
   ══════════════════════════════════════════════════════════════════ */
.n8n-machine .tete-section h2 { max-width: 14ch; }
.n8n-chaine { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--ligne-sombre-2); }
.n8n-chaine__etape {
  display: grid;
  grid-template-columns: 40px minmax(0, 150px) minmax(0, 1fr);
  align-items: baseline;
  column-gap: 18px;
  padding: 22px 0;
  border-bottom: 1px solid var(--ligne-sombre-2);
}
.n8n-chaine__num {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #F4F4F5;
  color: var(--texte-clair);
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  transform: translateY(-2px);
  align-self: center;
}
.n8n-chaine__titre { line-height: 1.3; letter-spacing: -0.015em; color: #fff; }
.n8n-chaine__texte { line-height: 1.55; color: #D4D4D8; }

/* ══════════════════════════════════════════════════════════════════
   POURQUOI UNE AGENCE : ce que vous recevez
   ══════════════════════════════════════════════════════════════════ */
.n8n-livre { padding: clamp(24px, 3.4vw, 44px); }
.n8n-livre__liste { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 40px; margin: 26px 0 0; padding: 0; list-style: none; }
.n8n-livre__liste li { position: relative; padding-left: 26px; line-height: 1.55; color: #27272A; }
.n8n-livre__liste li::before { content: ""; position: absolute; left: 2px; top: 0.78em; width: 12px; height: 2px; background: var(--rouge-profond); }
.n8n-livre__pied {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px 32px;
  margin-top: 32px;
  padding-top: 26px;
  border-top: 1px solid var(--ligne-claire);
}
.n8n-livre__pied p { flex: 1 1 36ch; max-width: 60ch; font-weight: 600; line-height: 1.55; color: var(--texte-clair); }

/* ══════════════════════════════════════════════════════════════════
   COMMENT SE PASSE UN PROJET : le gabarit commun des etapes
   ══════════════════════════════════════════════════════════════════ */
.n8n-conditions { max-width: 64ch; margin-top: clamp(40px, 5vw, 60px); font-weight: 500; line-height: 1.65; color: #27272A; }

/* ══════════════════════════════════════════════════════════════════
   n8n OU MAKE : deux cartes, un verdict (noms en .titre-3, l'echelle commune)
   ══════════════════════════════════════════════════════════════════ */
.n8n-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.n8n-outil { display: grid; align-content: start; gap: 14px; padding: clamp(24px, 3.2vw, 40px); }
.n8n-outil__texte { line-height: 1.6; color: #3F3F46; }
.n8n-outil__verdict { margin-top: 6px; padding-top: 16px; border-top: 1px solid var(--ligne-claire); font-weight: 600; color: var(--texte-clair); }
.n8n-outil--choix { border-color: rgba(201, 39, 21, 0.35); }
.n8n-outil--choix .n8n-outil__verdict { color: var(--rouge-profond); }

/* ══════════════════════════════════════════════════════════════════
   CHEZ NOS CLIENTS : la liste commune des projets (.cas__liste, fond clair) et un avis
   ══════════════════════════════════════════════════════════════════ */
.n8n-avis { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; gap: 28px clamp(32px, 5vw, 72px); margin-top: clamp(40px, 5vw, 64px); }
.n8n-clients .avis-vedette { max-width: none; background: #fff; box-shadow: var(--ombre-claire); }
.n8n-avis__note { display: grid; justify-items: start; gap: 10px; }
.n8n-avis__note p { line-height: 1.6; color: #3F3F46; }
.n8n-avis__note p a { color: var(--texte-clair); font-weight: 600; text-decoration: underline; text-decoration-color: rgba(201, 39, 21, 0.5); text-underline-offset: 3px; }
.n8n-avis__note p a:hover { color: var(--rouge-profond); }

/* ══════════════════════════════════════════════════════════════════
   GUIDES, QUESTIONS
   ══════════════════════════════════════════════════════════════════ */
.n8n-guides { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.n8n-guides .guide__titre { font-size: 17.5px; }
.page-agence-n8n .faq__reponse { color: #3F3F46; }

/* ══════════════════════════════════════════════════════════════════
   TABLETTE ET TELEPHONE
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 1023px) {
  .n8n-deux { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .n8n-livre__liste { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .n8n-avis { grid-template-columns: minmax(0, 1fr); }
  .n8n-guides { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
}
@media (max-width: 767px) {
  .n8n-carte.n8n-lignes { padding: 4px 20px; }
  .n8n-ligne { grid-template-columns: minmax(0, 1fr); padding: 20px 0; }
  .n8n-chaine__etape { grid-template-columns: 34px minmax(0, 1fr); grid-template-areas: "num titre" ". texte"; column-gap: 16px; row-gap: 4px; padding: 18px 0; }
  .n8n-chaine__num { grid-area: num; width: 30px; height: 30px; font-size: 14px; }
  .n8n-chaine__titre { grid-area: titre; }
  .n8n-chaine__texte { grid-area: texte; }
  .n8n-livre__liste { grid-template-columns: minmax(0, 1fr); gap: 14px; margin-top: 20px; }
  .n8n-livre__pied .bouton { flex: 1 1 100%; white-space: normal; text-align: center; }
  .n8n-duo { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .n8n-guides { grid-template-columns: none; }
}

/* ══════════════════════════════════════════════════════════════════
   COMMUN AUX DEUX PAGES
   ══════════════════════════════════════════════════════════════════ */
/* Guides : cartes a couverture sur ordinateur, simple liste de titres sur tablette et telephone
   (la couverture reprend le titre en tout petit, illisible a cette taille) */
@media (max-width: 1023px) {
  .guides.guides--liste {
    display: grid;
    grid-auto-flow: row;
    grid-auto-columns: auto;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    margin: 0;
    padding: 0;
    overflow: visible;
    scroll-snap-type: none;
    border-top: 1px solid var(--ligne-claire);
  }
  .guides--liste .guide a { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px; min-height: 64px; padding: 14px 0; border: 0; border-bottom: 1px solid var(--ligne-claire); border-radius: 0; background: none; }
  .guides--liste .guide a:hover { transform: none; box-shadow: none; }
  .guides--liste .guide__image { display: none; }
  .guides--liste .guide__titre { padding: 0; font-size: 17px; }
  .guides--liste .guide__lire { display: none; }
  .guides--liste .guide a::after { content: "\2192"; font-size: 20px; color: var(--rouge); }
}

/* ══════════════════════════════════════════════════════════════════
   /automatisation-ia/
   ══════════════════════════════════════════════════════════════════ */
/* Six taches : une liste simple, un filet au-dessus de chaque tache */
.ia-taches { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 40px; margin: 0; padding: 0; list-style: none; }
.ia-tache { display: grid; align-content: start; gap: 8px; padding: 24px 0 20px; border-top: 1px solid rgba(9, 9, 11, 0.14); }
.ia-tache__titre { line-height: 1.25; letter-spacing: -0.015em; }
.ia-tache__texte { line-height: 1.6; color: #3F3F46; }
.ia-tache__lien { justify-self: start; color: var(--rouge-profond); }
.ia-taches__suite { max-width: 72ch; margin-top: 28px; }

/* n8n, Make ou Zapier : trois lignes dans une carte claire (noms en .titre-3, l'echelle commune) */
ul.ia-outils { margin: 0; padding: 4px clamp(22px, 3vw, 36px); list-style: none; border-radius: var(--r-l); background: var(--clair); }
.ia-outil { display: grid; grid-template-columns: minmax(110px, 180px) minmax(0, 1fr) auto; align-items: baseline; gap: 6px 32px; padding: 24px 0; }
.ia-outil + .ia-outil { border-top: 1px solid rgba(9, 9, 11, 0.1); }
.ia-outil__texte { max-width: 60ch; line-height: 1.6; color: #3F3F46; }
.ia-outil__lien { color: var(--rouge-profond); white-space: nowrap; }

/* Nos projets d'automatisation : la scene noire, liste commune (.cas__liste--scene).
   Sous la liste, une phrase sur l'assistant du site et deux liens texte. */
.ia-preuves__pied { max-width: 72ch; margin-top: clamp(28px, 3.6vw, 40px); }
.ia-preuves__pied p { line-height: 1.6; color: #D4D4D8; }
.ia-preuves__liens { display: flex; flex-wrap: wrap; gap: 4px 28px; margin-top: 6px; }
.ia-preuves__liens .lien-fleche { color: #fff; }

/* Trois facons de demarrer : un lien de devis par carte, un seul bouton sous la liste (comme les villes).
   Le lien ouvre le devis sur la bonne offre, 44 px au doigt. En bloc en ligne et non en flex :
   sur deux lignes, la fleche suit le dernier mot au lieu de partir au bord de la carte. */
.ia-offre__devis { display: inline-block; justify-self: start; padding-block: 10px; font-size: 17px; line-height: 1.4; color: var(--texte-clair); text-wrap: pretty; }
.ia-offre__devis::after { content: "\00a0\2192"; }
.ia-offres__action { margin-top: 28px; }
@media (min-width: 1024px) {
  /* Le texte de l'offre a gauche, le delai et le lien de devis l'un sous l'autre a droite */
  .ia-offres .offre { grid-template-columns: minmax(0, 1fr) minmax(300px, 0.62fr); row-gap: 4px; }
  .ia-offres .offre__texte { grid-row: 1 / span 2; }
  .ia-offres .offre__fait { grid-column: 2; align-self: end; }
  .ia-offres .ia-offre__devis { grid-column: 2; align-self: start; }
}
@media (max-width: 1023px) {
  .ia-offres .offre { grid-template-columns: minmax(0, 1fr); row-gap: 8px; }
  .ia-offres .offre__fait { margin-top: 4px; }
}

/* Pour aller plus loin : le seul texte replie de la page, sous les guides */
.page-automatisation #guides .detail { margin-top: 28px; }

/* Le test et le calcul : la suite de la scene des projets, sans feuille, avec le calculateur de l'accueil */
.ia-test { padding-top: 0; }
.ia-test .calcul { margin-top: 0; }

/* Agences : trois points dans une carte blanche */
.n8n-carte.ia-points { margin: 0; padding: 4px clamp(22px, 3vw, 36px); list-style: none; }
.ia-points li { padding: 22px 0; line-height: 1.6; color: #3F3F46; }
.ia-points li + li { border-top: 1px solid var(--ligne-claire); }
.ia-points b { font-weight: 650; color: var(--texte-clair); }
.ia-agences__action { margin-top: 24px; }
@media (min-width: 1024px) {
  .n8n-carte.ia-points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 30px 36px; }
  .ia-points li { padding: 0 32px; }
  .ia-points li:first-child { padding-left: 0; }
  .ia-points li:last-child { padding-right: 0; }
  .ia-points li + li { border-top: 0; border-left: 1px solid var(--ligne-claire); }
}

.page-automatisation .faq__reponse { color: #3F3F46; }

@media (max-width: 1023px) {
  .ia-taches { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ia-outil { grid-template-columns: minmax(90px, 140px) minmax(0, 1fr); }
  .ia-outil__lien { grid-column: 2; }
}
@media (max-width: 767px) {
  .ia-taches { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .ia-tache { padding: 20px 0; }
  ul.ia-outils { padding: 2px 20px; }
  .ia-outil { grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 20px 0; }
  .ia-outil__lien { grid-column: 1; }
  .n8n-carte.ia-points { padding: 2px 20px; }
  .ia-points li { padding: 18px 0; }
  .ia-agences__action .bouton { width: 100%; white-space: normal; text-align: center; }
}