/* Pages internes de Revue Assurance.
   Un conteneur de 1160 px, un en-tête pleine largeur, du texte en colonne
   de 68 caracteres au plus et des grilles sur toute la largeur. */
body { background: var(--c-fond); color: var(--c-texte); font-family: var(--f-texte); margin: 0; }
img { max-width: 100%; height: auto; }
h1, h2, h3, h4 { font-family: var(--f-titre); color: var(--c-texte); letter-spacing: -.02em; }
a { color: var(--c-primaire-texte); }

.rap-page { width: min(100% - 2rem, 1160px); margin: 0 auto; padding: 2.5rem 0 4rem; }
.rap-page-large { width: min(100% - 2rem, 1200px); }

.rap-entete {
  width: 100vw; margin-left: calc(50% - 50vw);
  background: var(--c-fond-2); border-bottom: 1px solid var(--c-bord);
  padding: 3rem 0 2.5rem; margin-bottom: 2.5rem;
}
.rap-entete-in { width: min(100% - 2rem, 1160px); margin: 0 auto; }
.rap-entete h1 { font-size: clamp(1.9rem, 4vw, 3rem); font-weight: 700; line-height: 1.08; margin: 0 0 1rem; }
.rap-chapo { font-size: 1.125rem; line-height: 1.7; color: var(--c-texte-2); max-width: 68ch; margin: 0; }
.rap-kicker {
  font-family: var(--f-titre); font-size: .75rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em; color: var(--c-primaire-texte); margin: 0 0 .75rem;
}
.rap-fil { font-size: .8125rem; color: var(--c-texte-2); margin: 0 0 1rem; }
.rap-fil a { text-decoration: none; }
.rap-fil a:hover { text-decoration: underline; }

.rap-texte { max-width: 68ch; }
.rap-texte p, .rap-page > p { line-height: 1.75; }
.rap-page h2 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); margin: 2.5rem 0 1rem; }
.rap-page h3 { font-size: 1.2rem; margin: 2rem 0 .75rem; }
.rap-page ul, .rap-page ol { line-height: 1.75; padding-left: 1.25rem; }
.rap-page li { margin-bottom: .5rem; }

/* Plancher de lecture (garde du parc 30/09/2026) : `page_cassee:colonne_etroite` refuse un texte de
   60 caractères et plus dans une boîte de moins de 300 px. Quatre colonnes de 18rem dans la boîte que
   le thème impose ici (main 1280 px moins la marge intérieure = 1248 px, `.rap-page` étant plus
   spécifique mais perdant sur `main:not(.use-utility-layout)`) laissaient 244 px de texte, à 1440
   comme à 1920 : /services/, /equipe/, /a-propos/ et /temoignages/ étaient rouges. Une carte de trois
   colonnes fait 400 px et son paragraphe 352 px. */
.rap-grille { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); }
.rap-carte {
  background: var(--c-doux); border: var(--carte-bord); border-radius: var(--r-carte);
  padding: 1.5rem; box-shadow: var(--o-carte); display: grid; gap: .75rem; align-content: start;
}
.rap-carte h3 { margin: 0; font-size: 1.0625rem; }
.rap-carte p { margin: 0; color: var(--c-texte-2); font-size: .9375rem; line-height: 1.65; }
.rap-carte img { border-radius: var(--r-image); width: 100%; object-fit: cover; }

.rap-btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px;
  padding: .7rem 1.25rem; border-radius: var(--r-bouton); font-family: var(--f-titre);
  font-weight: 600; text-decoration: none; background: var(--c-primaire);
  color: var(--c-sur-primaire); border: 2px solid var(--c-primaire);
}
.rap-btn:hover { background: var(--c-primaire-fonce); border-color: var(--c-primaire-fonce); }
.rap-btn-2 { background: transparent; color: var(--c-primaire-texte); }
.rap-btn-2:hover { background: var(--c-doux); color: var(--c-primaire-texte); }

.rap-liste-posts { display: grid; gap: 2rem; }
.rap-post { display: grid; gap: 1.25rem; border-bottom: 1px solid var(--c-bord); padding-bottom: 2rem; }
@media (min-width: 720px) { .rap-post { grid-template-columns: minmax(0, 280px) minmax(0, 1fr); align-items: start; } }
.rap-post img { border-radius: var(--r-image); width: 100%; height: auto; object-fit: cover; display: block; }
.rap-post h3 { margin: 0 0 .5rem; font-size: 1.3rem; }
.rap-post h3 a { text-decoration: none; color: var(--c-texte); }
.rap-post h3 a:hover { color: var(--c-primaire-texte); }
.rap-meta { font-size: .8125rem; color: var(--c-texte-2); margin: 0 0 .75rem; }
.rap-tag {
  display: inline-block; font-size: .8125rem; padding: .25rem .75rem; border-radius: var(--r-tag);
  background: rgba(11, 45, 218, .10); border: 1px solid rgba(11, 45, 218, .30);
  color: var(--c-primaire-texte); text-decoration: none; margin-bottom: .75rem;
}

.rap-portrait { border-radius: var(--r-image); width: 100%; max-width: 260px; aspect-ratio: 4/5; object-fit: cover; display: block; }

.rap-champ { display: grid; gap: .35rem; margin-bottom: 1.25rem; }
.rap-champ label { font-weight: 500; }
.rap-champ input, .rap-champ textarea, .rap-champ select {
  font: inherit; color: var(--c-texte); background: var(--c-surface);
  border: 1px solid var(--c-bord); border-radius: var(--r-bouton); padding: .75rem .9rem; min-height: 44px; width: 100%;
}
.rap-champ textarea { min-height: 180px; resize: vertical; }
.rap-miel { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.rap-note { font-size: .875rem; color: var(--c-texte-2); max-width: 68ch; }
.rap-tableau { width: 100%; border-collapse: collapse; }
.rap-tableau th, .rap-tableau td { text-align: left; padding: .75rem; border-bottom: 1px solid var(--c-bord); vertical-align: top; }
.rap-tableau th { font-family: var(--f-titre); }

.rap-encadre {
  background: var(--c-doux); border-left: 4px solid var(--c-primaire);
  border-radius: var(--r-carte); padding: 1.5rem; max-width: 68ch;
}
@media (max-width: 640px) { .rap-entete { padding: 2rem 0 1.75rem; } .rap-page { padding-top: 1.5rem; } }

/* Liste d'une rubrique en cartes du thème : jamais de rangée orpheline
   (1, 2, 3 et 4 articles sont couverts ; toute autre taille retombe sur 1 colonne). */
.rap-liste-articles { display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 1fr); }
.rap-carte-post { padding: 1.25rem; }
.rap-carte-post h3 { margin: .25rem 0 .25rem; font-size: 1.2rem; line-height: 1.2; }
.rap-carte-post h3 a { color: var(--c-primaire-texte); text-decoration: none; }
.rap-carte-post h3 a:hover { text-decoration: underline; }
.rap-carte-post img { aspect-ratio: 16 / 10; }
.rap-carte-post .rap-meta { margin: 0 0 .5rem; }
.rap-carte-post .rap-meta a { color: var(--c-primaire-texte); }
.rap-carte-suite { margin: 0; font-weight: 600; }
@media (min-width: 700px) {
  .rap-liste-articles:has(> :nth-child(2)):not(:has(> :nth-child(3))),
  .rap-liste-articles:has(> :nth-child(4)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
  .rap-liste-articles:has(> :nth-child(3)):not(:has(> :nth-child(4))) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* Quatre colonnes laissaient 252 px de texte sous l'image dans les pages de rubrique
   (/posts/category/*/ à 1440 et 1920). Trois colonnes : 400 px de carte, 360 px de texte. */
@media (min-width: 1240px) {
  .rap-liste-articles:has(> :nth-child(4)) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Icône Lucide dans une pastille teintée : cartes, étapes et listes des pages internes. */
.rap-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; flex: none; border-radius: 999px;
  background: rgba(11, 45, 218, .10); color: var(--c-primaire-texte);
  border: 1px solid rgba(11, 45, 218, .22);
}
.rap-ico svg { width: 22px; height: 22px; }
.rap-etapes { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: 1rem; }
.rap-etapes li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem; align-items: start; }
/* À 390 px, la pastille de 44 px mangeait la colonne de texte : 278 px pour un paragraphe de plus de
   200 caractères, sur /a-propos/ et sur les cinq pages de rubrique. L'icône passe AU-DESSUS du texte
   (à 358 px de carte, aucun resserrement de marge ne rattrape les 60 px de la pastille). */
@media (max-width: 640px) { .rap-etapes li { grid-template-columns: minmax(0, 1fr); } }
.rap-etapes .rap-etape-t { display: block; }
.rap-croisee { margin-top: 3rem; }
.rap-croisee .rap-grille { margin-bottom: 1.25rem; }
.rap-grille-3 { display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .rap-grille-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.rap-lien-equipe { font-weight: 600; }


/* ─── Rubrique (gabarit de catégorie) : couverture, blocs, CTA final ─── */
.rap-couverture { margin: 2rem 0 0; }
.rap-couverture img {
  width: 100%; height: auto; aspect-ratio: 16 / 9; max-height: 420px;
  object-fit: cover; border-radius: var(--r-image); display: block;
}
.rap-bloc { margin-top: 3rem; }
.rap-bloc > h2:first-child { margin-top: 0; }
.rap-etape-t { display: block; }
.rap-etape-t strong { display: block; color: var(--c-texte); margin-bottom: .2rem; }
.rap-etape-x { display: block; color: var(--c-texte-2); font-size: .9375rem; line-height: 1.7; max-width: 68ch; }
.rap-final {
  display: grid; gap: 1rem; justify-items: start;
  padding: 2.5rem; border-radius: var(--r-carte);
  background: var(--c-doux); color: var(--c-sur-doux);
}
.rap-final h2 { margin: 0; color: var(--c-sur-doux); }
.rap-final p { margin: 0; max-width: 68ch; line-height: 1.75; color: var(--c-sur-doux); }
.rap-final-actions { display: flex; flex-wrap: wrap; gap: .85rem; margin-top: .5rem; }
@media (max-width: 640px) { .rap-final { padding: 1.5rem; } }

/* 03/10 : carte sans image (article LinkCircle) : le texte prend toute la ligne, jamais la colonne image de 280 px */
.rap-post > div:only-child { grid-column: 1 / -1; }