/* ==========================================================================
   Portail d'aide Reservit — charte « Design Reservit »
   À coller dans Scroll Sites > Thème > CSS personnalisé (remplace l'existant).
   Thème : Scroll Sites Help Center v53. Pour revenir en arrière : vider ce champ.
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap");

/* 1. Jetons de la charte + branchement sur les variables du thème
   (le thème expose --theme-* : on ne touche qu'à elles autant que possible) */
:root {
  --rv-turquoise: #23BFD1;          /* aplats ; texte turquoise sur encre seulement */
  --rv-encre-turquoise: #0F6E7A;    /* texte/liens turquoise sur fond clair */
  --rv-azur: #E4F7F9;
  --rv-encre: #1A2B32;
  --rv-encre-80: #44565E;
  --rv-gris: #EAF1F4;
  --rv-rayon: 26px;

  /* Pile complète : si Poppins ne charge pas (réseau filtré, bloqueur),
     le texte reste en police système sans serif au lieu de Times. */
  --theme-headline-font: "Poppins", ui-sans-serif, "Segoe UI", Helvetica, Arial, sans-serif;
  --theme-text-font: "Poppins", ui-sans-serif, "Segoe UI", Helvetica, Arial, sans-serif;
  --theme-text-scale: 1;
  /* Titres à l'échelle normale : le réglage actuel (120 %) donne des titres
     d'article sur 5 lignes. */
  --theme-headline-scale: 1;
}

:root[data-color-scheme="light"] {
  --theme-primary-color: var(--rv-encre-turquoise);
  --theme-on-primary-color: #FFFFFF;
  --theme-headline-color: var(--rv-encre);
  --theme-text-color: var(--rv-encre);   /* texte courant foncé : meilleur confort de lecture */
  --theme-header-background-color: var(--rv-encre);
  --theme-header-text-color: #FFFFFF;
  --theme-footer-background-color: var(--rv-encre);
  --theme-footer-text-color: #FFFFFF;
  --theme-banner-background-color: var(--rv-encre);
  --theme-banner-text-color: #FFFFFF;
  --theme-banner-image: none;
}

:root[data-color-scheme="dark"] {
  --theme-primary-color: var(--rv-turquoise);
  --theme-on-primary-color: var(--rv-encre);
  --theme-header-background-color: var(--rv-encre);
  --theme-header-text-color: #FFFFFF;
  --theme-footer-background-color: var(--rv-encre);
  --theme-footer-text-color: #FFFFFF;
  --theme-banner-background-color: var(--rv-encre);
  --theme-banner-text-color: #FFFFFF;
  --theme-banner-image: none;
}

/* 2. En-tête : encre sans filet blanc (le logo a du texte blanc, il lui faut un fond foncé) */
.header { --_header-border-color: transparent; }

/* 3. Bandeau d'accueil
   Clair : fond azur, texte encre, recherche blanche, filet turquoise (seul aplat turquoise).
   Sombre : fond encre, sous-titre turquoise. */
.banner {
  background-image: none;
  min-block-size: 0;
  border-block-end: 4px solid var(--rv-turquoise);
}
:root[data-color-scheme="light"] .banner { background: var(--rv-azur); }
:root[data-color-scheme="light"] .banner hgroup > * { color: var(--rv-encre); }
:root[data-color-scheme="light"] .banner hgroup > p { color: var(--rv-encre-80); }
:root[data-color-scheme="dark"] .banner { background: var(--rv-encre); }
:root[data-color-scheme="dark"] .banner hgroup > p { color: var(--rv-turquoise); }
/* Bandeau moins haut : la recherche arrive plus vite à l'écran */
.banner:has(hgroup) { padding-block: 2.5lh; }
.banner hgroup > h1 { font-weight: 600; letter-spacing: -0.01em; }
.banner hgroup > p  { font-weight: 400; }

/* 4. Cartes et accordéons : rayon 26 px, bordure douce, survol azur */
.tile,
.accordion {
  border-radius: var(--rv-rayon);
}
:root[data-color-scheme="light"] .tile,
:root[data-color-scheme="light"] .accordion {
  border-color: #D3E3E8;
  box-shadow: 0 1px 2px rgba(26, 43, 50, .06), 0 6px 20px rgba(26, 43, 50, .05);
}
:root[data-color-scheme="light"] .tile:has(.tile-title a:is(:hover, :focus-visible)) {
  background-color: var(--rv-azur);
  border-color: var(--rv-encre-turquoise);
}
.tile-title { font-weight: 600; color: var(--rv-encre-turquoise); }
:root[data-color-scheme="dark"] .tile-title { color: var(--rv-turquoise); }
.accordion hgroup > h3 { font-weight: 500; }

/* 5. Menu latéral : page en cours signalée sans gros aplat */
:root[data-color-scheme="light"] .tree-item-header:has(> [aria-current="page"]) {
  background-color: var(--rv-azur);
  color: var(--rv-encre-turquoise);
  font-weight: 500;
}

/* 6. Contenu des articles : lisibilité avant tout */
.article-body { font-size: 1rem; line-height: 1.7; }
.article-body :is(p, li) { max-inline-size: 75ch; }       /* lignes pas trop longues */
.fb-layout-container > header > h1,
.article-body h1 { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.1rem); line-height: 1.25; font-weight: 600; }
.article-body h2 { font-weight: 600; }
.article-body strong { font-weight: 600; color: var(--rv-encre); }
:root[data-color-scheme="dark"] .article-body strong { color: inherit; }
.article-body a { text-decoration: underline; text-underline-offset: .2em; }
:root[data-color-scheme="light"] .article-body a { color: var(--rv-encre-turquoise); }
/* Captures d'écran détachées du texte */
.article-body .block-image img {
  border: 1px solid #D3E3E8;
  border-radius: 8px;
}

/* 7. Variante de bannière : azur + épingles */
:root[data-color-scheme="light"] .banner {
  background:
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20240%20300%22%3E%3Cg%20transform%3D%22translate%2890%20110%29%20rotate%288%29%20scale%281.5%29%22%3E%3Cpath%20d%3D%22M0-40C-22-40-40-22-40%200c0%2030%2040%2064%2040%2064S40%2030%2040%200C40-22%2022-40%200-40z%22%20fill%3D%22%2323BFD1%22/%3E%3Ccircle%20r%3D%2214%22%20fill%3D%22%23E4F7F9%22/%3E%3C/g%3E%3Cg%20transform%3D%22translate%28190%20215%29%20rotate%2818%29%20scale%281.15%29%22%3E%3Cpath%20d%3D%22M0-40C-22-40-40-22-40%200c0%2030%2040%2064%2040%2064S40%2030%2040%200C40-22%2022-40%200-40z%22%20fill%3D%22%23F7941E%22/%3E%3Ccircle%20r%3D%2214%22%20fill%3D%22%23E4F7F9%22/%3E%3C/g%3E%3C/svg%3E") no-repeat right -50px top -30px / 240px auto,
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20200%20240%22%3E%3Cg%20transform%3D%22translate%2890%20140%29%20rotate%28-14%29%20scale%281.4%29%22%3E%3Cpath%20d%3D%22M0-40C-22-40-40-22-40%200c0%2030%2040%2064%2040%2064S40%2030%2040%200C40-22%2022-40%200-40z%22%20fill%3D%22%23DC1567%22/%3E%3Ccircle%20r%3D%2214%22%20fill%3D%22%23E4F7F9%22/%3E%3C/g%3E%3C/svg%3E") no-repeat left -40px bottom -70px / 200px auto,
    var(--rv-azur);
}
:root[data-color-scheme="dark"] .banner {
  background:
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20240%20300%22%3E%3Cg%20transform%3D%22translate%2890%20110%29%20rotate%288%29%20scale%281.5%29%22%3E%3Cpath%20d%3D%22M0-40C-22-40-40-22-40%200c0%2030%2040%2064%2040%2064S40%2030%2040%200C40-22%2022-40%200-40z%22%20fill%3D%22%2323BFD1%22/%3E%3Ccircle%20r%3D%2214%22%20fill%3D%22%231A2B32%22/%3E%3C/g%3E%3Cg%20transform%3D%22translate%28190%20215%29%20rotate%2818%29%20scale%281.15%29%22%3E%3Cpath%20d%3D%22M0-40C-22-40-40-22-40%200c0%2030%2040%2064%2040%2064S40%2030%2040%200C40-22%2022-40%200-40z%22%20fill%3D%22%23F7941E%22/%3E%3Ccircle%20r%3D%2214%22%20fill%3D%22%231A2B32%22/%3E%3C/g%3E%3C/svg%3E") no-repeat right -50px top -30px / 240px auto,
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20200%20240%22%3E%3Cg%20transform%3D%22translate%2890%20140%29%20rotate%28-14%29%20scale%281.4%29%22%3E%3Cpath%20d%3D%22M0-40C-22-40-40-22-40%200c0%2030%2040%2064%2040%2064S40%2030%2040%200C40-22%2022-40%200-40z%22%20fill%3D%22%23DC1567%22/%3E%3Ccircle%20r%3D%2214%22%20fill%3D%22%231A2B32%22/%3E%3C/g%3E%3C/svg%3E") no-repeat left -40px bottom -70px / 200px auto,
    var(--rv-encre);
}
@media (max-width: 1240px) {
  :root[data-color-scheme] .banner { background-size: 170px auto, 150px auto, auto; }
}
@media (max-width: 960px) {
  :root[data-color-scheme="light"] .banner { background: var(--rv-azur); }
  :root[data-color-scheme="dark"] .banner { background: var(--rv-encre); }
}