/* ============================================================
   ROARY — le ROARY Score sur les pages publiques

   Les pages vitrine montraient une maquette dessinée à part :
   cartes blanches cernées d'un filet, intitulés en Jost, cadrans
   fins, score global au même traitement que les piliers. La
   plateforme, elle, a un design abouti — tuiles teintées, cadrans
   épais, carte centrale en dégradé cuir. Deux dessins pour un même
   objet : le visiteur qui devient membre ne reconnaissait pas ce
   qu'on lui avait montré.

   Cette feuille apporte le dessin de la plateforme aux pages
   publiques. Elle se charge en dernier et ne touche qu'aux blocs
   de score ; les exemples chiffrés restent ceux des pages.

   Le balisage diffère d'un endroit à l'autre — .mini-dial côté
   vitrine, .score-dial côté plateforme — donc chaque règle vise
   les deux. Les cercles SVG gardent leur géométrie d'origine
   (rayon, dasharray) : l'animation existante continue de marcher.
   ============================================================ */

/* Teintes de la plateforme, absentes des pages vitrine. */
.score-layout{
  --camel-wash:#F3E4D0;
  --bleu-wash:#E4EDF6;
  --ombre-tuile:0 6px 24px rgba(44,27,17,.08);
}

/* ---------- Les trois tuiles ----------
   La tuile centrale est plus large : c'est le score global qu'on
   doit lire en premier, et une grille strictement égale ne le
   dit pas. */
.score-layout{
  display:grid;
  grid-template-columns:1fr 1.2fr 1fr;
  gap:16px;
  align-items:stretch;
  width:100%;
  margin-top:30px;
}
@media(max-width:900px){ .score-layout{grid-template-columns:1fr; gap:14px;} }

.score-layout .pilier-card{
  background:var(--camel-wash);
  border:none;
  border-radius:22px;
  padding:24px 20px 22px;
  display:flex; flex-direction:column; align-items:center; text-align:center;
  box-shadow:var(--ombre-tuile);
  transition:transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s ease;
}
.score-layout .pilier-card:hover{
  transform:translateY(-3px);
  box-shadow:0 16px 38px rgba(44,27,17,.14);
}

.score-layout .pilier-label{
  font-family:'DM Mono',monospace; font-weight:400;
  font-size:9px; letter-spacing:.28em; text-transform:uppercase;
  color:#A9743F; margin-bottom:8px; display:block;
}
.score-layout .pilier-title{
  font-family:'Manrope',sans-serif; font-weight:700;
  font-size:14px; letter-spacing:-.01em; line-height:1.3;
  color:var(--cuir); margin-bottom:4px;
}
.score-layout .pilier-sub{
  font-family:'DM Mono',monospace; font-size:9.5px; font-style:italic;
  letter-spacing:0; color:var(--stone); margin-bottom:12px;
}

/* ---------- Les cadrans ----------
   Le dessin de la plateforme est plus épais et plus court. Les
   deux balisages n'ont pas le même viewBox — 180 côté plateforme,
   200 côté vitrine — d'où deux épaisseurs de trait différentes
   pour un même rendu à l'écran. */
.score-layout .mini-dial,
.score-layout .score-dial{position:relative; width:84px; height:84px; margin:0 auto 6px;}
.score-layout .mini-dial svg,
.score-layout .score-dial svg{transform:rotate(-90deg); width:100%; height:100%;}
.score-layout .mini-dial circle.bg,
.score-layout .score-dial circle.bg{fill:none; stroke:var(--cuir); opacity:.12;}
.score-layout .mini-dial circle.bg{stroke-width:8.9;}
.score-layout .score-dial circle.bg{stroke-width:8;}
.score-layout .mini-dial circle.fg,
.score-layout .score-dial circle.fg{
  fill:none; stroke:var(--camel); stroke-linecap:round;
  transition:stroke-dashoffset 1.6s cubic-bezier(.16,1,.3,1);
}
.score-layout .mini-dial circle.fg{stroke-width:8.9;}
.score-layout .score-dial circle.fg{stroke-width:8;}

.score-layout .mini-dial .center,
.score-layout .score-dial .center{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.score-layout .mini-dial .val,
.score-layout .score-dial .val{
  font-family:'DM Mono',monospace; font-weight:400;
  font-size:19px; line-height:1; color:var(--cuir);
}
.score-layout .mini-dial .of,
.score-layout .score-dial .of{
  font-family:'DM Mono',monospace; font-weight:400;
  font-size:7.5px; letter-spacing:.24em; text-transform:uppercase;
  color:#A9743F; margin-top:2px;
}

/* ---------- Le pilier 2, en bleu ----------
   Sur la plateforme, le second pilier se distingue par la couleur :
   le parcours est factuel, la posture est appréciée. La vitrine
   traitait les deux à l'identique et perdait cette lecture. */
.score-layout .pilier-card.p2{background:var(--bleu-wash);}
.score-layout .pilier-card.p2 .pilier-label{color:#4E7FA8;}
.score-layout .pilier-card.p2 .mini-dial circle.fg,
.score-layout .pilier-card.p2 .score-dial circle.fg{stroke:var(--bleu-deep);}
.score-layout .pilier-card.p2 .mini-dial .of,
.score-layout .pilier-card.p2 .score-dial .of{color:#4E7FA8;}

/* ---------- Le score global ---------- */
.score-layout .score-total-card{
  background:linear-gradient(150deg, var(--cuir), var(--cuir-soft));
}
.score-layout .score-total-card .pilier-label,
.score-layout .score-total-card .pilier-title{color:var(--white);}
.score-layout .score-total-card .pilier-sub{color:rgba(253,252,250,.55);}
.score-layout .score-total-card .mini-dial,
.score-layout .score-total-card .score-dial{width:104px; height:104px;}
.score-layout .score-total-card .mini-dial circle.bg,
.score-layout .score-total-card .score-dial circle.bg{stroke:var(--white); opacity:.18;}
.score-layout .score-total-card .mini-dial circle.fg,
.score-layout .score-total-card .score-dial circle.fg{stroke:url(#scoreGlobalGrad);}
.score-layout .score-total-card .mini-dial .val,
.score-layout .score-total-card .score-dial .val{font-size:25px; font-weight:700; color:var(--white);}
.score-layout .score-total-card .mini-dial .of,
.score-layout .score-total-card .score-dial .of{color:var(--bleu-deep);}

/* Les pastilles de critères sous les cadrans reprennent le dessin
   des pastilles de la plateforme. */
.score-layout .chips{display:flex; flex-wrap:wrap; gap:6px; justify-content:center; margin-top:8px;}
.score-layout .chips span{
  font-family:'Inter',sans-serif; font-weight:500; font-style:normal;
  font-size:11px; letter-spacing:0;
  color:var(--cuir);
  background:rgba(253,252,250,.6);
  border:1px solid rgba(208,157,101,.42);
  padding:5px 11px; border-radius:30px;
}
.score-layout .pilier-card.p2 .chips span{
  background:rgba(253,252,250,.6); border-color:rgba(127,168,204,.5);
}
.score-layout .score-total-card .chips span{
  color:var(--white); background:rgba(253,252,250,.10); border-color:rgba(232,201,160,.35);
}

@media(max-width:640px){
  .score-layout .pilier-card{padding:22px 16px 20px;}
  .score-layout .mini-dial, .score-layout .score-dial{width:78px; height:78px;}
  .score-layout .score-total-card .mini-dial,
  .score-layout .score-total-card .score-dial{width:96px; height:96px;}
}


/* ============================================================
   L'accueil : deux scores côte à côte
   Autre disposition — un score carrière et un score établissement,
   pas deux piliers — mais le même dessin de tuile. Le camel pour la
   personne, le bleu pour la maison : c'est la répartition employée
   partout ailleurs sur la plateforme.
   ============================================================ */
.score-dual-grid{
  --camel-wash:#F3E4D0;
  --bleu-wash:#E4EDF6;
  --ombre-tuile:0 6px 24px rgba(44,27,17,.08);
}
.score-dual-grid .score-card{
  background:var(--camel-wash);
  border:none; border-radius:22px;
  padding:30px 26px 26px;
  box-shadow:var(--ombre-tuile);
  transition:transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s ease;
}
.score-dual-grid .score-card:hover{
  transform:translateY(-3px); box-shadow:0 16px 38px rgba(44,27,17,.14);
}
.score-dual-grid .score-card:nth-child(2){background:var(--bleu-wash);}

.score-dual-grid .sc-label{
  font-family:'DM Mono',monospace; font-weight:400;
  font-size:9px; letter-spacing:.28em; text-transform:uppercase;
  color:#A9743F; display:block; margin-bottom:14px;
}
.score-dual-grid .score-card:nth-child(2) .sc-label{color:#4E7FA8;}

.score-dual-grid .mini-dial{position:relative; width:104px; height:104px; margin:0 auto 14px;}
.score-dual-grid .mini-dial svg{transform:rotate(-90deg); width:100%; height:100%;}
.score-dual-grid .mini-dial circle.bg{fill:none; stroke:var(--cuir); opacity:.12; stroke-width:8.9;}
.score-dual-grid .mini-dial circle.fg{
  fill:none; stroke:var(--camel); stroke-width:8.9; stroke-linecap:round;
  transition:stroke-dashoffset 1.6s cubic-bezier(.16,1,.3,1);
}
.score-dual-grid .score-card:nth-child(2) .mini-dial circle.fg{stroke:var(--bleu-deep);}
.score-dual-grid .mini-dial .center{position:absolute; inset:0; display:flex; flex-direction:column;
                                    align-items:center; justify-content:center;}
.score-dual-grid .mini-dial .val{font-family:'DM Mono',monospace; font-size:25px; font-weight:700;
                                 line-height:1; color:var(--cuir);}
.score-dual-grid .mini-dial .of{font-family:'DM Mono',monospace; font-size:7.5px; letter-spacing:.24em;
                                text-transform:uppercase; color:#A9743F; margin-top:3px;}
.score-dual-grid .score-card:nth-child(2) .mini-dial .of{color:#4E7FA8;}

.score-dual-grid .chips{display:flex; flex-wrap:wrap; gap:6px; justify-content:center; margin-top:12px;}
.score-dual-grid .chips span{
  font-family:'Inter',sans-serif; font-weight:500; font-style:normal;
  font-size:11px; letter-spacing:0; color:var(--cuir);
  background:rgba(253,252,250,.6);
  border:1px solid rgba(208,157,101,.42);
  padding:5px 11px; border-radius:30px;
}
.score-dual-grid .score-card:nth-child(2) .chips span{border-color:rgba(127,168,204,.5);}

@media(max-width:640px){
  .score-dual-grid .score-card{padding:24px 18px 22px;}
  .score-dual-grid .mini-dial{width:92px; height:92px;}
}