@font-face {
      font-family: 'Inter Tight';
      src: url('../fonts/InterTight-variable.woff2') format('woff2-variations');
      font-weight: 100 900;
      font-style: normal;
      font-display: swap;
    }

    :root {
      --navy: #12124E;
      --violet: #685EF8;
      --ease-out: cubic-bezier(0.25, 1, 0.5, 1);
    }

    * { margin: 0; padding: 0; box-sizing: border-box; }

    /* l'attribut hidden doit gagner contre les display posés en classe */
    [hidden] { display: none !important; }

    html { scrollbar-gutter: stable; }

    body {
      font-family: 'Inter Tight', sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      overflow-x: hidden;
      background: #FDFCFE;
      color: #12124E;
    }

    .container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 2.5rem;
    }

    /* ---------- Nav de sous-page ---------- */
    .subnav {
      display: flex;
      align-items: center;
      justify-content: space-between;
      max-width: 1200px;
      margin: 0 auto;
      padding: 1.6rem 2.5rem;
    }

    .brand {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      text-decoration: none;
    }

      /* Logotype horizontal (rapport ~6:1) : on le cale sur sa hauteur et on
         laisse la largeur suivre. Le cadre carré d'origine l'écraserait.
         Le filtre de teinte qui corrigeait l'ancien PNG est retiré : il
         décalerait les bleus de la charte. */
    .brand img {
      width: auto;
      height: 38px;
      max-width: 100%;
      object-fit: contain;
    }

    .nav-links {
      display: flex;
      list-style: none;
      gap: 2.6rem;
    }

    .nav-links a {
      text-decoration: none;
      font-size: 0.9375rem;
      font-weight: 400;
      color: #16165A;
    }

    .btn-contact {
      display: flex;
      align-items: center;
      gap: 0.6rem;
      padding: 0.8rem 1.4rem;
      border-radius: 999px;
      border: 1px solid rgba(18, 18, 78, 0.16);
      text-decoration: none;
      font-size: 0.9375rem;
      color: #101052;
      transition: background 0.3s ease, transform 0.3s var(--ease-out),
                  border-color 0.3s ease;
    }

    .btn-contact:hover {
      background: rgba(18, 18, 78, 0.05);
      border-color: rgba(18, 18, 78, 0.3);
      transform: translateY(-2px);
    }

    /* ---------- Tokens ---------- */
    .s-label {
      display: flex;
      align-items: center;
      gap: 0.6rem;
      font-size: 0.8125rem;
      font-weight: 600;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: #685EF8;
    }

    .s-label::before {
      content: '';
      width: 8px;
      height: 8px;
      border-radius: 2px;
      background: #685EF8;
    }

    .accent-v {
      background: linear-gradient(90deg, #685EF8 0%, #9BA0FA 100%);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      -webkit-text-fill-color: transparent;
      padding-right: 0.1em;
      margin-right: -0.1em;
    }

    /* ---------- En-tête ---------- */
    .page-head { padding: 5.5rem 0 0; }

    .page-head h1 {
      margin-top: 1.5rem;
      font-size: clamp(2.8rem, 5.4vw, 5rem);
      font-weight: 600;
      letter-spacing: -0.028em;
      line-height: 1.06;
      max-width: 1200px;
    }

    .page-head .lead {
      margin-top: 1.5rem;
      font-size: 1.125rem;
      line-height: 1.65;
      color: #4E4C74;
      max-width: 600px;
    }

    /* ---------- Ce que vous recevez : 3 colonnes, chiffres fantômes ---------- */
    .deliv {
      margin-top: 4.5rem;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 3rem;
    }

    .deliv-item .ghost {
      font-size: 4.5rem;
      font-weight: 200;
      line-height: 1;
      letter-spacing: -0.03em;
      color: transparent;
      -webkit-text-stroke: 1px rgba(104, 94, 248, 0.5);
    }

    .deliv-item h3 {
      margin-top: 1rem;
      font-size: 1.125rem;
      font-weight: 600;
      letter-spacing: -0.01em;
    }

    .deliv-item p {
      margin-top: 0.45rem;
      font-size: 0.95rem;
      line-height: 1.6;
      color: #55547A;
    }

    /* ---------- Le questionnaire : un protocole numéroté ---------- */
    .quest { padding: 5rem 0 6.5rem; }

    .q-section {
      padding: 3rem 0;
      max-width: 980px;
    }

    .q-body h2 {
      font-size: 1.5rem;
      font-weight: 600;
      letter-spacing: -0.015em;
    }

    .q-fields {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 2rem 2.5rem;
    }

    .q-fields .full { grid-column: 1 / -1; }

    /* champs sans boîtes, hérités de la page contact */
    .field {
      position: relative;
      padding-top: 1.5rem;
    }

    .field label {
      position: absolute;
      left: 0;
      top: 1.8rem;
      font-size: 1.125rem;
      color: #9C9BB5;
      pointer-events: none;
      transition: top 0.3s var(--ease-out), font-size 0.3s var(--ease-out),
                  color 0.3s ease;
    }

    .field.is-active label {
      top: 0;
      font-size: 0.8125rem;
      font-weight: 600;
      color: #8B8AA8;
    }

    .field:focus-within label { color: #685EF8; }

    .field label small { font-weight: 400; font-size: 0.85em; }

    .field input,
    .field textarea {
      display: block;
      width: 100%;
      font-family: inherit;
      font-size: 1.125rem;
      color: #12124E;
      padding: 0.5rem 0 0.7rem;
      border: none;
      border-bottom: 1px solid rgba(18, 18, 78, 0.18);
      border-radius: 0;
      background: transparent;
    }

    .field textarea { resize: none; min-height: 5.6rem; }

    /* ==================================================================
       Téléphone : indicatif et numéro sur une seule ligne d'écriture.

       Le trait passe du champ de saisie au conteneur : sans quoi il ne
       soulignerait que le numéro, et l'indicatif flotterait au-dessus du
       vide. Le sélecteur est dépouillé de son habillage système (bordure,
       flèche) pour se fondre dans la ligne ; on lui redonne un chevron en
       fond, dessiné à la même graisse que celui de la liste « objet ».
       ================================================================== */
    .field-phone .phone-combo {
      display: flex;
      align-items: baseline;
      gap: 0.6rem;
      border-bottom: 1px solid rgba(18, 18, 78, 0.18);
    }

    .field-phone .phone-combo input {
      border-bottom: 0;
      flex: 1 1 auto;
      min-width: 0;
    }

    .field-phone .dial {
      flex: 0 0 auto;
      font-family: inherit;
      font-size: 1.25rem;
      line-height: inherit;
      color: #12124E;
      padding: 0.55rem 1.35rem 0.75rem 0;
      border: 0;
      border-radius: 0;
      background-color: transparent;
      background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2312124E' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 0.15rem center;
      background-size: 14px 14px;
      -webkit-appearance: none;
      appearance: none;
      cursor: pointer;
    }

    .field-phone .dial:focus { outline: none; }

    /* La liste déroulante système hérite de la page ; l'indicatif y reste
       lisible sur les navigateurs qui l'habillent eux-mêmes. */
    .field-phone .dial option { color: #12124E; }

    .field input:focus,
    .field textarea:focus { outline: none; }

    .field .line {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 2px;
      background: linear-gradient(90deg, #685EF8 0%, #9BA0FA 100%);
      transform: scaleX(0);
      transform-origin: right center;
      transition: transform 0.4s var(--ease-out);
    }

    .field:focus-within .line,
    .field.dd-open .line {
      transform: scaleX(1);
      transform-origin: left center;
    }

    /* dropdown maison, version ligne */
    .dd { position: relative; }

    .dd-native { display: none; }

    .dd-btn {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.8rem;
      font-family: inherit;
      font-size: 1.125rem;
      color: #12124E;
      text-align: left;
      padding: 0.5rem 0 0.7rem;
      border: none;
      border-bottom: 1px solid rgba(18, 18, 78, 0.18);
      background: transparent;
      cursor: pointer;
    }

    .dd-btn:focus { outline: none; }

    .dd-btn svg {
      flex: none;
      width: 17px;
      height: 17px;
      color: #685EF8;
      transition: transform 0.25s var(--ease-out);
    }

    .dd.open .dd-btn svg { transform: rotate(180deg); }

    .dd-list {
      position: absolute;
      top: calc(100% + 8px);
      left: 0;
      right: 0;
      z-index: 30;
      list-style: none;
      background: #FFFFFF;
      border: 1px solid rgba(18, 18, 78, 0.12);
      border-radius: 14px;
      box-shadow: 0 18px 44px rgba(18, 18, 78, 0.14);
      padding: 0.4rem;
      opacity: 0;
      transform: translateY(-6px);
      pointer-events: none;
      transition: opacity 0.22s ease, transform 0.25s var(--ease-out);
    }

    .dd.open .dd-list {
      opacity: 1;
      transform: translateY(0);
      pointer-events: auto;
    }

    .dd-list li {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.8rem;
      padding: 0.65rem 0.9rem;
      border-radius: 9px;
      font-size: 1rem;
      color: #12124E;
      cursor: pointer;
      transition: background 0.15s ease;
    }

    .dd-list li:hover { background: rgba(104, 94, 248, 0.08); }

    .dd-list li.is-selected {
      color: #685EF8;
      font-weight: 600;
    }

    .dd-list li.is-selected::after {
      content: '';
      flex: none;
      width: 14px;
      height: 14px;
      background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23685EF8' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 13 5 5L20 7'/%3E%3C/svg%3E") center / contain no-repeat;
    }

    /* ---------- Envoi ---------- */
    .q-actions {
      max-width: 980px;
      padding-top: 1.5rem;
      display: flex;
      align-items: center;
      gap: 1.4rem;
      flex-wrap: wrap;
    }

    .form-note {
      font-size: 0.875rem;
      color: #8B8AA8;
      max-width: 340px;
    }

    .form-note.is-error { color: #B00040; }

    .btn-primary {
      display: inline-flex;
      align-items: center;
      gap: 0.6rem;
      padding: 1rem 1.75rem;
      border-radius: 999px;
      border: none;
      cursor: pointer;
      font-family: inherit;
      font-size: 1rem;
      font-weight: 600;
      text-decoration: none;
      background: linear-gradient(90deg, #685EF8 0%, #9BA0FA 100%);
      color: #FFFFFF;
      box-shadow: 0 12px 30px rgba(104, 94, 248, 0.35);
      transition: transform 0.3s var(--ease-out), box-shadow 0.3s ease;
    }

    .btn-primary:hover {
      transform: translateY(-2px);
      box-shadow: 0 18px 40px rgba(104, 94, 248, 0.45);
    }

    .btn-primary svg { transition: transform 0.3s var(--ease-out); }
    .btn-primary:hover svg { transform: translate(2px, -2px); }

    .btn-primary[disabled] {
      opacity: 0.65;
      cursor: default;
      transform: none !important;
    }

    /* ---------- L'état de succès ---------- */
    .form-success {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 0.4rem;
      padding: 2rem 0 0;
    }

    .form-success svg { width: 56px; height: 56px; margin-bottom: 1rem; }

    .form-success h2 {
      font-size: 2rem;
      font-weight: 600;
      letter-spacing: -0.02em;
    }

    .form-success p {
      font-size: 1.0625rem;
      line-height: 1.6;
      color: #55547A;
      max-width: 460px;
    }

    .form-success .back-home {
      margin-top: 1.4rem;
      color: #685EF8;
      font-weight: 600;
      text-decoration: none;
      position: relative;
    }

    /* ---------- Footer ---------- */
    .footer { padding: 2rem 0 2.5rem; }

    .f-top {
      display: flex;
      justify-content: space-between;
      gap: 4rem;
      flex-wrap: wrap;
    }

    .f-brand-row {
      display: flex;
      align-items: center;
      gap: 0.7rem;
    }

    .f-brand-row img {
      width: auto;
      height: 32px;
      max-width: 100%;
      object-fit: contain;
    }

    .f-brand p {
      margin-top: 1rem;
      font-size: 0.9375rem;
      line-height: 1.6;
      color: #55547A;
      max-width: 300px;
    }

    .f-cols {
      display: flex;
      gap: 4.5rem;
      flex-wrap: wrap;
    }

    .f-cols h2 {
      font-size: 0.8125rem;
      font-weight: 600;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: #8B8AA8;
    }

    .f-cols div { display: flex; flex-direction: column; align-items: flex-start; }

    .f-cols a {
      display: inline-block;
      margin-top: 0.8rem;
      font-size: 0.9375rem;
      color: #3A3968;
      text-decoration: none;
      transition: color 0.3s ease;
    }

    .f-cols a:hover { color: #685EF8; }

    .f-bottom {
      margin-top: 3.5rem;
      padding-top: 1.5rem;
      border-top: 1px solid rgba(18, 18, 78, 0.10);
      font-size: 0.8125rem;
      color: #8B8AA8;
    }

    /* ---------- Feedback d'interaction ---------- */
    .nav-links a,
    .f-cols a,
    .form-success .back-home {
      position: relative;
    }

    .nav-links a::after,
    .f-cols a::after,
    .form-success .back-home::after {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      bottom: -4px;
      height: 1px;
      background: currentColor;
      transform: scaleX(0);
      transform-origin: right center;
      transition: transform 0.35s var(--ease-out);
    }

    .nav-links a:hover::after,
    .f-cols a:hover::after,
    .form-success .back-home:hover::after {
      transform: scaleX(1);
      transform-origin: left center;
    }

    /* ---------- Révélations ---------- */
    
    /* ---------- reCAPTCHA ----------
       Le widget Google est une iframe : ni sa taille ni ses couleurs ne sont
       stylables. On se contente de le caler sur la grille et de le mettre à
       l'échelle sur les petits écrans, où ses 302 px fixes débordent. */
    .captcha-field {
      grid-column: 1 / -1;
      margin-top: 0.4rem;
    }

    .captcha-field .g-recaptcha {
      transform-origin: 0 0;
    }

    
    /* ---------- Élévation d'une liste déroulante ouverte ----------
       La liste sort du bas de son champ. Tant qu'un ancêtre porte un transform
       — ce que fait l'animation de révélation — le z-index de la liste reste
       confiné à cet ancêtre, et l'élément suivant la recouvre : la liste
       s'affiche mais le clic tombe à côté. On élève donc l'ancêtre et le champ
       le temps de l'ouverture. */
    .dd-host {
      position: relative;
      z-index: 40;
    }

    .field.dd-open {
      z-index: 41;
    }

@media (max-width: 420px) {
      .captcha-field .g-recaptcha {
        transform: scale(0.85);
      }
    }

    .captcha-error {
      margin-top: 0.9rem;
      font-size: 0.9375rem;
      line-height: 1.5;
      color: #B25E00;
      background: #FFF6E8;
      border: 1px solid rgba(229, 151, 0, 0.45);
      border-radius: 10px;
      padding: 0.7rem 0.9rem;
    }

    .captcha-error[hidden] { display: none; }

    /* Un champ invalide se signale sur sa ligne, sans bordure rapportée :
       le design n'encadre aucun champ. */
    .field input:user-invalid,
    .field textarea:user-invalid {
      border-color: transparent;
    }

    .field:has(input:user-invalid) .line,
    .field:has(textarea:user-invalid) .line {
      background: #E59700;
    }

    .field:has(input:user-invalid) label,
    .field:has(textarea:user-invalid) label {
      color: #B25E00;
    }

@media (prefers-reduced-motion: no-preference) {
      html.rv-on [data-rv="rise"] {
        transform: translateY(var(--rv-d, 30px));
        transition: transform 1s var(--ease-out);
        transition-delay: var(--rv-delay, 0s);
      }

      html.rv-on [data-rv="rise"].rv-in { transform: translateY(0); }

      html.rv-on [data-rv="mask"] { overflow: hidden; }

      html.rv-on [data-rv="mask"] .rv-inner {
        display: block;
        transform: translateY(112%);
        transition: transform 1.05s var(--ease-out);
        transition-delay: var(--rv-delay, 0s);
      }

      html.rv-on [data-rv="mask"].rv-in .rv-inner { transform: translateY(0); }
    }

    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { animation: none !important; }
    }

    @media (max-width: 1000px) {
      .nav-links { display: none; }
      .deliv { grid-template-columns: 1fr; gap: 2rem; }
    }

    @media (max-width: 640px) {
      .q-fields { grid-template-columns: 1fr; }
      .q-fields .field { grid-column: 1 / -1; }
    }

    /* ---------- Bouton du menu (mobile) ----------
       Déclaré hors media query et masqué par défaut : il n'apparaît que sous
       le point de bascule, mais son style reste au même endroit que celui du
       panneau qu'il commande. */
    .nav-toggle {
      position: relative;
      z-index: 70;
      width: 44px;
      height: 44px;
      margin-left: auto;
      align-items: center;
      justify-content: center;
      border: 0;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.55);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
    }

    .subnav .nav-toggle { background: rgba(18, 18, 78, 0.06); }

    .nav-toggle-bars {
      position: relative;
      display: block;
      width: 18px;
      height: 12px;
    }

    .nav-toggle-bars span {
      position: absolute;
      left: 0;
      width: 100%;
      height: 2px;
      border-radius: 2px;
      background: #12124E;
      transition: transform 0.32s var(--ease-out), opacity 0.2s linear;
    }

    .nav-toggle-bars span:first-child { top: 0; }
    .nav-toggle-bars span:last-child  { bottom: 0; }

    /* Les deux barres se rejoignent puis se croisent : la croix se lit
       comme la même matière que le burger, pas comme un autre bouton. */
    .nav-toggle[aria-expanded="true"] .nav-toggle-bars span:first-child {
      transform: translateY(5px) rotate(45deg);
    }

    .nav-toggle[aria-expanded="true"] .nav-toggle-bars span:last-child {
      transform: translateY(-5px) rotate(-45deg);
    }

    /* Le défilement de la page est gelé pendant que le panneau couvre
       l'écran, sinon le fond glisse derrière lui. */
    body.nav-open { overflow: hidden; }

    .screen-reader-text {
      position: absolute;
      width: 1px;
      height: 1px;
      margin: -1px;
      padding: 0;
      overflow: hidden;
      clip: rect(0 0 0 0);
      clip-path: inset(50%);
      white-space: nowrap;
      border: 0;
    }

    /* ---------- La barre des pages intérieures en mobile ---------- */
    @media (max-width: 1200px) {
      /* Mêmes marges latérales que la page d'accueil. */
      .container { padding: 0 1.25rem; }

      /* ---------- Entrée de page, en flux ----------
         5,5 rem de retrait sous une barre déjà haute repoussaient le titre
         sous le pli sur un téléphone. Le formulaire suit la même règle. */
      .page-head { padding-top: 1.5rem; }
      .page-head h1 { margin-top: 1.5rem; }
      /* Les trois livrables se rapprochent du chapeau, et le formulaire
         qui suit n'ajoute plus de retrait : la marge basse des livrables
         suffit à l'annoncer. */
      .deliv { margin-top: 2.5rem; }
      .quest { padding-top: 0; padding-bottom: 3.5rem; }


      /* Le pied de page se détache davantage du contenu : il ferme la page. */
      .footer { padding: 5rem 0 2.5rem; }

      /* Deux colonnes de liens : la rangée flex du bureau se replie sinon en
         une seule colonne, et le pied de page s'allonge démesurément. */
      .f-cols {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 2rem 1.25rem;
      }


      .subnav {
        gap: 1rem;
        padding-left: 1.25rem;
        padding-right: 1.25rem;
      }


      .subnav .brand img { height: 28px; }

      .subnav .nav-toggle { display: inline-flex; }

      .subnav .nav-panel {
        position: fixed;
        inset: 0;
        z-index: 60;
        display: flex;
        flex-direction: column;
        /* Le menu commence sous la barre, pas au milieu de l'écran.
           Centré, il laissait une plage vide sous le logotype — d'autant
           plus grande que le téléphone est haut — et le premier lien se
           trouvait loin du pouce comme du regard.

           Le retrait supérieur dégage la barre, qui reste visible par-dessus
           le panneau : 110 px pour le bouton du menu, plus une respiration.
           Le défilement reste ouvert pour les écrans les plus courts. */
        justify-content: flex-start;
        overflow-y: auto;
        gap: 2rem;
        padding: 8.75rem 1.75rem 2.5rem;
        background: rgba(253, 252, 254, 0.97);
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
        transform: translateY(-100%);
        visibility: hidden;
        transition: transform 0.42s var(--ease-out), visibility 0s linear 0.42s;
      }

      .subnav .nav-panel.is-open {
        transform: translateY(0);
        visibility: visible;
        transition: transform 0.42s var(--ease-out), visibility 0s;
      }

      .subnav .nav-links {
        /* Une règle plus haute masque la liste sous 1000 px, pour la barre du
           haut. Dans le panneau, elle doit reparaître : c'est le menu. */
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.35rem;
      }

      .subnav .nav-links a {
        display: block;
        padding: 0.6rem 0;
        font-size: 1.5rem;
        font-weight: 600;
      }

      .subnav .nav-links a::after { display: none; }

      .subnav .btn-contact {
        align-self: flex-start;
        padding: 0.95rem 1.5rem;
        font-size: 1rem;
      }
    }

    /* Masqué au-dessus du point de bascule. Exprimé en min-width plutôt qu'en
       « display:none » par défaut : la règle d'affichage mobile est écrite
       ailleurs dans le fichier, et un simple défaut se ferait écraser selon
       l'ordre des blocs. */
    @media (min-width: 1201px) {
      .nav-toggle { display: none; }

      /* Le panneau n'existe que sur mobile. Au-dessus du point de bascule, il
         doit disparaître de la mise en page sans emporter son contenu :
         « display: contents » le retire de l'arbre de rendu et laisse la liste
         et le bouton redevenir enfants directs de la barre.

         Sans cela, ce conteneur s'intercale comme un bloc dans la rangée flex :
         les liens passent au-dessus du bouton, qui s'étire sur toute la
         largeur restante. */
      .nav-panel { display: contents; }
    }

    /* ---------- Sélecteur de langue ----------
       Même gélule que sur l'accueil, transposée à la barre claire des pages
       intérieures : un liseré remplace le verre dépoli, qui n'aurait rien à
       flouter sur un fond uni. */
    .lang-switch {
      display: flex;
      align-items: center;
      gap: 2px;
      padding: 3px;
      border-radius: 999px;
      border: 1px solid rgba(18, 18, 78, 0.14);
    }

    .lang-link {
      padding: 0.42rem 0.85rem;
      border-radius: 999px;
      text-decoration: none;
      font-size: 0.875rem;
      font-weight: 500;
      letter-spacing: 0.04em;
      color: rgba(16, 16, 82, 0.6);
      transition: background 0.3s ease, color 0.3s ease;
    }

    .lang-link:hover { color: #101052; }

    .lang-link.is-current {
      background: rgba(18, 18, 78, 0.07);
      color: #101052;
    }

    @media (max-width: 1200px) {
      .subnav .lang-link { padding: 0.4rem 0.7rem; font-size: 0.8125rem; }
    }
    @media (max-width: 1200px) {
      /* ---------- Barre mobile ----------
         Le sélecteur se colle au bouton du menu : la marge automatique pousse
         la paire à droite et laisse le logotype seul à gauche, ce que
         « space-between » aurait réparti à trois. */
      .subnav .lang-switch {
        margin-left: auto;
        align-self: center;
      }

      /* Le panneau couvre l'écran entier, barre comprise : le logotype et le
         bouton disparaissaient dessous, laissant un vide en haut. On les
         élève au-dessus de lui plutôt que d'en écrire une seconde copie dans
         le panneau — un seul logotype, donc rien à désynchroniser, et il ne
         bouge pas d'un pixel à l'ouverture. */
      .subnav .brand,
      .subnav .lang-switch,
      .subnav .nav-toggle {
        position: relative;
        z-index: 61;
      }

    }

    /* ---------- Ordre de la barre ----------
       Le sélecteur de langue est écrit hors du panneau, pour rester visible
       dans la barre sur mobile. Au-dessus du point de bascule, le panneau
       s'effaçant en « display: contents », ses enfants et lui deviennent
       frères dans la même rangée : on rétablit alors l'ordre voulu par la
       maquette, que l'ordre du balisage ne donne plus. */
    @media (min-width: 1201px) {
      .subnav .brand       { order: 1; }
      .subnav .nav-links   { order: 2; }
      .subnav .lang-switch { order: 3; }
      .subnav .btn-contact { order: 4; }
    }

    /* ---------- Retour en haut ----------
       Posé en bas à droite, au-dessus de tout sauf du panneau de navigation :
       le menu mobile couvre l'écran, un bouton qui flotterait par-dessus
       n'aurait aucun sens.

       Visible par défaut, masqué par la classe que pose le JavaScript tant
       qu'on n'a pas défilé. L'inverse aurait rendu le lien inatteignable sans
       script. « visibility » plutôt qu'une simple opacité : elle retire aussi
       le lien de l'ordre de tabulation, un lien invisible mais focalisable
       étant un piège au clavier. */
    .to-top {
      position: fixed;
      right: clamp(1rem, 2.2vw, 2rem);
      bottom: clamp(1rem, 2.2vw, 2rem);
      z-index: 50;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 46px;
      height: 46px;
      border-radius: 999px;
      /* Le bouton doit tenir aussi bien sur le paysage de la hero que sur le
         blanc du pied de page. Un verre dépoli suffisait au premier et
         disparaissait sur le second : on ajoute un liseré franc, une ombre
         portée plus marquée, et on passe la flèche au violet de la charte —
         trois repères qui subsistent quel que soit le fond. */
      border: 1px solid rgba(110, 96, 242, 0.28);
      background: rgba(255, 255, 255, 0.9);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      box-shadow: 0 8px 24px rgba(50, 40, 110, 0.22);
      color: #6E60F2;
      text-decoration: none;
      transition: opacity 0.32s var(--ease-out), transform 0.32s var(--ease-out),
                  visibility 0s, background 0.3s ease;
    }

    .to-top svg { width: 18px; height: 18px; }

    .to-top:hover {
      background: #FFFFFF;
      border-color: rgba(110, 96, 242, 0.55);
      transform: translateY(-2px);
    }

    .to-top.is-idle {
      opacity: 0;
      visibility: hidden;
      transform: translateY(10px);
      transition: opacity 0.32s var(--ease-out), transform 0.32s var(--ease-out),
                  visibility 0s linear 0.32s;
    }

    /* Le menu mobile couvre l'écran : le bouton n'a plus rien à surmonter. */
    body.nav-open .to-top {
      opacity: 0;
      visibility: hidden;
    }