/* Guides et conseils (module rm_guides) : articles du blog et page d'accueil des guides.
   Typographie du site (Poppins pour les titres, Open Sans pour le texte), rouge de la marque pour les liens,
   colonne de lecture de 46 em (environ 70 caractères). Le thème fixe html à 10 px : toutes les tailles sont en em, à partir de 17 px pour les articles et 16 px pour l'accueil des guides. Le thème impose des couleurs de titres et de survol
   en !important : les règles ci-dessous sont préfixées par .rmg / .rmg-hub pour passer devant. */

.rmg, .rmg-hub, .rmg-prod {
  --rmg-ink: #000;
  --rmg-text: #2b2b2b;
  --rmg-muted: #5b6670;
  --rmg-red: #d0121a;
  --rmg-red-dark: #a80e15;
  --rmg-steel: #eef1f3;
  --rmg-line: #cfd5da;
  color: var(--rmg-text);
  font-family: "Open Sans", Arial, sans-serif;
}

/* ---------------------------------------------------------------- article */

.rmg {
  max-width: 46em;
  margin: 0 auto;
  padding: 1.5em 0 3em;
  font-size: 17px;
  line-height: 1.7;
  background: #fff;
}

.rmg .rmg-title,
.rmg-hub .rmg-title {
  margin: 0 0 .75em;
  color: var(--rmg-ink) !important;
  font: 600 clamp(30px, 20px + 2.4vw, 44px)/1.15 Poppins, Arial, sans-serif;
  letter-spacing: -.01em;
  text-transform: none;
}

.rmg-byline {
  margin: 0 0 2em;
  color: var(--rmg-muted);
  font-size: .9375em;
  line-height: 1.5;
}

.rmg-body > :first-child { margin-top: 0; }

.rmg .rmg-body h2 {
  margin: 2.75em 0 .75em;
  color: var(--rmg-ink) !important;
  font: 600 1.5em/1.25 Poppins, Arial, sans-serif;
  text-transform: none;
}

.rmg .rmg-body h3 {
  margin: 2em 0 .5em;
  color: var(--rmg-ink) !important;
  font: 600 1.1875em/1.3 Poppins, Arial, sans-serif;
  text-transform: none;
}

.rmg .rmg-body p,
.rmg .rmg-body li {
  font-size: 1em;
  line-height: 1.7;
  color: var(--rmg-text);
}

.rmg .rmg-body p { margin: 0 0 1.1em; }
.rmg .rmg-body ul, .rmg .rmg-body ol { margin: 0 0 1.25em; padding-left: 1.4em; }
.rmg .rmg-body li { margin-bottom: .4em; }
.rmg .rmg-body ul li { list-style: disc; }
.rmg .rmg-body ol li { list-style: decimal; }
.rmg .rmg-body strong { color: var(--rmg-ink); font-weight: 700; }

.rmg .rmg-body a:not(.rmg-btn),
.rmg .rmg-next a,
.rmg-hub .rmg-list a {
  color: var(--rmg-red) !important;
  text-decoration: underline !important;
  text-decoration-thickness: 1px !important;
  text-underline-offset: .18em;
  border: 0 !important;
  background: none !important;
}

.rmg .rmg-body a:not(.rmg-btn):hover,
.rmg .rmg-next a:hover,
.rmg-hub .rmg-list a:hover {
  color: var(--rmg-red-dark) !important;
  text-decoration-thickness: 2px !important;
}

.rmg a:focus-visible,
.rmg-hub a:focus-visible,
.rmg summary:focus-visible {
  outline: 3px solid var(--rmg-red);
  outline-offset: 3px;
}

/* L'essentiel : ce qu'il faut retenir, en tête d'article */
.rmg .rmg-essentiel {
  margin: 0 0 2.5em;
  padding: 1.25em 1.5em 1em;
  background: var(--rmg-steel);
  border-radius: 4px;
}
.rmg .rmg-essentiel h2 {
  margin: 0 0 .5em;
  font-size: 1.125em;
}
.rmg .rmg-essentiel ul { margin-bottom: .5em; }

/* Note d'atelier : ce qu'on constate à l'établi, distinct de l'explication générale */
.rmg .rmg-atelier {
  margin: 2em 0;
  padding: .25em 0 .25em 1.25em;
  border-left: 3px solid var(--rmg-red);
}
.rmg .rmg-atelier h3 {
  margin: 0 0 .35em;
  font-size: 1em;
}
.rmg .rmg-atelier p:last-child { margin-bottom: 0; }

/* Schémas : dessins SVG dans la page, lisibles au téléphone */
.rmg .rmg-schema {
  margin: 2em 0 2.25em;
}
.rmg .rmg-schema svg {
  display: block;
  width: 100%;
  max-width: 40em;
  height: auto;
}
.rmg .rmg-schema figcaption {
  margin-top: .6em;
  color: var(--rmg-muted);
  font-size: .9375em;
  line-height: 1.5;
}

/* Tableaux : défilement horizontal dans leur cadre seulement */
.rmg .rmg-table {
  margin: 1.5em 0 2em;
  overflow-x: auto;
}
.rmg .rmg-table table {
  width: 100%;
  min-width: 32em;
  border-collapse: collapse;
  font-size: .9375em;
  line-height: 1.5;
}
.rmg .rmg-table th,
.rmg .rmg-table td {
  padding: .6em .75em;
  border-bottom: 1px solid var(--rmg-line);
  text-align: left;
  vertical-align: top;
}
.rmg .rmg-table thead th {
  color: var(--rmg-ink);
  font-family: Poppins, Arial, sans-serif;
  font-weight: 600;
  border-bottom: 2px solid var(--rmg-ink);
}
.rmg .rmg-table tbody th { color: var(--rmg-ink); font-weight: 600; }

/* Questions fréquentes : <details class="rmg-q"> */
.rmg .rmg-faq { margin-top: 3em; }
.rmg .rmg-q { border-top: 1px solid var(--rmg-line); }
.rmg .rmg-q:last-child { border-bottom: 1px solid var(--rmg-line); }
.rmg .rmg-q summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
  min-height: 3em;
  padding: .6em 0;
  color: var(--rmg-ink);
  font: 600 1.0625em/1.4 Poppins, Arial, sans-serif;
  cursor: pointer;
  list-style: none;
}
.rmg .rmg-q summary::-webkit-details-marker { display: none; }
.rmg .rmg-q summary::after {
  content: "+";
  flex: none;
  width: 1.5em;
  color: var(--rmg-red);
  font-size: 1.5em;
  font-weight: 400;
  line-height: 1;
  text-align: center;
}
.rmg .rmg-q[open] summary::after { content: "\2212"; }
.rmg .rmg-q > :not(summary) { margin: 0 0 1em; }

/* Passer à l'atelier */
.rmg .rmg-cta {
  margin: 3em 0 0;
  padding: 1.75em 1.5em;
  background: #000;
  color: #fff;
  border-radius: 4px;
}
.rmg .rmg-cta h2 {
  margin: 0 0 .5em;
  color: #fff !important;
  font: 600 1.375em/1.3 Poppins, Arial, sans-serif;
}
.rmg .rmg-cta p { margin: 0 0 1.25em; color: #e4e7ea; }
.rmg .rmg-cta .rmg-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75em;
  margin: 0;
}
.rmg .rmg-btn,
.rmg .rmg-btn:hover,
.rmg .rmg-btn:focus {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: .5em 1.25em;
  border: 2px solid #fff !important;
  border-radius: 4px;
  color: #fff !important;
  background: transparent !important;
  font: 600 1em/1.2 Poppins, Arial, sans-serif;
  text-decoration: none !important;
}
.rmg .rmg-btn:hover { background: #fff !important; color: #000 !important; }
.rmg .rmg-btn-main,
.rmg .rmg-btn-main:focus {
  border-color: var(--rmg-red) !important;
  background: var(--rmg-red) !important;
}
.rmg .rmg-btn-main:hover {
  border-color: #fff !important;
  background: #fff !important;
  color: #000 !important;
}

/* À lire ensuite */
.rmg .rmg-next { margin-top: 2.5em; }
.rmg .rmg-next h2 {
  margin: 0 0 .5em;
  color: var(--rmg-ink) !important;
  font: 600 1.25em/1.3 Poppins, Arial, sans-serif;
}
.rmg .rmg-next ul { margin: 0; padding: 0; }
.rmg .rmg-next li {
  list-style: none;
  padding: .9em 0;
  border-bottom: 1px solid var(--rmg-line);
}
.rmg .rmg-next li a { font: 600 1.0625em/1.4 Poppins, Arial, sans-serif; }
.rmg .rmg-next li p { margin: .25em 0 0; color: var(--rmg-muted); font-size: .9375em; line-height: 1.5; }

/* ---------------------------------------------------------------- page d'accueil des guides */

.rmg-hub {
  max-width: 72em;
  margin: 0 auto;
  padding: 1.5em 0 3em;
  font-size: 16px;
  line-height: 1.6;
}
.rmg-hub .rmg-hub-head { max-width: 46em; margin-bottom: 2.5em; }
.rmg-hub .rmg-hub-head p { margin: 0; font-size: 1.125em; line-height: 1.6; color: var(--rmg-text); }

.rmg-hub .rmg-group {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1em 3em;
  padding: 2em 0;
  border-top: 2px solid var(--rmg-ink);
}
.rmg-hub .rmg-group-head h2 {
  margin: 0 0 .35em;
  color: var(--rmg-ink) !important;
  font: 600 1.375em/1.25 Poppins, Arial, sans-serif;
  text-transform: none;
}
.rmg-hub .rmg-group-head p { margin: 0; color: var(--rmg-muted); }

.rmg-hub a.rmg-pilier,
.rmg-hub a.rmg-pilier:hover {
  display: block;
  margin-bottom: 1.25em;
  padding: 1.25em 1.5em;
  background: var(--rmg-steel) !important;
  border: 0 !important;
  border-left: 4px solid var(--rmg-red) !important;
  color: var(--rmg-text) !important;
  text-decoration: none !important;
}
.rmg-hub .rmg-pilier-tag { display: block; color: var(--rmg-muted); font-size: .875em; }
.rmg-hub .rmg-pilier-title {
  display: block;
  margin: .2em 0 .4em;
  color: var(--rmg-ink);
  font: 600 1.375em/1.3 Poppins, Arial, sans-serif;
}
.rmg-hub a.rmg-pilier:hover .rmg-pilier-title { color: var(--rmg-red); }
.rmg-hub .rmg-pilier-desc { display: block; font-size: 1em; }

.rmg-hub .rmg-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0 2em;
  margin: 0;
  padding: 0;
}
.rmg-hub .rmg-list li { list-style: none; padding: .75em 0; border-bottom: 1px solid var(--rmg-line); }
.rmg-hub .rmg-list a { font: 600 1.0625em/1.4 Poppins, Arial, sans-serif; }
.rmg-hub .rmg-list p { margin: .25em 0 0; color: var(--rmg-muted); font-size: .9375em; line-height: 1.5; }

@media (min-width: 900px) {
  .rmg-hub .rmg-group { grid-template-columns: 16em minmax(0, 1fr); }
  .rmg-hub .rmg-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------------------------------------------------------------- fiche produit : guides liés */

.rmg-prod {
  clear: both;
  margin: 2.5em 0 1em;
  padding-top: 1.5em;
  border-top: 2px solid var(--rmg-ink);
  font-size: 16px;
  line-height: 1.6;
}
.rmg-prod h2 {
  margin: 0 0 .75em;
  color: var(--rmg-ink) !important;
  font: 600 1.25em/1.3 Poppins, Arial, sans-serif;
  text-transform: none;
}
.rmg-prod ul {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0 2.5em;
  margin: 0;
  padding: 0;
}
.rmg-prod li {
  list-style: none;
  padding: .9em 0;
  border-bottom: 1px solid var(--rmg-line);
}
.rmg-prod li a,
.rmg-prod .rmg-prod-all a {
  color: var(--rmg-red) !important;
  text-decoration: underline;
  text-underline-offset: .15em;
}
.rmg-prod li a { font: 600 1.0625em/1.4 Poppins, Arial, sans-serif; }
.rmg-prod li a:hover,
.rmg-prod .rmg-prod-all a:hover { color: var(--rmg-red-dark) !important; }
.rmg-prod a:focus-visible { outline: 3px solid var(--rmg-red); outline-offset: 2px; }
.rmg-prod li p { margin: .25em 0 0; color: var(--rmg-muted); font-size: .9375em; line-height: 1.5; }
.rmg-prod .rmg-prod-all { margin: 1em 0 0; font-size: .9375em; }
.rmg-prod .rmg-prod-all a { display: inline-block; min-height: 44px; line-height: 44px; }

@media (min-width: 900px) {
  .rmg-prod ul { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rmg-prod li { border-bottom: 0; border-top: 1px solid var(--rmg-line); }
}