/* ══════════════════════════════════════════════════════════════════════
   Les blocs nés des éléments reçus de la cliente le 18/08/2026 :
   macaron Qualiopi, logo Mon Compte Formation, certificat et livrets.

   Feuille séparée, chargée après « corrections.css », pour la même
   raison que les deux précédentes : pouvoir la retirer d'un bloc si la
   présentation ne convient pas, sans toucher au reste de la charte.
   ══════════════════════════════════════════════════════════════════ */

/* ── 1. Les marques officielles ────────────────────────────────────────
   ⚠️ Le fond blanc des fichiers n'est pas détouré : les chartes d'usage
   de Qualiopi comme de Mon Compte Formation interdisent d'altérer la
   marque. La tuile blanche est donc la présentation prescrite, pas un
   pis-aller : elle isole le logo de l'ivoire du site sans y toucher. */
.rv-marque{
  display:inline-block;
  background:#FFF;
  border:1px solid var(--rv-trait);
  border-radius:10px;
  padding:.9rem 1.1rem;
  line-height:0;              /* sinon la ligne de base creuse le bas */
  box-shadow:0 1px 2px rgba(11,85,99,.06);
}
.rv-marque img{ display:block; height:auto; max-width:100%; }

/* Rangée de marques, centrée, qui se replie au téléphone. */
.rv-marques{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:1.4rem;
  margin:1.8rem 0 .6rem;
}

/* ── 2. Le bloc « éligible au CPF » ────────────────────────────────── */
.rv-cpf{
  display:flex;
  align-items:center;
  gap:1.4rem;
  flex-wrap:wrap;
  background:rgba(11,85,99,.05);
  border:1px solid var(--rv-trait);
  border-left:4px solid var(--rv-teal);
  border-radius:12px;
  padding:1.2rem 1.4rem;
  margin:0 0 2rem;
}
/* ⚠️ Sans « min-width:0 », un élément flex refuse de descendre sous la
   largeur de son contenu et fait déborder la page au téléphone. Le
   piège s'est déjà produit sur le formulaire de contact. */
.rv-cpf > *{ min-width:0; }
.rv-cpf-texte{ flex:1 1 16rem; }
.rv-cpf-texte p{ margin:0; text-align:left !important; text-align-last:auto !important; }
.rv-marque-cpf{ padding:.6rem; }

/* ── 3. Le bloc de certification ───────────────────────────────────── */
.rv-certif{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:2.2rem;
  align-items:start;
  background:#FFF;
  border:1px solid var(--rv-trait);
  border-radius:16px;
  padding:2rem 2.2rem;
}
.rv-certif-marque{ line-height:0; }
.rv-certif-texte > *:first-child{ margin-top:0; }
.rv-certif-texte > *:last-child{ margin-bottom:0; }

/* La mention obligatoire est un texte réglementaire, pas un paragraphe
   courant : elle se lit d'un bloc, sans justification ni césure. */
.rv-certif-mention{
  font-weight:600;
  color:var(--rv-teal);
  border-left:3px solid var(--rv-terracotta);
  padding-left:1rem;
  margin:0 0 1.4rem;
  text-align:left !important;
  text-align-last:auto !important;
  hyphens:none;
}
.rv-certif .rv-tableau{ margin:0 0 1.2rem; }

/* Sur les pages où le bloc n'est qu'un rappel, la colonne du macaron
   passe devant et l'ensemble reste compact. */
.rv-certif-compact{ gap:1.8rem; padding:1.6rem 1.8rem; }

@media (max-width:900px){
  .rv-certif{ grid-template-columns:1fr; gap:1.4rem; padding:1.5rem; }
  .rv-certif-marque{ text-align:center; }
}

/* Le macaron posé seul dans une colonne de texte (page Formations). */
.rv-split-texte .rv-marque{ margin-top:.6rem; }

/* ── 4. Les documents à télécharger ────────────────────────────────── */
.rv-docs{
  display:flex;
  flex-wrap:wrap;
  gap:1.4rem;
  margin:1.8rem 0 0;
}
.rv-doc{
  flex:1 1 20rem;
  min-width:0;
  display:block;
  position:relative;
  background:#FFF;
  border:1px solid var(--rv-trait);
  border-radius:14px;
  padding:1.6rem 1.6rem 1.4rem;
  text-decoration:none !important;
  color:var(--rv-encre);
  overflow:hidden;
  transition:transform .28s cubic-bezier(.32,.72,0,1), box-shadow .28s, border-color .28s;
}
/* Le filet terracotta se déploie au survol, comme sur les cartes : même
   vocabulaire visuel, l'utilisateur n'a rien de neuf à apprendre. */
.rv-doc::before{
  content:'';
  position:absolute; left:0; top:0; bottom:0;
  width:4px;
  background:var(--rv-terracotta);
  transform:scaleY(0);
  transform-origin:top;
  transition:transform .32s cubic-bezier(.32,.72,0,1);
}
.rv-doc:hover{
  transform:translateY(-3px);
  box-shadow:0 12px 28px rgba(11,85,99,.10);
  border-color:#D8D0C1;
}
.rv-doc:hover::before{ transform:scaleY(1); }
.rv-doc:focus-visible{ outline:3px solid var(--rv-teal); outline-offset:3px; }

.rv-doc .rv-icone{ width:2.2rem; height:2.2rem; color:var(--rv-teal); margin-bottom:.9rem; }
.rv-doc-titre{
  display:block;
  font-family:var(--rv-serif);
  font-size:1.24rem;
  font-weight:600;
  line-height:1.3;
  margin-bottom:.5rem;
}
.rv-doc:hover .rv-doc-titre{ color:var(--rv-terracotta-fort); }
.rv-doc-desc{
  display:block;
  color:var(--rv-gris);
  font-size:.96rem;
  line-height:1.6;
  margin-bottom:1rem;
}
/* Le poids et le nombre de pages, annoncés AVANT le clic : sur une
   connexion mobile guyanaise, un mégaoctet qui part sans prévenir est
   une impolitesse. */
.rv-doc-meta{
  display:inline-block;
  font-size:.82rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--rv-teal);
  background:rgba(11,85,99,.07);
  border-radius:999px;
  padding:.3rem .8rem;
}

@media (prefers-reduced-motion:reduce){
  .rv-doc{ transition:none; }
  .rv-doc::before{ transition:none; }
  .rv-doc:hover{ transform:none; }
}

/* ── 5. Le macaron du pied de page ─────────────────────────────────── */
.et-l--footer .rv-marque,
#main-footer .rv-marque{ padding:.7rem .9rem; margin-bottom:.4rem; }

/* ── 6. Les trois séries d'indicateurs de la page Qualiopi ──────────
   Trois blocs de compteurs se suivent, séparés par des h3. Sans marge
   haute, le titre de la deuxième série se collait aux chiffres de la
   première et se lisait comme leur légende. */
.rv-compteurs + h3{ margin-top:3rem; }

/* ── 7. Les étapes au-delà de cinq ─────────────────────────────────────
   La VAE en compte six. En rangée unique, la sixième tombe seule à la
   ligne et le trait pointillé du conteneur ne la rejoint pas : elle se
   lit comme une étape à part. Grille de trois colonnes, deux rangées
   égales, et pas de trait. */
.rv-etapes-grille::before{ content:none !important; }
@media (min-width:820px){
  .rv-etapes-grille{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:2.2rem 1.8rem;
  }
  .rv-etapes-grille > li{ flex:none; }
}
/* Entre 560 et 820 px, deux colonnes plutôt qu'une pile de six. */
@media (min-width:560px) and (max-width:819px){
  .rv-etapes-grille{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:1.9rem 1.5rem;
  }
  .rv-etapes-grille > li{ flex:none; }
}

/* ── 8. Étapes dans une colonne étroite ────────────────────────────────
   Le trait pointillé qui relie les pastilles est tracé sur le conteneur
   et ne connaît pas la largeur disponible : dans la colonne latérale de
   la page Contact, les trois étapes s'empilent mais le trait continue de
   traverser à droite de la première pastille, où il ne relie rien. */
.rv-contact-infos .rv-etapes::before,
.rv-encadre .rv-etapes::before{ content:none; }

/* ── 9. La fiche du certificat au téléphone ────────────────────────────
   Sous 640 px, un tableau devient une pile de fiches et chaque cellule
   se fait précéder de l'intitulé de sa colonne. Ici les colonnes
   s'appellent « Élément » et « Valeur » : l'intitulé n'apprend rien et
   double la hauteur du bloc. La première cellule EST déjà le libellé. */
@media (max-width:640px){
  .rv-certif .rv-tableau td::before{ content:none; }
  .rv-certif .rv-tableau td:first-child{
    font-weight:700;
    color:var(--rv-teal);
    font-size:.86rem;
    text-transform:uppercase;
    letter-spacing:.04em;
    padding-bottom:.1rem;
    border-bottom:0;
  }
  .rv-certif .rv-tableau td:last-child{ padding-top:0; }
}

/* ── 10. Les lignes de lien ne se justifient pas ───────────────────────
   ⚠️ « Consulter le certificat (PDF, 434 Ko) → » s'affichait au
   téléphone en « Consulter        le » sur une ligne, puis le reste sur
   la suivante : la justification étire une ligne de trois mots sur toute
   la largeur. Une ligne d'appel n'est pas un paragraphe de texte
   courant, elle se cale à gauche. */
p.rv-split-liens,
.rv-doc,
.rv-docs p{
  text-align:left !important;
  text-align-last:auto !important;
  hyphens:none;
}

/* Le lien de téléchargement porte trois morceaux : le libellé, le poids
   du fichier et la flèche. « inline-flex » les met sur une seule ligne,
   qui déborde sous 420 px et se coupe n'importe où. On l'autorise à
   passer à la ligne, en alignant les morceaux sur la ligne de base. */
.rv-split-liens .rv-lien-fort{ flex-wrap:wrap; align-items:baseline; }
.rv-split-liens .rv-lien-fort .rv-legende{ white-space:nowrap; }

/* ══════════════════════════════════════════════════════════════════════
   11. Les logos clients, reçus le 18/08/2026.

   Pas de niveau de gris : trois des cinq marques vivent sur un fond
   coloré (vert foncé, dégradé bleu) et un filtre les rendrait
   méconnaissables. Chacune est posée sur une tuile blanche de hauteur
   identique, ce qui donne au bandeau son alignement sans toucher aux
   marques elles-mêmes. La taille relative est déjà réglée à la gravure,
   à surface optique égale.
   ══════════════════════════════════════════════════════════════════ */
.rv-logos{
  list-style:none !important;   /* Divi rajoute sa puce, cf. CLAUDE.md */
  margin:2rem 0 0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:1rem;
}
.rv-logos li{
  margin:0;
  padding:0;
  list-style:none !important;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:124px;
  padding:.9rem 1.3rem;
  background:#FFF;
  border:1px solid var(--rv-trait);
  border-radius:12px;
  box-shadow:0 1px 2px rgba(11,85,99,.06);
  transition:transform .35s cubic-bezier(.32,.72,0,1), box-shadow .35s cubic-bezier(.32,.72,0,1);
}
.rv-logos li:hover{
  transform:translateY(-3px);
  box-shadow:0 10px 24px rgba(11,85,99,.10);
}
.rv-logos li::before{ content:none !important; }
.rv-logos img{ display:block; height:auto; max-width:100%; }
.rv-logos-note{ margin-top:1rem; }

/* Le second étage du bandeau de confiance : les deux marques
   officielles, séparées des logos clients par un filet discret. */
.rv-confiance-marques{
  margin-top:2.6rem;
  padding-top:2rem;
  border-top:1px solid var(--rv-trait);
}

/* Un logo seul, dans l'en-tête d'une étude de cas. Il remplace l'icône :
   même gabarit, même alignement. */
.rv-logo-client{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:none;
  background:#FFF;
  border:1px solid var(--rv-trait);
  border-radius:10px;
  padding:.5rem .7rem;
  line-height:0;
}
.rv-logo-client img{ display:block; height:auto; max-width:100%; }

/* La vignette Qualiopi complète, sur la page Certification : elle porte
   déjà la mention et le certificateur, elle n'a donc pas de texte à
   côté d'elle. Son fond blanc reste, la charte d'usage l'impose. */
.rv-marque-vignette{ padding:.8rem; }

@media (max-width:600px){
  .rv-logos{ gap:.7rem; }
  .rv-logos li{ min-height:84px; padding:.7rem .9rem; }
  .rv-logos img{ max-height:52px; width:auto; }
  .rv-cas-tete .rv-logo-client img{ max-height:38px; width:auto; }
}

/* ══════════════════════════════════════════════════════════════════════
   12. SILAE, le logiciel de paie
   ──────────────────────────────────────────────────────────────────────
   Reçu le 19/08/2026. Volontairement HORS du bandeau de logos clients :
   SILAE est l'outil que la cliente maîtrise, pas une référence
   commerciale. Le bloc est donc discret et légendé, là où la compétence
   « Configuration avancée MySilae » est annoncée.
   ══════════════════════════════════════════════════════════════════ */
.rv-outil-silae{
  display:flex;
  align-items:center;
  gap:1.1rem;
  flex-wrap:wrap;
  margin:1.6rem 0 0;
  /* Le bloc se cale sur son contenu au lieu de tirer une tuile blanche de
     1024 px pour un logo de 180 : la ligne se lit comme une signature,
     pas comme une section. */
  width:fit-content;
  max-width:100%;
  padding:1rem 1.4rem;
  background:#fff;
  border:1px solid rgba(11,85,99,.12);
  border-radius:10px;
}
.rv-logo-silae{ display:block; flex:0 0 auto; }
.rv-logo-silae img{ display:block; height:auto; max-width:100%; }
/* La légende prend le reste de la ligne, et passe dessous si la place
   manque. `min-width:0` sinon un item flex refuse de descendre sous la
   largeur de son texte et déborde (le piège déjà vu sur Contact). */
.rv-outil-silae .rv-legende{ flex:0 1 26rem; min-width:0; margin:0; text-align:left !important; }

@media (max-width:600px){
  .rv-outil-silae{ gap:.8rem; padding:.9rem 1rem; }
  .rv-logo-silae img{ width:150px; }
}