:root{
      --black:#000000;
      --white:#FFFFFF;

      /* Gris fonctionnels autorisés par la charte */
      --g90:#1A1A1A;
      --g60:#666666;
      --g30:#B3B3B3;
      --g12:#E0E0E0;

      --max:1180px;

      /* Système de rayons cohérent */
      --radius-card:24px;
      --radius-control:16px;
      --radius-pill:999px;
    }

    *{box-sizing:border-box}

    /*
      LE LIEN D'EVITEMENT : hors de l'ecran, jusqu'a ce qu'on le demande.
      `clip` plutot que `display:none` — un element masque n'est pas focalisable, et un lien
      d'evitement qu'on ne peut pas atteindre au clavier ne sert a rien.
    */
    .skip-link{
      position:absolute;
      left:-9999px;
      top:0;
      z-index:100;
      background:var(--black);
      color:var(--white);
      padding:12px 18px;
      border-radius:0 0 var(--radius-control) 0;
      font-size:13px;
      font-weight:600;
    }

    .skip-link:focus{left:0}

    main:focus{outline:none}

    html{
      scroll-behavior:smooth;
      scroll-padding-top:92px;
      -webkit-text-size-adjust:100%;
    }

    body{
      margin:0;
      background:var(--white);
      color:var(--black);
      font-family:"Montserrat",Arial,Helvetica,sans-serif;
      -webkit-font-smoothing:antialiased;
    }

    a{color:inherit;text-decoration:none}
    button,input,textarea{font:inherit}

    a:focus-visible,
    button:focus-visible,
    input:focus-visible,
    textarea:focus-visible{
      outline:2px solid var(--black);
      outline-offset:3px;
    }

    .dark a:focus-visible,
    .dark button:focus-visible{
      outline-color:var(--white);
    }

    .container{
      width:min(calc(100% - 40px),var(--max));
      margin:auto;
    }

    /* Logo officiel RIO : jamais recomposé avec une police */
    .rio-logo{
      display:block;
      width:112px;
      height:auto;
      color:var(--black);
    }

    .rio-logo--white{color:var(--white)}

    /* Header */
    .site-header{
      position:sticky;
      top:0;
      z-index:20;
      background:var(--white);
      border-bottom:1px solid var(--g12);
    }

    .nav{
      min-height:76px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:24px;
    }

    .brand{
      display:inline-flex;
      align-items:center;
      min-height:48px;
    }

    .nav-links{
      display:flex;
      align-items:center;
      gap:28px;
      font-size:14px;
      font-weight:500;
    }

    .nav-links a:not(.nav-cta){
      color:var(--g90);
      border-bottom:1px solid transparent;
    }

    .nav-links a:not(.nav-cta):hover{
      color:var(--black);
      border-bottom-color:var(--black);
    }

    .nav-cta{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      min-height:44px;
      background:var(--black);
      color:var(--white);
      padding:0 18px;
      border:1px solid var(--black);
      border-radius:var(--radius-pill);
      font-weight:600;
    }

    .menu-btn{
      display:none;
      min-width:48px;
      min-height:48px;
      border:1px solid var(--black);
      border-radius:var(--radius-control);
      background:var(--white);
      color:var(--black);
      cursor:pointer;
      font-weight:600;
    }

    /* Hero */
    .hero{
      /* Le hero est un <section> : il annule la marge des sections ordinaires, sinon elle
         s'ajoute a celle de `.hero-grid` et fait deux fois le meme espace. */
      padding:0;
      display:grid;
      align-items:center;
      overflow:hidden;
      position:relative;
      background:var(--white);
    }

    .hero-grid{
      display:grid;
      grid-template-columns:1.08fr .92fr;
      gap:clamp(28px,3.4vw,48px);
      align-items:center;
      padding:clamp(28px,3.4vw,48px) 0 clamp(32px,4vw,56px);
    }

    .eyebrow{
      display:inline-flex;
      align-items:center;
      gap:10px;
      font-size:12px;
      font-weight:700;
      letter-spacing:.18em;
      text-transform:uppercase;
    }

    .eyebrow::before{
      content:"";
      width:32px;
      height:1px;
      background:var(--black);
    }

    h1{
      font-size:clamp(40px,5.4vw,76px);
      line-height:.94;
      letter-spacing:-.03em;
      font-weight:800;
      margin:18px 0 20px;
      max-width:790px;
    }

    .hero-copy{
      font-size:18px;
      line-height:1.55;
      color:var(--g60);
      max-width:620px;
      margin:0 0 26px;
      font-weight:300;
    }

    .actions{
      display:flex;
      gap:12px;
      flex-wrap:wrap;
    }

    .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      min-height:50px;
      padding:0 21px;
      border-radius:var(--radius-pill);
      font-weight:600;
      font-size:14px;
      border:1px solid var(--black);
      background:var(--white);
      color:var(--black);
      transition:background-color .18s ease,color .18s ease;
    }

    .btn-primary{
      background:var(--black);
      color:var(--white);
    }

    .btn-primary:hover{
      background:var(--white);
      color:var(--black);
    }

    .btn-secondary:hover{
      background:var(--black);
      color:var(--white);
    }

    /*
      Composition visuelle de l'ancien site conservée :
      grand motif + fiches flottantes.
      Le motif est un élément graphique dérivé du "o" RIO,
      pas une seconde recomposition du logotype.
    */
    .hero-visual{
      position:relative;
      width:100%;
      max-width:480px;
      margin-inline-start:auto;
      aspect-ratio:1 / 1;
      min-width:0;
    }

    .orb{
      position:absolute;
      width:76%;
      aspect-ratio:1;
      right:7%;
      top:9%;
      border:1px solid var(--black);
      border-radius:50%;
    }

    .orb::before{
      content:"";
      position:absolute;
      inset:16%;
      border:1px solid var(--g12);
      border-radius:50%;
    }

    .orb::after{
      content:"";
      position:absolute;
      inset:31%;
      border:1px solid var(--g12);
      border-radius:50%;
    }

    .brand-motif{
      position:absolute;
      width:50%;
      aspect-ratio:1;
      right:20%;
      top:25%;
      border:clamp(22px,3vw,38px) solid var(--black);
      border-left-color:transparent;
      border-radius:50%;
      transform:rotate(-22deg);
    }

    .floating{
      position:absolute;
      background:var(--white);
      border:1px solid var(--g12);
      border-radius:var(--radius-card);
      padding:17px 18px;
      font-size:13px;
      line-height:1.4;
      max-width:220px;
    }

    .floating strong{
      display:block;
      font-size:16px;
      margin-bottom:3px;
      font-weight:600;
      color:var(--black);
    }

    .f1{left:1%;top:15%}
    .f2{right:0;bottom:13%}
    .f3{left:12%;bottom:1%}

    .dot{
      width:8px;
      height:8px;
      border-radius:50%;
      background:var(--black);
      display:inline-block;
      margin-right:7px;
    }

    /* Bande */
    .strip{
      border-top:1px solid var(--g12);
      border-bottom:1px solid var(--g12);
    }

    .strip-inner{
      min-height:86px;
      display:grid;
      grid-template-columns:repeat(4,1fr);
      align-items:center;
      gap:20px;
      text-align:center;
      color:var(--g60);
      font-size:13px;
      font-weight:600;
      letter-spacing:.08em;
      text-transform:uppercase;
    }

    /* Sections */
    section{padding:clamp(52px,6vw,88px) 0}

    .section-head{
      display:grid;
      grid-template-columns:.8fr 1.2fr;
      gap:clamp(20px,2.6vw,48px);
      align-items:end;
      margin-bottom:clamp(26px,2.8vw,40px);
    }

    .kicker{
      font-size:12px;
      font-weight:700;
      letter-spacing:.18em;
      text-transform:uppercase;
      color:var(--g60);
    }

    h2{
      font-size:clamp(28px,3.3vw,46px);
      line-height:1.04;
      letter-spacing:-.03em;
      font-weight:700;
      margin:10px 0 0;
    }

    .section-intro{
      font-size:17px;
      line-height:1.6;
      color:var(--g60);
      max-width:680px;
      margin:0;
    }

    /* Cartes */
    .cards{
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:16px;
    }

    .card{
      border:1px solid var(--g12);
      border-radius:var(--radius-card);
      padding:clamp(22px,2vw,28px);
      display:flex;
      flex-direction:column;
      justify-content:space-between;
      background:var(--white);
      transition:border-color .18s ease;
    }

    .card:hover{border-color:var(--black)}

    .num{
      font-size:12px;
      letter-spacing:.15em;
      color:var(--g60);
      font-weight:600;
    }

    .card h3{
      font-size:22px;
      letter-spacing:-.02em;
      font-weight:600;
      margin:20px 0 10px;
    }

    .card p{
      color:var(--g60);
      line-height:1.6;
      margin:0;
    }

    /* Section sombre */
    .dark{
      background:var(--black);
      color:var(--white);
    }

    .dark .section-intro,
    .dark .kicker{
      color:var(--g30);
    }

    .dark-grid{
      display:grid;
      grid-template-columns:1.15fr .85fr;
      gap:16px;
      margin-top:clamp(26px,2.8vw,40px);
    }

    .dark-panel{
      border:1px solid var(--g60);
      border-radius:var(--radius-card);
      padding:clamp(24px,2.2vw,30px);
      background:var(--black);
    }

    .dark-panel h3{
      font-size:26px;
      letter-spacing:-.02em;
      font-weight:600;
      margin:0 0 16px;
    }

    .dark-panel p{
      color:var(--g30);
      line-height:1.6;
      margin:0;
    }

    .metric{
      display:flex;
      justify-content:space-between;
      gap:20px;
      padding:20px 0;
      border-bottom:1px solid var(--g60);
    }

    .metric:last-child{border-bottom:0}
    .metric span{color:var(--g30)}
    .metric strong{font-size:18px;font-weight:600}

    .flow{
      display:grid;
      grid-template-columns:repeat(4,1fr);
      gap:12px;
      margin-top:clamp(26px,2.8vw,40px);
    }

    .flow-step{
      border-top:1px solid var(--g60);
      padding-top:18px;
    }

    .flow-step b{
      display:block;
      margin-bottom:8px;
      font-weight:600;
    }

    .flow-step span{
      color:var(--g30);
      font-size:14px;
      line-height:1.5;
    }

    /* Capacités */
    .cap-grid{
      display:grid;
      grid-template-columns:repeat(2,1fr);
      gap:16px;
    }

    .cap{
      border:1px solid var(--g12);
      border-radius:var(--radius-card);
      background:var(--white);
      padding:clamp(22px,2vw,28px);
      padding-bottom:56px;
      position:relative;
      overflow:hidden;
    }

    .cap h3{
      font-size:24px;
      font-weight:600;
      margin:0 0 12px;
      letter-spacing:-.02em;
    }

    .cap p{
      color:var(--g60);
      max-width:520px;
      line-height:1.6;
    }

    .cap .mini{
      position:absolute;
      right:26px;
      bottom:22px;
      font-size:12px;
      color:var(--g60);
      font-weight:600;
      letter-spacing:.15em;
      text-transform:uppercase;
    }

    /* Sécurité / CTA */
    .statement{
      border:1px solid var(--g12);
      border-radius:var(--radius-card);
      padding:clamp(28px,3.2vw,52px);
      background:var(--white);
      display:grid;
      grid-template-columns:1.2fr .8fr;
      gap:clamp(24px,2.8vw,44px);
      align-items:center;
    }

    .statement h2{
      margin:0;
      max-width:800px;
    }

    .statement p{
      color:var(--g60);
      line-height:1.6;
      font-size:17px;
    }

    /* Contact */
    .contact-wrap{
      display:grid;
      grid-template-columns:.9fr 1.1fr;
      gap:clamp(28px,3.2vw,52px);
    }

    .contact-form{
      display:grid;
      gap:14px;
    }

    .field{
      display:grid;
      gap:7px;
    }

    label{
      font-size:12px;
      font-weight:600;
      letter-spacing:.08em;
      text-transform:uppercase;
    }

    input,
    textarea{
      width:100%;
      border:1px solid var(--g30);
      border-radius:var(--radius-control);
      padding:15px 16px;
      background:var(--white);
      color:var(--black);
    }

    input:focus,
    textarea:focus{
      border-color:var(--black);
      outline:2px solid var(--black);
      outline-offset:2px;
    }

    textarea{
      min-height:140px;
      resize:vertical;
    }

    .form-status{
      min-height:22px;
      margin:0;
      color:var(--g60);
      font-size:13px;
    }

    footer{
      border-top:1px solid var(--g12);
      padding:clamp(30px,3vw,44px) 0;
    }

    .footer-grid{
      display:flex;
      justify-content:space-between;
      align-items:flex-end;
      gap:30px;
    }

    .footer-meta{
      font-size:13px;
      color:var(--g60);
      line-height:1.7;
      text-align:right;
    }

    /* Mobile */
    @media (max-width:900px){
      .nav-links{
        display:none;
        position:absolute;
        top:76px;
        left:20px;
        right:20px;
        background:var(--white);
        border:1px solid var(--black);
        border-radius:var(--radius-card);
        padding:12px;
        flex-direction:column;
        align-items:stretch;
        gap:0;
      }

      .nav-links.is-open{display:flex}

      .nav-links a{
        padding:14px 12px;
      }

      .menu-btn{display:inline-flex;align-items:center;justify-content:center}

      .hero-grid,
      .section-head,
      .dark-grid,
      .contact-wrap,
      .statement{
        grid-template-columns:1fr;
      }

      .hero-visual{
        max-width:520px;
        margin-inline:auto;
      }

      .section-head{gap:24px}
      .strip-inner{grid-template-columns:1fr 1fr;padding:24px 0}
      .cards{grid-template-columns:1fr}
      .cap-grid{grid-template-columns:1fr}
      .flow{grid-template-columns:1fr 1fr}
      section{padding:clamp(44px,7vw,64px) 0}
      .statement{padding:28px}
    }

    @media (max-width:560px){
      .container{width:min(calc(100% - 28px),var(--max))}
      .nav{min-height:66px}
      .rio-logo{width:94px}
      .nav-links{top:66px;left:14px;right:14px}

      .hero-copy{font-size:17px}

      .hero-grid{padding:28px 0 40px}

      .hero-visual{
        aspect-ratio:1/1.07;
      }

      .orb{
        width:84%;
        right:-2%;
      }

      .brand-motif{
        width:54%;
        right:17%;
        top:26%;
      }

      .floating{
        font-size:11px;
        padding:13px;
        max-width:170px;
      }

      .floating strong{font-size:13px}
      .f1{left:0;top:7%}
      .f2{right:0;bottom:9%}
      .f3{display:none}

      .section-head{gap:24px}
      .flow{grid-template-columns:1fr}
      .statement{padding:30px 24px}
      .footer-grid{display:block}
      .footer-meta{text-align:left;margin-top:24px}
    }

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

/* ===== Extensions multipage RIO ===== */
.page-hero{padding:clamp(40px,4.6vw,68px) 0 clamp(34px,3.8vw,56px);border-bottom:1px solid var(--g12);background:var(--white)}
.page-hero .kicker{margin-bottom:14px}
.page-hero h1{font-size:clamp(32px,4.2vw,58px);line-height:1;margin:0 0 18px;max-width:900px}
.page-hero p{font-size:18px;line-height:1.6;color:var(--g60);max-width:820px;margin:0}
.page-hero .actions{margin-top:24px}
.breadcrumb{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--g60);margin-bottom:20px}
.breadcrumb a{border-bottom:1px solid var(--g30)}
.product-grid,.mode-grid,.expertise-grid,.info-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.product-card,.mode-card,.expertise-card,.info-card{border:1px solid var(--g12);border-radius:var(--radius-card);padding:clamp(22px,2.1vw,30px);background:var(--white);display:flex;flex-direction:column;justify-content:space-between;gap:14px}
.product-card:hover,.mode-card:hover,.expertise-card:hover,.info-card:hover{border-color:var(--black)}

    /*
      TREIZE EXPERTISES SUR DEUX COLONNES laissent la derniere seule sur sa ligne,
      et six lignes a parcourir. Trois colonnes les font tenir en cinq, et chaque
      carte porte trois lignes de texte : elle n a pas besoin d une demi-largeur.
      `auto-fit` retombe seul a deux, puis a une, quand la place manque.
    */
    .expertise-grid{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.product-card h3,.mode-card h3,.expertise-card h3,.info-card h3{font-size:24px;line-height:1.15;margin:0 0 10px;letter-spacing:-.02em}
.product-card p,.mode-card p,.expertise-card p,.info-card p{color:var(--g60);line-height:1.65;margin:0}
.meta{font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:var(--g60);font-weight:700;margin-bottom:36px}
.link-arrow{margin-top:4px;font-size:14px;font-weight:600;display:inline-flex;gap:8px;align-items:center}
.link-arrow::after{content:'→';font-size:18px}
.split{display:grid;grid-template-columns:1fr 1fr;gap:58px;align-items:start}
.check-list{display:grid;gap:12px;margin-top:22px}
.check-item{border-top:1px solid var(--g12);padding-top:14px;line-height:1.55;color:var(--g60)}
.check-item strong{color:var(--black);display:block;margin-bottom:4px}
.dark .check-item{border-top-color:var(--g60);color:var(--g30)}
.dark .check-item strong{color:var(--white)}
.mode-flow{display:grid;grid-template-columns:1fr auto 1fr;gap:20px;align-items:stretch;margin-top:clamp(24px,2.6vw,36px)}
.mode-node{border:1px solid var(--g12);border-radius:var(--radius-card);padding:clamp(22px,2vw,28px);background:var(--white)}
.mode-node h3{font-size:22px;margin:0 0 10px}
.mode-node p{color:var(--g60);line-height:1.6;margin:0}
.mode-join{font-size:28px;color:var(--g60)}
.pill-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.pill{border:1px solid var(--g30);border-radius:var(--radius-pill);padding:9px 13px;font-size:12px;font-weight:600}
.table-like{border-top:1px solid var(--g12);margin-top:36px}
.row{display:grid;grid-template-columns:.9fr 1.1fr;padding:18px 0;border-bottom:1px solid var(--g12);gap:26px}
.row strong{font-weight:600}.row span{color:var(--g60);line-height:1.55}
.contact-direct{margin-top:34px;font-size:18px;line-height:1.7}.contact-direct a{border-bottom:1px solid var(--black)}
.site-header .nav-links a[aria-current='page']{color:var(--black);border-bottom-color:var(--black);font-weight:600}
.footer-links{display:flex;gap:18px;flex-wrap:wrap;margin-top:12px;font-size:12px;color:var(--g60)}
.hero-compact{min-height:auto}.hero-compact .hero-grid{padding-top:70px;padding-bottom:72px}
.notice{border:1px solid var(--g12);border-radius:var(--radius-card);padding:28px;line-height:1.65;color:var(--g60);background:var(--white)}
.notice strong{color:var(--black)}
@media(max-width:900px){.product-grid,.mode-grid,.expertise-grid,.info-grid,.split{grid-template-columns:1fr}.mode-flow{grid-template-columns:1fr}.mode-join{text-align:center;transform:rotate(90deg)}.row{grid-template-columns:1fr;gap:8px}.page-hero{padding:74px 0 64px}}