/* ==========================================================================
   Polices auto-hébergées — Space Grotesk et Inter Tight (licence OFL 1.1).
   Servies depuis le domaine : aucune requête vers les serveurs de Google, donc
   aucune adresse IP de visiteur transmise à un tiers pour afficher une page.
   Fichiers variables : un seul par famille et par sous-ensemble, déclaré sur la
   plage 300-500. Les `unicode-range` sont conservés, latin-ext n'est donc
   téléchargé que si un glyphe l'exige — jamais avec le contenu actuel.
   ========================================================================== */

@font-face{
  font-family:'Inter Tight';
  font-style:normal;
  font-weight:300 500;
  font-display:swap;
  src:url("../fonts/inter-tight-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:'Inter Tight';
  font-style:normal;
  font-weight:300 500;
  font-display:swap;
  src:url("../fonts/inter-tight-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:'Space Grotesk';
  font-style:normal;
  font-weight:300 500;
  font-display:swap;
  src:url("../fonts/space-grotesk-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:'Space Grotesk';
  font-style:normal;
  font-weight:300 500;
  font-display:swap;
  src:url("../fonts/space-grotesk-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;
}

/* ==========================================================================
   LVNO — socle commun aux trois directions
   Charte dérivée du logo : #62B1A1 (hsl 168 34% 54%)
   ========================================================================== */

:root{
  /* --- Marque, extraite du logo --------------------------------------- */
  --brand:      #62B1A1;   /* couleur exacte du logo */
  --brand-600:  #4E9C8C;
  --brand-700:  #3A8172;
  --brand-800:  #2A6156;   /* seuil AA pour du texte sur fond clair */
  --brand-900:  #16382F;

  /* --- Encres et papiers (neutres refroidis vers la teinte 168) ------- */
  --ink:        #0A1F1C;
  --ink-2:      #102B26;
  --ink-3:      #1A3B34;
  --text:       #16241F;
  --muted:      #5F6F6A;
  --paper:      #F7F9F8;
  --tint-50:    #F2F8F6;
  --tint-100:   #E3F0EC;
  --tint-200:   #C7E1DA;
  --line:       #DDE6E3;

  /* --- Rôles : le contraste impose le sens de lecture ----------------- */
  --on-brand:   var(--ink);          /* le blanc sur le vert logo = 2,5:1 */
  --accent-txt: var(--brand-800);    /* vert lisible sur fond clair */
  --on-dark:    rgba(255,255,255,.74);

  --wrap: 1200px;
  --gutter: clamp(20px, 5vw, 52px);
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion:no-preference){ html{ scroll-behavior:smooth; } }

body{
  margin:0;
  background:var(--paper);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  font-synthesis-weight:none;
}

img,svg{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ margin:0; font-weight:inherit; }
p{ margin:0 0 1.1em; }
ul,ol{ margin:0; padding:0; list-style:none; }
button{ font:inherit; color:inherit; }

::selection{ background:var(--brand); color:var(--ink); }

.container{
  width:100%; max-width:var(--wrap);
  margin-inline:auto; padding-inline:var(--gutter);
}

.skip-link{ position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--ink); color:#fff; padding:12px 18px; }
.skip-link:focus{ left:12px; top:12px; }

:focus-visible{ outline:2px solid var(--brand); outline-offset:3px; border-radius:2px; }

.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;
}

/* ============ Le sigle, recoloré par masque ==============================
   Le PNG du logo sert de masque alpha : la forme prend donc `currentColor`
   et suit la couleur du contexte (vert sur clair, blanc sur sombre).
   ======================================================================== */

.mark{ display:none; aspect-ratio:781/900; }

/* Sans prise en charge des masques, mieux vaut ne rien afficher qu'un aplat. */
@supports ((-webkit-mask-image:url("../img/logo-mask.png")) or (mask-image:url("../img/logo-mask.png"))){
  .mark{
    display:block;
    background-color:currentColor;
    -webkit-mask:url("../img/logo-mask.png") center/contain no-repeat;
            mask:url("../img/logo-mask.png") center/contain no-repeat;
  }
}
.mark-sm{ width:22px; }
.mark-md{ width:34px; }

/* ============ Apparition au défilement ================================= */

.reveal{
  opacity:0; transform:translateY(20px);
  transition:opacity .85s var(--ease-out), transform .85s var(--ease-out);
  transition-delay:calc(var(--d,0) * 90ms);
}
.reveal.is-visible{ opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .reveal{ opacity:1; transform:none; }
}

/* ============ Champ leurre anti-spam =================================== */
.gotcha{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }