/* ============================================================
   ROARY — raffinements
   Chargé après les styles de page. Typographie de titre, rythme
   vertical, texture et micro-interactions du site public.
   ============================================================ */

/* ---------- 1. Typographie de titre ----------
   Manrope 700 avec un crénage resserré : la même tension que le
   logo, au lieu du Inter 600 plus neutre. */
.manifesto .lead,
.dual .head h2,
.score h2,
.conviction .head h2,
.dual .panel h3,
.page-hero h1,
.page-hero .ph-title,
.stack-card > .conviction-inner .head h2 {
  font-family: 'Manrope', sans-serif;
  font-weight: 700;
  letter-spacing: -.03em;
}
.manifesto .lead { line-height: 1.12; }
.dual .panel h3 { line-height: 1.08; }

/* ---------- 1 bis. L'intitulé de section ----------
   « Travailler avec Roary », sur l'accueil, se lit ; les mêmes
   intitulés valaient onze pixels fixes sur les pages intérieures, où
   ils signalaient une rubrique sans jamais se lire vraiment.

   Une seule définition pour tout le site, reprise de l'accueil :
   la taille suit la fenêtre entre treize et seize pixels, et
   l'interlettrage s'ouvre à .2em — un texte capitale a besoin de cet
   air-là dès qu'il grandit, faute de quoi les lettres se touchent.

   Cette feuille n'est chargée que par les pages publiques : les
   intitulés de champ de l'administration et ceux des espaces membre et
   établissement, qui portent la même classe pour un tout autre usage,
   ne sont pas touchés. */
.label{
  font-size: clamp(13px, 1.35vw, 16px);
  letter-spacing: .2em;
}

/* Les mots mis en valeur restent en camel / bleu, sans italique */
.manifesto .lead em,
.dual .panel h3 em,
.score h2 em { font-style: normal; }

/* ---------- 2. Rythme vertical ----------
   Un espacement asymétrique — plus d'air au-dessus qu'en dessous —
   installe une respiration au lieu d'une répétition mécanique. */
@media (min-width: 861px) {
  .manifesto-inner,
  .dual-inner,
  .conviction-inner { padding-top: 180px !important; padding-bottom: 120px !important; }
  .score { padding-top: 180px !important; padding-bottom: 120px !important; }
  footer { padding-top: 128px !important; }

  /* Les cartes empilées gardaient 100 px en haut et 50 en bas, hérités d'une
     page beaucoup plus courte. Sur les pages longues, ce sont ces cinquante
     pixels manquants en fin de carte qui donnent l'impression que le texte
     bute contre la carte suivante. */
  .stack-card > .card-inner { padding-top: 150px !important; padding-bottom: 110px !important; }
  .plateforme-inner { padding-top: 150px !important; padding-bottom: 120px !important; }
}

/* Sur téléphone, l'air se prend en largeur, pas en hauteur : ajouter du blanc
   vertical n'y ferait qu'allonger un défilement déjà long. */
@media (max-width: 860px) {
  .stack-card > .card-inner { padding-bottom: 62px; }
}

/* Un intertitre a besoin de respirer au-dessus plus qu'en dessous : c'est ce
   déséquilibre qui le rattache visuellement au texte qu'il introduit. */
.card-inner h2 { margin-bottom: 22px; }
.card-inner p + p { margin-top: 20px; }

/* ---------- 3. Texture ----------
   Le grain n'existait que sur le hero. Étendu très discrètement aux
   sections claires, il unifie la matière de la marque. */
.manifesto,
.dual,
.conviction { position: relative; }
.manifesto::before,
.dual::before,
.conviction::before {
  content: '';
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none;
  opacity: .03;
  mix-blend-mode: multiply;
  border-radius: inherit;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}
.manifesto-inner,
.dual-inner,
.conviction-inner { position: relative; z-index: 1; }

/* ---------- 4. Empilement au scroll ----------
   L'assombrissement passait par filter: brightness(), qui force un
   repaint plein écran à chaque image. Un voile en opacity fait le
   même effet sur la couche de composition. */
.stack-card { position: relative; }
.stack-card::after {
  content: '';
  position: absolute; inset: 0;
  background: var(--cuir, #2C1B11);
  border-radius: inherit;
  opacity: var(--voile, 0);
  pointer-events: none;
  z-index: 40;
}

/* ---------- 5. Micro-interactions ---------- */
.navlinks a { display: inline-block; transition: color .35s ease, transform .35s cubic-bezier(.16, 1, .3, 1); }
.navlinks a:hover { transform: translateY(-1px); }

.nav-cta, .nav-connect { transition: background .3s ease, color .3s ease, border-color .3s ease, transform .3s cubic-bezier(.16, 1, .3, 1); }
.nav-cta:hover, .nav-connect:hover { transform: translateY(-1px); }

nav .wordmark { transition: color .4s ease, letter-spacing .4s cubic-bezier(.16, 1, .3, 1); }
nav .wordmark:hover { letter-spacing: .01em; }

.panel .go, .manifesto-cta, footer .fcta { transition: transform .35s cubic-bezier(.16, 1, .3, 1), background .35s ease, color .35s ease, border-color .35s ease; }
.panel .go:hover { transform: translateX(3px); }

footer .fsocial a { transition: border-color .3s, color .3s, transform .3s cubic-bezier(.16, 1, .3, 1); display: inline-block; }
footer .fsocial a:hover { transform: translateY(-2px); }

@media (prefers-reduced-motion: reduce) {
  .stack-card::after { opacity: 0 !important; }
  .navlinks a:hover, .nav-cta:hover, .nav-connect:hover,
  .panel .go:hover, footer .fsocial a:hover { transform: none !important; }
}

/* ============================================================
   Bloc « la plateforme ROARY »
   Décliné sur trois pages : synthèse sur l'accueil, détail côté
   établissement, détail côté membre.
   ============================================================ */
.plateforme-inner{padding:110px 6vw 90px; max-width:1080px; margin:0 auto; width:100%;}
.plateforme .head{text-align:center; margin-bottom:44px;}
.plateforme .head .label{justify-content:center; margin-bottom:14px;}
.plateforme .head h2{font-family:'Manrope',sans-serif; font-weight:700; letter-spacing:-.03em;
                     font-size:clamp(26px,3.6vw,40px); line-height:1.12; margin-bottom:16px;}
.plateforme .head p{font-size:15px; line-height:1.65; max-width:60ch; margin:0 auto;}

/* Version sombre (accueil) */
.plateforme.sombre{background:var(--cuir); color:var(--blanc);}
.plateforme.sombre .head .label{color:var(--camel);}
.plateforme.sombre .head h2{color:var(--blanc);}
.plateforme.sombre .head h2 em{font-style:normal; color:var(--camel);}
.plateforme.sombre .head p{color:rgba(244,245,240,.72);}

.cles{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:rgba(232,201,160,.22);
      border-top:1px solid rgba(232,201,160,.22); border-bottom:1px solid rgba(232,201,160,.22);}
@media(max-width:760px){ .cles{grid-template-columns:1fr;} }
.cle{background:var(--cuir); padding:32px 28px;}
.cle .num{font-family:'DM Mono',monospace; font-size:10px; letter-spacing:.24em; color:var(--camel); display:block; margin-bottom:14px;}
.cle h3{font-family:'Manrope',sans-serif; font-weight:700; font-size:17px; letter-spacing:-.02em; color:var(--blanc); margin-bottom:9px;}
.cle p{font-size:13.5px; line-height:1.6; color:rgba(244,245,240,.66);}

.plateforme-liens{display:flex; justify-content:center; gap:28px; flex-wrap:wrap; margin-top:40px;}
.plateforme-liens a{font-family:'Jost',sans-serif; font-weight:300; font-size:13px; letter-spacing:.14em;
                    text-transform:uppercase; color:var(--bleu); border-bottom:1px solid var(--bleu);
                    padding-bottom:5px; transition:color .3s ease, border-color .3s ease, transform .3s cubic-bezier(.16,1,.3,1);}
.plateforme-liens a:hover{color:var(--camel); border-color:var(--camel); transform:translateY(-2px);}

/* Version claire (pages détaillées) */
.plateforme.claire .head h2{color:var(--cuir);}
.plateforme.claire .head h2 em{font-style:normal; color:var(--camel);}
.plateforme.claire .head p{color:var(--mid);}

.acces-grille{display:grid; grid-template-columns:1fr 1fr; gap:22px;}
@media(max-width:820px){ .acces-grille{grid-template-columns:1fr; max-width:520px; margin:0 auto;} }
.acces{background:var(--white); border:1px solid var(--camel-pale); border-radius:18px; padding:28px 26px;
       transition:transform .4s cubic-bezier(.22,1,.36,1), box-shadow .4s ease, border-color .4s ease;}
.acces:hover{transform:translateY(-4px); box-shadow:0 18px 40px rgba(44,27,17,.10); border-color:var(--camel);}
.acces .k{font-family:'DM Mono',monospace; font-size:9.5px; letter-spacing:.22em; text-transform:uppercase;
          color:var(--camel); display:block; margin-bottom:12px;}
.acces h3{font-family:'Manrope',sans-serif; font-weight:700; font-size:17px; letter-spacing:-.02em;
          color:var(--cuir); margin-bottom:10px; line-height:1.25;}
.acces p{font-size:13.5px; line-height:1.65; color:var(--mid);}

.adhesion{margin-top:34px; max-width:760px; margin-left:auto; margin-right:auto;
          background:rgba(176,203,231,.14); border-left:3px solid var(--bleu); padding:22px 26px;}
.adhesion .titre{font-family:'Jost',sans-serif; font-weight:200; font-size:10px; letter-spacing:.3em;
                 text-transform:uppercase; color:var(--bleu-deep); margin-bottom:12px;}
.adhesion p{font-size:14px; line-height:1.65; color:var(--cuir); margin-bottom:9px;}
.adhesion p:last-child{margin-bottom:0;}
.adhesion strong{font-weight:600;}