/* ==========================================================================
   Agathos Widgets : styles partagés par tous les widgets
   Les couleurs reprennent la charte réglée dans Elementor (variables globales),
   avec une valeur de secours si un réglage manque.
   ========================================================================== */

:root {
  --ag-nuit: var(--e-global-color-agnuit, #070D1A);
  --ag-nuit-2: var(--e-global-color-agnuit2, #0C1629);
  --ag-carte: var(--e-global-color-secondary, #101D36);
  --ag-texte: var(--e-global-color-text, #EAF1FF);
  --ag-doux: var(--e-global-color-agdoux, #9DB0CF);
  --ag-bleu: var(--e-global-color-primary, #3D8BFF);
  --ag-bleu-pale: var(--e-global-color-agpale, #A9CBFF);
  --ag-accent: var(--e-global-color-agaccent, #8EC1FF);
  --ag-action: var(--e-global-color-accent, #2F6FDB);
  --ag-action-2: var(--e-global-color-agsurvol, #245BBE);
  --ag-trait: rgba(157, 176, 207, 0.16);
  --ag-police-titre: "Unbounded", system-ui, sans-serif;
  --ag-police-texte: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ag-police-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --ag-marge: clamp(16px, 4vw, 40px);
  --ag-rayon: 20px;
  --ag-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Les ancres (#qui, #contact…) arrivent sous l'en-tête fixe.
   Le défilement en douceur est fait par ancres.js : « scroll-behavior: smooth »
   en CSS faussait les mesures de GSAP (vide en remontant vers les réalisations).
   Elementor l'active dans son frontend.min.css : « :root » l'emporte sur son « html ». */
html { scroll-padding-top: 96px; }
:root { scroll-behavior: auto; }

/* Texte lu par les lecteurs d'écran, caché à l'écran */
.ag-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --- Sections ---------------------------------------------------------------- */

.ag-section {
  padding: clamp(64px, 9vw, 112px) 0;
  color: var(--ag-texte);
  font-family: var(--ag-police-texte);
  line-height: 1.6;
}
.ag-section--alt { background: var(--ag-nuit-2); }
.ag-largeur {
  width: 100%;
  max-width: calc(1240px + 2 * var(--ag-marge));
  margin: 0 auto;
  padding: 0 var(--ag-marge);
}

/* Petit libellé au-dessus d'un titre */
.ag-surtitre {
  margin: 0 0 24px;
  font-family: var(--ag-police-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ag-accent);
}

/* Titre de section : la partie entre <em> passe en bleu */
.ag-titre-section {
  margin: 0 0 clamp(36px, 5vw, 64px);
  max-width: 16ch;
  font-family: var(--ag-police-titre);
  font-size: clamp(32px, 5.2vw, 68px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.02;
  color: var(--ag-texte);
  text-wrap: balance;
}
.ag-titre-section em { font-style: normal; color: var(--ag-bleu); }

/* Apparition au défilement (script « agathos-apparition ») */
.ag-js [data-apparition] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s var(--ag-ease), transform 0.8s var(--ag-ease);
  transition-delay: calc(var(--ag-rang, 0) * 90ms);
}
.ag-js [data-apparition].is-visible { opacity: 1; transform: none; }
.elementor-editor-active [data-apparition] { opacity: 1; transform: none; }

/* --- Focus clavier ------------------------------------------------------------
   Le thème Hello met un contour noir, invisible sur le fond sombre (WCAG 2.4.7).
   Contour bleu clair partout, blanc sur le panneau bleu du contact. */

body :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--ag-accent);
  outline-offset: 3px;
}
body .ag-contact :is(a, button, summary, [tabindex]):focus-visible { outline-color: #fff; }

/* --- Boutons --------------------------------------------------------------- */

.ag-bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 54px;
  padding: 0 26px;
  border: 0;
  border-radius: 999px;
  font-family: var(--ag-police-texte);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.3s var(--ag-ease), color 0.3s var(--ag-ease), box-shadow 0.3s var(--ag-ease);
}
.ag-bouton i { font-size: 18px; transition: transform 0.35s var(--ag-ease); }
.ag-bouton:hover i { transform: translate(3px, -3px); }
.ag-bouton:active { scale: 0.97; }
.ag-bouton:focus-visible { outline: 2px solid var(--ag-accent); outline-offset: 3px; }

/* « a.ag-bouton.… » : plus précis que la couleur des liens de la charte Elementor
   (.elementor-kit-N a), qui sinon colorerait le texte des boutons en bleu. */
a.ag-bouton.ag-bouton--action,
a.ag-bouton.ag-bouton--action:visited { background: var(--ag-action); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18); }
a.ag-bouton.ag-bouton--action:hover,
a.ag-bouton.ag-bouton--action:focus { background: var(--ag-action-2); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 12px 30px -12px rgba(61, 139, 255, 0.7); }

a.ag-bouton.ag-bouton--fantome,
a.ag-bouton.ag-bouton--fantome:visited { background: transparent; color: var(--ag-texte); box-shadow: inset 0 0 0 1.5px rgba(157, 176, 207, 0.32); }
a.ag-bouton.ag-bouton--fantome:hover,
a.ag-bouton.ag-bouton--fantome:focus { background: transparent; color: var(--ag-bleu-pale); box-shadow: inset 0 0 0 1.5px var(--ag-bleu); }

@media (prefers-reduced-motion: reduce) {
  .ag-bouton, .ag-bouton i { transition: none; }
  .ag-js [data-apparition] { opacity: 1; transform: none; transition: none; }
}