/* Six Degrés — Design System
   Tokens de marque (Ardoise & Corail doux).
   Source de vérité des couleurs, typographies et rythme du site. */
/* Polices auto-hébergées (Google Fonts, licence SIL Open Font License 1.1).
   Servies depuis /fonts : plus d'aller-retour vers fonts.googleapis.com au
   chargement, et plus d'adresse IP transmise à Google. Seuls les sous-ensembles
   latin et latin-ext sont embarqués, et Instrument Serif n'est présent qu'en
   italique, la seule forme employée sur le site. */
@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/anton-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/anton-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/fonts/hanken-grotesk-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/fonts/hanken-grotesk-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/instrument-serif-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/instrument-serif-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Couleurs de marque */
  --cobalt: #3F6182;      /* Bleu acier — couleur primaire */
  --cobalt-br: #4E769B;   /* Bleu acier clair */
  --navy: #35485D;        /* Ardoise bleutée — charnière */
  --ink: #2A3542;         /* Ardoise — fond le plus sombre */
  --cream: #E9FDFC;       /* Cyan pâle — papier / texte clair */
  --sand: #9EC8DB;        /* Bleu clair — neutre froid */
  --acc: #EE7154;         /* Corail doux — accent */
  --accfg: #1D252E;       /* Texte sur accent — assombri vs --ink : à 4,23:1 sur
                             --acc, le bouton de RDV et les chips actifs (12,5-
                             14px, 700) passaient sous le seuil AA de 4,5:1.
                             Assombrir ce token plutôt que --ink : il n'est
                             utilisé que sur fond --acc, jamais ailleurs, donc
                             sans effet de bord — et l'écart au rendu est
                             imperceptible (5,25:1 désormais). */

  /* Typographies */
  --sans: "Hanken Grotesk", system-ui, sans-serif; /* courant */
  --serif: "Instrument Serif", Georgia, serif;     /* voix / accents éditoriaux */
  --disp: "Anton", sans-serif;                     /* display / grands titres */

  /* Rythme & mouvement */
  --mx: clamp(24px, 5.2vw, 116px); /* marge de page */
  --e: cubic-bezier(.2, .8, .2, 1); /* easing signature */
}

/* Anton n'existe qu'en 400 : neutralise le faux-gras synthétique des navigateurs sur les titres */
h1, h2, h3, h4, h5, h6 { font-weight: 400; }

a { color: var(--cobalt); text-decoration: none; }
a:hover { color: var(--acc); }
::selection { background: var(--acc); color: var(--accfg); }

/* Curseur custom : on masque le curseur natif là où la bague .cur est active
   (souris fine). Sur tactile, .cur est déjà masqué et le curseur natif reste. */
@media (hover: hover) and (pointer: fine) {
  * { cursor: none !important; }
}

/* ===== Footer global — « Trois zones » (Six Degrés) ===== */
.sdf{background:var(--ink);color:var(--cream);border-top:2px solid var(--acc);padding:44px var(--mx) 30px;font-family:var(--sans);font-size:16px;line-height:1.5}
.sdf a{color:inherit;text-decoration:none;transition:color .25s,opacity .25s,border-color .25s}
.sdf-top{display:flex;align-items:center;justify-content:space-between;gap:40px;flex-wrap:wrap}
.sdf-lock{display:flex;align-items:center;gap:12px}
.sdf-lock img{height:26px;width:auto;filter:brightness(0) invert(1)}
.sdf-lock b{font-family:var(--disp);font-weight:400;font-size:20px;letter-spacing:.13em;text-transform:uppercase}
.sdf-base{font-family:var(--serif);font-style:italic;font-size:15px;color:rgba(233,253,252,.66);margin-top:9px}
.sdf-nav{display:flex;flex-wrap:wrap;gap:26px;font-size:14.5px}
.sdf-nav a{opacity:.82}
.sdf-nav a:hover{opacity:1;color:var(--acc)}
.sdf-rgt{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.sdf-mail{font-size:14.5px;opacity:.85;border-bottom:1px solid rgba(233,253,252,.32);padding-bottom:3px}
.sdf-mail:hover{opacity:1;color:var(--acc);border-color:var(--acc)}
.sdf-ln{display:inline-flex;align-items:center;gap:8px;font-size:14.5px;opacity:.85;border-bottom:1px solid rgba(233,253,252,.32);padding-bottom:3px}
.sdf-ln svg{width:1.15em;height:1.15em}
.sdf-ln .ext{width:.9em;height:.9em}
.sdf-ln:hover{opacity:1;color:var(--acc);border-color:var(--acc)}
.sdf-rule{height:1px;background:rgba(233,253,252,.16);margin:28px 0 20px}
.sdf-legal{display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px;font-size:12.5px;color:rgba(233,253,252,.5)}
.sdf-legal .r{display:flex;gap:24px;flex-wrap:wrap}
.sdf-legal a:hover{color:var(--acc)}
@media(max-width:900px){.sdf-top{flex-direction:column;align-items:flex-start;gap:24px}}
@media(max-width:760px){.sdf{padding:36px var(--mx) 24px}.sdf-legal{flex-direction:column;gap:8px}}

/* ===== Couvertures d'articles — duotone + grain + mot-clé serif ===== */
.cov{position:relative;width:100%;height:100%;overflow:hidden;display:flex;align-items:center;justify-content:center;padding:26px;text-align:center;transition:transform .6s var(--e)}
.cov .kw{position:relative;z-index:2;font-family:var(--serif);font-style:italic;color:#E9FDFC;line-height:1.05;font-size:clamp(26px,3vw,42px);text-shadow:0 1px 26px rgba(0,0,0,.22);text-wrap:balance}
.cov .cgr{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.2;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.cov-rec{background:linear-gradient(135deg,#3F6182,#EE7154)}
.cov-eval{background:linear-gradient(140deg,#2A3542,#3F6182)}
.cov-coach{background:radial-gradient(120% 120% at 20% 10%,#4E769B,#2A3542)}
.cov-form{background:radial-gradient(120% 120% at 20% 10%,#9EC8DB,#35485D)}
.cov-tend{background:linear-gradient(135deg,#35485D,#EE7154)}

/* ===== Chrome fixe — crème sur les fonds bleus =====
   Le monogramme et le bouton Menu sont peints en mix-blend-mode:difference.
   Sur les bleus acier (cobalt, navy), l'inverse vire au beige jaune : on coupe
   alors le blend pour passer à une couleur plate. Les classes sont posées par
   public/nav-tint.js, qui lit la couleur réellement peinte derrière eux.

   Le corail d'origine ne passait pas le contraste WCAG AA sur ces deux fonds
   (2,2:1 sur cobalt, 3,2:1 sur navy — la cible est 4,5:1 pour du texte de
   cette taille), et faisait pire que le beige qu'il remplaçait sur cobalt
   (2,6:1). Le crème est déjà la couleur de texte du reste du site sur ces
   mêmes fonds (`.f-cobalt`, `.f-navy`) : 6,1:1 et 8,9:1, cohérent et conforme.
   Le monogramme n'a pas besoin d'un filtre dédié : il garde son silhouettage
   blanc par défaut (`filter:brightness(0) invert(1)`, posé par chaque page),
   assez proche du crème pour rester un seul aplat visuel avec le texte. */
body.nav-coral .brand{mix-blend-mode:normal}
body.nav-coral .brand b{color:var(--cream)}
body.menu-coral:not(.menu-open) .sdm-trig{mix-blend-mode:normal;color:var(--cream)}
body.menu-coral:not(.menu-open) .sdm-trig .bg i{background:var(--cream)}

/* Accessibilité — respect de « réduire les animations » (réglage système).
   Coupe les transitions, animations et défilements animés sur tout le site. */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .marq .track{transform:none !important}
  .par{transform:none !important}
}