/* ============================================================
   ROARY — le bloc d'offre de l'accueil

   Il manquait au site l'endroit où l'on dit ce que Roary fait et
   ce que cela coûte. La page d'accueil disait ce que Roary est,
   ce qu'elle croit et ce qu'elle possède, jamais ce qu'elle offre.

   Le principe : un seul bloc, deux publics, une bascule. Le prix
   sert de titre — on lit « Gratuit » avant même d'avoir lu à qui
   l'on s'adresse — et le fond change de camp avec l'onglet. Sans
   ce changement de fond, on croit à un simple filtre ; avec lui,
   on comprend qu'on a changé de monde.

   Les classes sont préfixées `ro-` : le bloc voyage d'une page à
   l'autre et ne doit rien emprunter aux styles locaux.
   ============================================================ */

.ro-offre{
  position:relative; overflow:hidden;
  background:var(--white);
  border-radius:18px;
  padding:56px 52px 52px;
  transition:background .7s var(--ease, cubic-bezier(.16,1,.3,1)),
             color .7s var(--ease, cubic-bezier(.16,1,.3,1));
}
.ro-offre.etab{background:var(--cuir); color:var(--white);}

/* ---------- Les onglets ----------
   Deux pastilles dans une gouttière ; l'active prend le contre-pied
   du fond, pour rester lisible dans les deux registres. */
.ro-onglets{
  display:inline-flex; gap:4px; padding:4px; border-radius:40px;
  background:var(--blanc); margin-bottom:44px;
  transition:background .7s var(--ease, cubic-bezier(.16,1,.3,1));
}
.ro-offre.etab .ro-onglets{background:rgba(253,252,250,.10);}
.ro-onglets button{
  font-family:'Jost',sans-serif; font-weight:300; font-size:12.5px;
  letter-spacing:.12em; text-transform:uppercase;
  padding:12px 28px; border:none; border-radius:30px;
  background:transparent; color:var(--mid); cursor:pointer;
  transition:background .45s var(--ease, cubic-bezier(.16,1,.3,1)), color .45s ease;
}
.ro-offre.etab .ro-onglets button{color:rgba(253,252,250,.6);}
.ro-onglets button.on{background:var(--cuir); color:var(--white);}
.ro-offre.etab .ro-onglets button.on{background:var(--white); color:var(--cuir);}

/* ---------- Les deux vues ----------
   Superposées plutôt que détruites : la hauteur ne saute pas d'un
   onglet à l'autre, et l'apparition peut être animée. */
.ro-vues{position:relative;}
.ro-vue{
  display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:start;
  opacity:0; visibility:hidden; position:absolute; inset:0;
  transform:translateY(14px);
  transition:opacity .5s ease, transform .6s var(--ease, cubic-bezier(.16,1,.3,1)), visibility .5s;
}
.ro-vue.on{opacity:1; visibility:visible; position:relative; transform:none;}

/* ---------- Les formules établissement (adhésion / à la mission) ----------
   Sous-bascule propre à la vue « établissement » : deux formules de
   tarification, l'adhésion mise en avant par défaut. */
.ro-pills{display:inline-flex; gap:8px; margin-bottom:22px;}
.ro-pills button{
  font-family:'Jost',sans-serif; font-weight:500; font-size:11.5px;
  letter-spacing:.08em; text-transform:uppercase;
  padding:10px 18px; border:1px solid rgba(232,201,160,.35); border-radius:30px;
  background:transparent; color:rgba(253,252,250,.75); cursor:pointer;
  transition:background .3s ease, color .3s ease, border-color .3s ease;
}
.ro-pills button.on{background:var(--camel); color:var(--cuir); border-color:var(--camel);}
.ro-pills button:hover:not(.on){border-color:var(--camel-pale); color:var(--white);}

/* ---------- Le mot d'ordre ---------- */
.ro-aqui{
  font-family:'DM Mono',monospace; font-size:10px; letter-spacing:.24em;
  text-transform:uppercase; color:var(--camel); display:block; margin-bottom:16px;
}
.ro-offre.etab .ro-aqui{color:var(--camel-pale);}
.ro-mot{
  font-family:'Manrope',sans-serif; font-weight:800;
  font-size:clamp(42px,6.4vw,84px); letter-spacing:-.045em; line-height:.92;
}
.ro-mot em{font-style:normal; color:var(--camel);}
.ro-offre.etab .ro-mot em{color:var(--camel-pale);}

/* Les trois questions du directeur d'exploitation. Elles pèsent plus
   qu'un chapeau ordinaire — ce sont les siennes — sans jamais
   concurrencer le mot d'ordre. */
.ro-questions{
  margin-top:22px; font-family:'Manrope',sans-serif; font-weight:700;
  font-size:clamp(15px,1.45vw,18px); line-height:1.45; letter-spacing:-.01em;
  color:var(--cuir); max-width:30ch;
}
.ro-offre.etab .ro-questions{color:var(--white);}

.ro-sous{margin-top:20px; font-size:15px; line-height:1.65; color:var(--mid); max-width:34ch;}
.ro-questions + .ro-sous{margin-top:12px;}
.ro-offre.etab .ro-sous{color:rgba(253,252,250,.72);}
.ro-fine{margin-top:18px; font-size:12.5px; line-height:1.6; color:var(--stone); max-width:36ch;}
.ro-offre.etab .ro-fine{color:rgba(253,252,250,.5);}

/* ---------- La colonne de droite ----------
   Quatre lignes, pas une de plus : au-delà on ne lit plus en
   diagonale et l'effet du mot d'ordre se perd. Un intitulé les
   annonce, sinon la liste flotte sans qu'on sache ce qu'elle
   énumère. */
.ro-liste-titre{
  font-family:'Manrope',sans-serif; font-weight:700;
  font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--cuir); padding-top:16px; margin-bottom:20px;
  display:flex; align-items:center; gap:14px;
}
.ro-liste-titre::after{content:''; flex:1; height:1px; background:var(--camel-pale);}
.ro-offre.etab .ro-liste-titre{color:var(--camel-pale);}
.ro-offre.etab .ro-liste-titre::after{background:rgba(232,201,160,.28);}

.ro-liste{list-style:none; margin:0; padding:0;}
.ro-liste li{
  position:relative; padding-left:20px; font-size:14.5px; line-height:1.55;
  color:var(--mid); margin-bottom:14px;
}
.ro-liste li:last-child{margin-bottom:0;}
.ro-offre.etab .ro-liste li{color:rgba(253,252,250,.78);}
.ro-liste li::before{
  content:''; position:absolute; left:0; top:.72em;
  width:9px; height:1px; background:var(--camel);
}
.ro-offre.etab .ro-liste li::before{background:var(--camel-pale);}

.ro-go{
  display:inline-block; margin-top:30px;
  font-family:'Jost',sans-serif; font-weight:300; font-size:12.5px;
  letter-spacing:.12em; text-transform:uppercase;
  border-bottom:1px solid var(--camel); padding-bottom:3px;
  transition:color .3s ease;
}
.ro-go:hover{color:var(--camel);}
.ro-offre.etab .ro-go{border-bottom-color:var(--camel-pale);}

@media(max-width:880px){
  .ro-offre{padding:38px 24px 34px; border-radius:14px;}
  .ro-vue{grid-template-columns:1fr; gap:26px; position:relative; inset:auto;}
  .ro-vue:not(.on){display:none;}
  .ro-onglets{margin-bottom:30px; width:100%;}
  .ro-onglets button{flex:1; padding:12px 10px; font-size:11.5px;}
  .ro-pills{width:100%;}
  .ro-pills button{flex:1;}
  .ro-sous, .ro-fine, .ro-questions{max-width:none;}
}

@media (prefers-reduced-motion:reduce){
  .ro-offre, .ro-onglets, .ro-onglets button, .ro-vue{transition:none;}
}