/* Shared reusable components: buttons, cards, icon tiles, badges, mockup/terminal window. */

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  border:none;
  cursor:pointer;
  font-family:inherit;
  font-weight:600;
  border-radius:var(--r-lg);
  text-decoration:none;
}
.btn-primary{
  background:var(--orange-a11y);
  color:#fff;
}
.btn-primary:hover{ background:var(--orange-a11y-hover); }
.btn-secondary{
  background:#fff;
  color:var(--navy);
  border:1px solid var(--border-5);
}
.btn-secondary:hover{ border-color:var(--navy); }
.btn-text{
  background:none;
  border:none;
  cursor:pointer;
  font-family:inherit;
  font-weight:600;
  color:var(--navy);
  border-bottom:2px solid var(--orange);
  padding-bottom:4px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  text-decoration:none;
}

/* ---------- generic card ---------- */
.card{
  background:#fff;
  border:1px solid var(--border-2);
  border-radius:var(--r-4xl);
}
.card h3{ margin:0 0 9px; }

/* ---------- icon tile ---------- */
.icon-tile{
  width:46px;
  height:46px;
  border-radius:var(--r-xl);
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:18px;
  flex:none;
}
.icon-tile--a{ background:var(--orange-soft-bg); color:var(--orange); }
.icon-tile--b{ background:#E7F1FF; color:var(--blue-deep); }
.icon-tile--green{ background:var(--green-bg); color:var(--green); }

/* Vignettes teintées : la carte entière reprend la couleur de son icône (pêche/bleu/vert). */
.automations__card:has(.icon-tile--a),
.differentiators__card:has(.icon-tile--a){ background:var(--orange-soft-bg); border-color:var(--orange-soft-border); }
.automations__card:has(.icon-tile--b),
.differentiators__card:has(.icon-tile--b){ background:#E7F1FF; border-color:#C7E1FF; }
.automations__card:has(.icon-tile--green),
.differentiators__card:has(.icon-tile--green){ background:var(--green-bg); border-color:var(--green-border); }

/* ---------- badge pill ---------- */
.badge-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:12.5px;
  font-weight:600;
  padding:6px 13px;
  border-radius:20px;
}
.badge-pill--green{ background:var(--green-bg); color:var(--green); }
.badge-pill--orange{ background:var(--orange-soft-bg); color:var(--navy); }

/* ---------- check list item ---------- */
.check-item{
  display:flex;
  align-items:flex-start;
  gap:8px;
  font-size:13.5px;
  line-height:1.4;
}
.check-item__mark{ flex:none; }

/* ---------- terminal / mockup window ---------- */
.mockup{
  border-radius:var(--r-4xl);
  overflow:hidden;
}
.mockup--navy{
  background:var(--navy-panel);
  border:1px solid var(--navy-panel-border);
}
.mockup__titlebar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:13px 16px;
  border-bottom:1px solid var(--navy-panel-border);
}
.mockup__dots{
  display:flex;
  align-items:center;
  gap:7px;
  flex:none;
}
.mockup__dots span{
  width:10px;
  height:10px;
  border-radius:50%;
  display:block;
}
.mockup__dots span:nth-child(1){ background:var(--dot-red); }
.mockup__dots span:nth-child(2){ background:var(--dot-yellow); }
.mockup__dots span:nth-child(3){ background:var(--dot-green); }
.mockup__filename{
  font-family:var(--font-mono);
  font-size:12px;
  color:var(--muted-on-navy-3);
  flex:1;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  margin:0 12px;
}
.mockup__live{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-family:var(--font-mono);
  font-size:10.5px;
  color:var(--green-bright);
  flex:none;
}
.mockup__live-dot{
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--green-bright);
  animation:ebblink 1.4s ease-in-out infinite;
}

/* ---------- left-aligned page hero (Solutions, Réalisations — matches EB Automatisation V2.dc.html) ---------- */
.hero-left{
  max-width:1200px;
  margin:0 auto;
  padding:84px 40px 50px;
}
.hero-left__eyebrow{ margin-bottom:18px; }
.hero-left h1{ max-width:820px; margin:0 0 20px; font-size:52px; line-height:1.06; }
.hero-left p{ max-width:660px; font-size:19px; line-height:1.6; color:var(--text-2); margin:0; }
@media (max-width:640px){
  .hero-left{ padding:48px 20px 30px; text-align:center; }
  .hero-left h1{ font-size:32px; line-height:1.14; margin-left:auto; margin-right:auto; }
  .hero-left p{ margin-left:auto; margin-right:auto; }
}

/* ---------- CTA final navy à motif de points (Solutions, Réalisations, À propos) ---------- */
.cta-dotted{
  background-color:#15305C;
  background-image:var(--navy-gradient);
  border-radius:22px;
  padding:54px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:40px;
  flex-wrap:wrap;
}
.cta-dotted__text{ max-width:640px; }
.cta-dotted h2{ font-size:32px; line-height:1.15; letter-spacing:-.02em; color:#fff; margin:0 0 10px; }
.cta-dotted p{ font-size:16px; line-height:1.55; color:var(--muted-on-navy); margin:0; }
.cta-dotted .btn-primary{ font-size:16.5px; padding:18px 32px; white-space:nowrap; box-shadow:0 16px 36px -14px rgba(221,122,51,.85); }
@media (max-width:640px){
  .cta-dotted{ padding:28px; flex-direction:column; text-align:center; }
  .cta-dotted__text{ max-width:none; }
  .cta-dotted .btn-primary{ width:100%; justify-content:center; }
}

/* ---------- tool chip (bandeaux d'outils : Accueil, Solutions, Réalisations, À propos, piliers) ---------- */
.tool-chip-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; }
.tool-chip-grid--home{ max-width:960px; margin:0 auto; }
.tool-chip{
  display:flex; align-items:center; gap:12px;
  font-family:var(--font-heading); font-weight:700; font-size:14.5px; color:var(--navy);
  background:#fff; border:1px solid var(--border-3); padding:12px 15px; border-radius:11px;
  overflow:hidden;
}
/* le libellé est un noeud de texte brut, flanqué de l'icône et parfois du
   chevron (éléments) : en display:flex, un noeud de texte devient son propre
   item flex anonyme avec un min-width:auto implicite — il ne peut alors pas
   rétrécir sous sa largeur intrinsèque (ex. "Google Workspace" sur 2 colonnes
   mobile) et déborde de la puce, non contenu. On l'enveloppe dans un span
   qui peut, lui, rétrécir et passer à la ligne normalement. */
.tool-chip__label{ flex:1; min-width:0; }
.tool-chip__abbr{
  width:34px; height:34px; flex:none; border-radius:9px;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-heading); font-weight:700; font-size:13px; letter-spacing:-.01em;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14), 0 3px 8px -3px rgba(12,30,60,.35);
}
/* logo officiel (SVG local) : fond neutre clair plutôt que la couleur de marque en aplat,
   plus lisible pour une marque complexe qu'un simple monogramme */
.tool-chip__abbr--logo{
  background:#fff; border:1px solid var(--border-3); box-shadow:none;
}
.tool-chip__abbr--logo img{ width:20px; height:20px; display:block; }
/* variante cliquable : vraie balise <a>, quand une page interne existe réellement */
.tool-chip--link{
  color:var(--navy); text-decoration:none; cursor:pointer;
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.tool-chip--link:hover{ transform:translateY(-2px); box-shadow:var(--shadow-card); border-color:var(--orange-soft-border-2); }
.tool-chip--link:focus-visible{ outline:2px solid var(--orange); outline-offset:2px; }
.tool-chip__chevron{
  margin-left:auto; flex:none; color:var(--muted); opacity:.5;
  transition:transform .16s ease, opacity .16s ease;
}
.tool-chip--link:hover .tool-chip__chevron,
.tool-chip--link:focus-visible .tool-chip__chevron{ transform:translateX(2px); opacity:1; }

/* ---------- différenciation (Accueil, Solutions, À propos) ---------- */
.differentiators__intro{ max-width:920px; margin:0 auto 34px; text-align:center; }
.differentiators__intro h2{ margin:0 0 14px; }
.differentiators__intro p{ font-size:17px; line-height:1.64; color:var(--text-2); text-align:left; }
.differentiators__card{ padding:30px; display:flex; flex-direction:column; height:100%; }

/* ---------- CTA final (Accueil, Solutions, Réalisations, À propos) ---------- */
.final-cta-section{ padding-bottom:96px; }
.final-cta-card{
  background:#fff; border:1px solid var(--border-2); border-radius:var(--r-7xl);
  padding:56px; text-align:center; box-shadow:var(--shadow-cta-final);
}
.final-cta-card__desc{ font-size:17px; color:var(--text-3); margin:0 0 30px; }
.final-cta-card__cta{ padding:16px 30px; font-size:16px; box-shadow:var(--shadow-btn-orange-lg); }

/* ---------- back to top ---------- */
.back-to-top{
  position:fixed;
  right:24px;
  bottom:24px;
  width:46px;
  height:46px;
  border-radius:50%;
  background:var(--navy-gradient);
  color:#fff;
  border:none;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:19px;
  line-height:1;
  cursor:pointer;
  box-shadow:0 10px 24px -10px rgba(12,30,60,.5);
  opacity:0;
  visibility:hidden;
  transform:translateY(10px);
  transition:opacity .2s ease, transform .2s ease, box-shadow .2s ease, visibility 0s .2s;
  z-index:999;
}
.back-to-top.is-visible{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
  transition:opacity .2s ease, transform .2s ease, box-shadow .2s ease, visibility 0s;
}
.back-to-top:hover{ box-shadow:0 14px 30px -10px rgba(12,30,60,.65); }

@media (max-width:640px){
  .final-cta-card__cta{ width:100%; justify-content:center; }
  .tool-chip-grid{ grid-template-columns:repeat(2,1fr); }
  .back-to-top{ right:16px; bottom:16px; width:42px; height:42px; font-size:17px; }
}