/* =========================================================================
   LE MACARON PARTENAIRE OFFICIEL

   Toutes les regles sont portees par .rtf-macaron : dans une colonne de
   contenu, un selecteur a une seule classe se fait battre par les regles
   de la colonne elle-meme, et la taille des titres repart a celle d'un
   paragraphe.
   ====================================================================== */

.rtf-macaron{
  display:grid;
  grid-template-columns:minmax(0,220px) minmax(0,1fr);
  align-items:center;
  gap:clamp(20px,4vw,44px);
  margin:0 0 clamp(28px,4vw,44px);
  padding:clamp(22px,3.5vw,38px);
  background:
    radial-gradient(120% 90% at 12% 0%, rgba(255,26,26,.12), transparent 62%),
    linear-gradient(178deg, var(--rtf-panel) 0%, var(--rtf-canvas-2) 72%);
  border:1px solid var(--rtf-line);
  border-radius:var(--rtf-r-md);
}

.rtf-macaron .rtf-macaron-visuel{
  display:flex;
  justify-content:center;
}

.rtf-macaron .rtf-macaron-visuel img{
  display:block;
  width:100%;
  max-width:220px;
  height:auto;
  /* Le macaron est un objet physique : une ombre portee le decolle du fond
     et rappelle qu'il se pose sur une vitre. */
  filter:drop-shadow(0 14px 26px rgba(0,0,0,.55));
}

.rtf-macaron .rtf-macaron-corps{min-width:0}

.rtf-macaron .rtf-macaron-kicker{
  margin:0 0 6px;
  font-family:var(--rtf-label);
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--rtf-accent);
}

.rtf-macaron .rtf-macaron-titre{
  margin:0 0 10px;
  font-family:var(--rtf-display);
  font-size:clamp(1.7rem, 1.3rem + 1.6vw, 2.4rem);
  line-height:1;
  text-transform:uppercase;
  letter-spacing:.012em;
  color:var(--rtf-ink);
}

.rtf-macaron .rtf-macaron-chapeau{
  margin:0 0 14px;
  color:var(--rtf-ink-muted);
  font-size:1rem;
  line-height:1.6;
  max-width:56ch;
}

.rtf-macaron .rtf-macaron-points{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:8px;
}

.rtf-macaron .rtf-macaron-points li{
  position:relative;
  padding-left:24px;
  color:var(--rtf-ink);
  font-size:.95rem;
  line-height:1.55;
}

/* Un chevron plutot qu'une puce : on liste des benefices, pas des items. */
.rtf-macaron .rtf-macaron-points li::before{
  content:"";
  position:absolute;
  left:4px;
  top:.5em;
  width:7px;
  height:7px;
  border-right:2px solid var(--rtf-accent);
  border-bottom:2px solid var(--rtf-accent);
  transform:rotate(-45deg);
}

@media (max-width:720px){
  .rtf-macaron{
    grid-template-columns:1fr;
    justify-items:center;
    text-align:center;
  }
  .rtf-macaron .rtf-macaron-visuel img{max-width:190px}
  .rtf-macaron .rtf-macaron-chapeau{margin-inline:auto}
  .rtf-macaron .rtf-macaron-points{justify-items:start;text-align:left}
}

/* =========================================================================
   LE PARCOURS DU PARTENARIAT

   Meme logique de specificite que le macaron : tout est porte par
   .rtf-parcours, sinon la colonne de contenu reprend la main sur les titres.
   ====================================================================== */

.rtf-parcours{
  margin:0 0 clamp(28px,4vw,44px);
  padding:clamp(22px,3.5vw,38px);
  background:var(--rtf-canvas-2);
  border:1px solid var(--rtf-line);
  border-radius:var(--rtf-r-md);
}

.rtf-parcours .rtf-parcours-tete{
  display:flex;
  align-items:center;
  gap:clamp(18px,3vw,32px);
  margin:0 0 clamp(22px,3vw,32px);
}

/* Cote membre seulement : le macaron en petit, pour qu'on sache quoi
   chercher sur une vitrine avant meme de lire les etapes. */
.rtf-parcours .rtf-parcours-vignette{
  flex:0 0 auto;
  width:clamp(84px,14vw,128px);
  height:auto;
  filter:drop-shadow(0 12px 22px rgba(0,0,0,.55));
}

.rtf-parcours .rtf-parcours-intro{min-width:0}

.rtf-parcours .rtf-parcours-kicker{
  margin:0 0 6px;
  font-family:var(--rtf-label);
  font-size:11px;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--rtf-accent);
}

.rtf-parcours .rtf-parcours-titre{
  margin:0 0 10px;
  font-family:var(--rtf-display);
  font-weight:900;
  font-size:clamp(1.6rem, 1.25rem + 1.5vw, 2.2rem);
  line-height:1;
  text-transform:uppercase;
  letter-spacing:.012em;
  color:var(--rtf-ink);
}

.rtf-parcours .rtf-parcours-chapeau{
  margin:0;
  color:var(--rtf-ink-muted);
  font-size:1rem;
  line-height:1.6;
  max-width:56ch;
}

.rtf-parcours .rtf-parcours-etapes{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:1px;
  background:var(--rtf-line);
  border:1px solid var(--rtf-line);
  border-radius:var(--rtf-r-sm);
  overflow:hidden;
  grid-template-columns:repeat(3,minmax(0,1fr));
}

/* Le parcours partenaire compte quatre etapes, celui du membre trois :
   la grille suit le nombre reel plutot qu'un chiffre fige. */
.rtf-parcours--partenaire .rtf-parcours-etapes{
  grid-template-columns:repeat(4,minmax(0,1fr));
}

.rtf-parcours .rtf-parcours-etape{
  margin:0;
  padding:20px 18px 22px;
  background:var(--rtf-panel);
}

/* Le numero porte l'accent, une seule fois par etape : c'est lui qui donne
   la lecture de gauche a droite. */
.rtf-parcours .rtf-parcours-num{
  display:block;
  margin:0 0 10px;
  font-family:var(--rtf-display);
  font-weight:900;
  font-size:2rem;
  line-height:1;
  color:var(--rtf-accent);
}

.rtf-parcours .rtf-parcours-nom{
  margin:0 0 6px;
  font-family:var(--rtf-display);
  font-weight:700;
  font-size:1.05rem;
  line-height:1.15;
  text-transform:uppercase;
  letter-spacing:.015em;
  color:var(--rtf-ink);
}

.rtf-parcours .rtf-parcours-texte{
  margin:0;
  font-size:.92rem;
  line-height:1.55;
  color:var(--rtf-ink-muted);
}

@media (max-width:900px){
  .rtf-parcours .rtf-parcours-etapes,
  .rtf-parcours--partenaire .rtf-parcours-etapes{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (max-width:620px){
  .rtf-parcours .rtf-parcours-tete{
    flex-direction:column;
    align-items:flex-start;
    text-align:left;
  }
  .rtf-parcours .rtf-parcours-etapes,
  .rtf-parcours--partenaire .rtf-parcours-etapes{
    grid-template-columns:1fr;
  }
  .rtf-parcours .rtf-parcours-num{
    font-size:1.6rem;
    margin-bottom:6px;
  }
  .rtf-parcours .rtf-parcours-etape{padding:18px 16px}
}