/* Graphicient — feuille commune à toutes les pages.
   1. Jetons de marque   2. Animations de fond & de héros
   3. Réinitialisations   4. En-tête mobile   5. Adaptation responsive (hooks posés par responsive.js) */

/* ---------- 1. Jetons ---------- */
:root {
  --font-heading: Sora, system-ui, sans-serif;
  --font-body: Figtree, system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
  --color-bg: #ffffff;
  --color-text: #0f1722;
  --color-divider: #dde3ea;
  --color-accent: #06748E;
  --color-accent-700: #055c71;
  --color-accent-900: #04475a;
  --color-signal: #e8ff5a;
}

/* ---------- 2. Animations ---------- */
@keyframes bgFloat { 0% { transform: translate3d(0,0,0) scale(1.06); } 33% { transform: translate3d(-2.4%,-1.4%,0) scale(1.06); } 66% { transform: translate3d(1.6%,-2.6%,0) scale(1.06); } 100% { transform: translate3d(0,0,0) scale(1.06); } }
@keyframes gr-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes bgDriftA { 0% { transform: translate(0,0); } 50% { transform: translate(22px,-30px); } 100% { transform: translate(0,0); } }
@keyframes bgDriftB { 0% { transform: translate(0,0); } 50% { transform: translate(-28px,18px); } 100% { transform: translate(0,0); } }
@keyframes bgDriftC { 0% { transform: translate(0,0); } 50% { transform: translate(16px,26px); } 100% { transform: translate(0,0); } }
@keyframes bgDriftD { 0% { transform: translate(0,0); } 50% { transform: translate(-18px,-22px); } 100% { transform: translate(0,0); } }
@keyframes bgHalo { 0% { transform: scale(1); opacity: 0.5; } 70%, 100% { transform: scale(3.4); opacity: 0; } }
.bg-graph { animation: bgFloat 24s ease-in-out infinite; transform-origin: 50% 50%; }
.cl-a { animation: bgDriftA 19s ease-in-out infinite; }
.cl-b { animation: bgDriftB 27s ease-in-out infinite; }
.cl-c { animation: bgDriftC 23s ease-in-out infinite; }
.cl-d { animation: bgDriftD 31s ease-in-out infinite; }
.bg-halo { transform-box: fill-box; transform-origin: center; animation: bgHalo 5s ease-out infinite; }

@keyframes heroWord { from { opacity: 0; filter: blur(12px); } to { opacity: 1; filter: blur(0); } }
@keyframes heroUnderline { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.hero-line { display: block; }
.hero-word { display: inline-block; opacity: 0; animation: heroWord 900ms cubic-bezier(0.22, 0.8, 0.24, 1) both; }
.hero-word-2 { animation-delay: 220ms; }
.hero-word-3 { animation-delay: 460ms; }
.hero-mark { position: relative; display: inline-block; }
.hero-mark::after { content: ""; position: absolute; left: -0.04em; right: -0.04em; bottom: 0.06em; height: 0.16em; background: var(--color-signal); z-index: -1; transform-origin: left center; animation: heroUnderline 900ms cubic-bezier(0.22, 0.8, 0.24, 1) 1500ms both; }

@media (prefers-reduced-motion: reduce) {
  .bg-graph, .bg-halo, .cl-a, .cl-b, .cl-c, .cl-d { animation: none; }
  .hero-word, .hero-mark::after { animation: none; opacity: 1; }
}

/* ---------- 2 bis. Transitions de navigation ----------
   Effectif en export « lite » (les feuilles arrivent en <link> des le HTML).
   En mode bundle autonome la transition est simplement sautee ; le rejet
   « Transition was skipped » est absorbe par site-nav.js. */
/* @view-transition vit uniquement dans static/assets/site.css (export lite) :
   en bundle autonome la feuille arrive apres decompression, la transition est
   sautee et le rejet « Transition was skipped » ne peut plus etre absorbe. */

/* Pas d'animation de chargement visible entre les pages */
html.sc-dc-streaming .sc-placeholder::before,
html.sc-dc-streaming .sc-interp.sc-missing::before { animation: none !important; background: none !important; }
.sc-placeholder { border-color: transparent !important; background: transparent !important; }

/* ---------- 3. Base ---------- */
body { margin: 0; background: var(--color-bg); color: var(--color-text); font-family: var(--font-body); text-wrap: pretty; }
a { color: var(--color-accent-700); text-decoration: none; }
a:hover { color: var(--color-accent-900); }
.btn, .input, input, textarea, select, button.btn { border-radius: 10px; }
/* overflow-x sur html seulement : le poser aussi sur body crée une seconde barre de défilement */
html { overflow-x: hidden; }
body { overflow-x: clip; }
img, svg, video, canvas { max-width: 100%; }
[style*="width: 1000px"] { width: auto !important; max-width: 100% !important; }

/* ---------- 4. En-têtes ----------
   Sélecteurs préfixés gr- et spécificité élevée : un thème WordPress ne peut pas les écraser. */
header.gr-m-header { display: none; }
nav.gr-nav { display: flex !important; align-items: center; min-height: 72px; }
div.gr-desk-nav { display: block; position: relative; z-index: 20; }
@media (min-width: 1025px) {
  div.gr-desk-nav { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; z-index: 60 !important; background: var(--color-bg); }
  body { padding-top: 72px; }
}
@media (max-width: 1024px) {
  div.gr-desk-nav { display: none !important; }
  header.gr-m-header { display: flex !important; }
  body { padding-top: 60px; }
}

/* ---------- 5. Adaptation responsive ---------- */
@media (max-width: 1024px) {
  .r-noindent { padding-left: 0 !important; padding-right: 0 !important; }
  .r-nudge { margin-left: 0 !important; }
  .r-bl { border-left: 0 !important; padding-left: 0 !important; }
  .r-br { border-right: 0 !important; padding-right: 0 !important; }
  .r-container { padding-left: 24px !important; padding-right: 24px !important; box-sizing: border-box !important; }
  .r-bleed { padding-left: 24px !important; padding-right: 24px !important; padding-inline: 24px !important; }
  .r-fullbleed { padding-left: calc(50vw - 50%) !important; padding-right: calc(50vw - 50%) !important; }

  .r-collapse { grid-template-columns: minmax(0, 1fr) !important; }
  [data-fixed-box] { display: none !important; }
  [data-rgap] { gap: 24px !important; }
  [data-rpt] { padding-top: 44px !important; }
  [data-rpb] { padding-bottom: 44px !important; }
  .r-autoheight { height: auto !important; }

  [data-rfs="xxl"] { font-size: 38px !important; letter-spacing: -0.03em !important; }
  [data-rfs="xl"] { font-size: 30px !important; }
  [data-rfs="l"] { font-size: 25px !important; }
  [data-rfs="m"] { font-size: 21px !important; }

  .btn, button, input, select, textarea { min-height: 44px; }
  table { display: block; overflow-x: auto; width: 100% !important; }

  .r-stat-banner { flex-direction: column !important; text-align: center !important; padding: 36px 24px !important; gap: 24px !important; }
  .r-stat-circle { width: 108px !important; height: 108px !important; }
  .r-stat-num { font-size: 32px !important; }
  .r-stat-body { align-items: center !important; }
  .r-stat-body h3, .r-stat-body p { max-width: none !important; }
}

@media (max-width: 1024px) {
  /* Maquettes d'interface : illisibles en mobile, on les retire du flux */
  .r-mock { display: none !important; }
  /* Encarts image en attente de visuel : masqués sur mobile */
  image-slot, figure:has(image-slot) { display: none !important; }
}

@media (max-width: 560px) {
  .r-container, .r-bleed { padding-left: 20px !important; padding-right: 20px !important; padding-inline: 20px !important; }
  [data-rfs="xxl"] { font-size: 34px !important; }
  [data-rfs="xl"] { font-size: 27px !important; }
  [data-rfs="l"] { font-size: 23px !important; }
  [data-rfs="m"] { font-size: 20px !important; }
}


/* Page courante dans la navigation (aria-current posé par site-menu.js).
   Le design system ne stylait que .nav a[aria-current="page"] ; on couvre aussi
   les panneaux deroulants, l'accordeon mobile et le bouton de rubrique. */
/* Aucun marquage visuel de la page courante dans les menus (demande client) :
   seul le survol reagit. aria-current="page" reste pose pour les lecteurs d'ecran. */
/* Aucune marque de « rubrique courante » : le header garde exactement
   sa police, sa graisse et sa couleur sur toutes les pages. */


/* Survol / focus dans la navigation — en CSS reel (les style-hover inline du
   design component ne survivent pas a l'export statique). */
/* Barre du haut : aucun surlignage au survol (demande client). Seul le focus
   clavier reste visible, pour l'accessibilite. */
[data-gr-panel] a:hover,
[data-gr-panel] a:focus-visible,
[data-gr-mobile-panel] a:hover,
[data-gr-mobile-panel] a:focus-visible {
  background: color-mix(in srgb, var(--color-accent) 10%, transparent) !important;
}
[data-gr-acc]:hover,
[data-gr-acc]:focus-visible {
  color: var(--color-accent-700) !important;
  background: color-mix(in srgb, var(--color-accent) 8%, transparent) !important;
}
.gr-nav [data-gr-menu]:focus-visible,
[data-gr-panel] a:focus-visible,
[data-gr-mobile-panel] a:focus-visible,
[data-gr-acc]:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* ---------- 6. Bannière cookies (analytics.js) — superposée, sans décalage de mise en page ---------- */
.gr-consent { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000; padding: 16px; box-sizing: border-box; pointer-events: none; }
.gr-consent[hidden] { display: none; }
.gr-consent__box { pointer-events: auto; max-width: 1240px; margin: 0 auto; box-sizing: border-box; background: var(--color-bg); color: var(--color-text); border: 1px solid var(--color-divider); box-shadow: 0 12px 32px rgba(15,23,34,0.14); padding: 20px 24px; display: flex; align-items: center; gap: 24px; font-family: var(--font-body); }
.gr-consent__copy { flex: 1 1 auto; min-width: 0; }
.gr-consent__title { margin: 0 0 4px; font-family: var(--font-heading); font-weight: 600; font-size: 15px; }
.gr-consent__text { margin: 0; font-size: 14px; line-height: 1.5; color: color-mix(in srgb, var(--color-text) 80%, transparent); }
.gr-consent__link { color: var(--color-accent-700); text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
.gr-consent__link:hover { color: var(--color-accent-900); }
.gr-consent__actions { display: flex; gap: 12px; flex: 0 0 auto; }
.gr-consent__btn { min-width: 128px; min-height: 44px; padding: 10px 20px; font: 600 14px/1 var(--font-body); letter-spacing: 0.02em; cursor: pointer; background: var(--color-bg); color: var(--color-accent-700); border: 1.5px solid var(--color-accent); border-radius: 10px; }
.gr-consent__btn:hover { background: color-mix(in srgb, var(--color-accent) 10%, var(--color-bg)); color: var(--color-accent-900); }
.gr-consent__btn:active { background: color-mix(in srgb, var(--color-accent) 18%, var(--color-bg)); }
.gr-consent__btn:focus-visible, .gr-cookies-link:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.gr-cookies-link { background: none; border: 0; padding: 0; margin: 0; font: inherit; color: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; min-height: 0 !important; }
.gr-cookies-link:hover { color: var(--color-accent-900); }
@media (max-width: 760px) {
  .gr-consent { padding: 0; }
  .gr-consent__box { flex-direction: column; align-items: stretch; gap: 14px; padding: 16px 20px calc(16px + env(safe-area-inset-bottom)); border: 0; border-top: 1px solid var(--color-divider); box-shadow: 0 -8px 24px rgba(15,23,34,0.10); }
  .gr-consent__title { font-size: 15px; margin-bottom: 2px; }
  .gr-consent__text { font-size: 13px; line-height: 1.45; }
  .gr-consent__actions { gap: 10px; }
  .gr-consent__btn { flex: 1 1 0; min-width: 0; padding: 10px 12px; }
}