/* ─────────────────────────────────────────────────────────────────────────────
   Feuille propre au site — Je Réenchante ma Vie ASBL (OK7e2P4zcLyd)

   Servie par inc/css.php?p=site, APRÈS maincss (voir __commonv3/_css.php,
   « case 'site' »). Elle ne fait que ce que cfg.site.php ne sait pas faire :
   les couleurs restent dans cfg.site.php, onglet Paramètres généraux.

   Principe (décision du 2026-09-16) : le site garde l'âme du RWS. On surcharge
   le moins possible — des polices, deux utilitaires, et une correction de
   lisibilité que la palette seule ne peut pas faire (voir le dernier bloc).

   ⚠️ L'@import DOIT RESTER LA PREMIÈRE INSTRUCTION. Placé plus bas, il est
   ignoré sans message, et le site retombe sur les polices du socle.
   ⚠️ Un url() relatif se résout depuis inc/ : écrire « url("../img/…") ».
   ⚠️ Ce fichier est lu, jamais exécuté : aucun PHP n'y a d'effet.
   ───────────────────────────────────────────────────────────────────────────── */
@import url("https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Lato:wght@400;700&family=Caveat:wght@400;600&display=swap");

/* ─── Polices — les trois variables que maincss.php fixe en dur ───────────────
   Charte : EB Garamond pour les titres et le texte, Lato pour le menu.
   ⚠️ À valider à l'écran. Si le texte courant se lit mal en serif, passer
   --default-font sur "Lato" : une ligne, rien d'autre à toucher.
   La police manuscrite de la charte (Yellowtail) est écartée des titres :
   peu lisible, et étrangère au RWS. */
:root {
  --default-font: "EB Garamond", Georgia, "Times New Roman", serif;
  --heading-font: "EB Garamond", Georgia, "Times New Roman", serif;
  --nav-font: "Lato", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

/* ─── Citation manuscrite ─────────────────────────────────────────────────────
   Caveat, réservée aux phrases courtes : citations et formules de clôture
   (« Ensemble pour un monde plus vivant »). JAMAIS pour un paragraphe.
   Usage : <p class="jrmv-citation">« … »</p> */
.jrmv-citation {
  font-family: "Caveat", "Segoe Print", cursive;
  font-size: 1.75rem;
  line-height: 1.3;
  color: var(--heading-color);
}

/* ─── Les trois pôles ─────────────────────────────────────────────────────────
   Posée sur un conteneur (une page, une carte), la classe redéfinit l'ACCENT
   pour tout ce qu'il contient : boutons, liens et pictogrammes du RWS prennent
   la couleur du pôle sans règle de plus, puisque maincss.php les dessine tous
   avec var(--accent-color).
   Une couleur de pôle par conteneur — la charte interdit de les mélanger. */
.pole-sante  { --accent-color: #8A4A28; }
.pole-art    { --accent-color: #C3102A; }
.pole-nature { --accent-color: #1C5A38; }

/* ─── « Contraste » dans les cartes — 2026-09-16 ──────────────────────────────
   maincss.php emploie --contrast-color pour DEUX choses opposées :
     · le texte posé SUR L'ACCENT — boutons, encart du contact, bouton de cta ;
     · le texte posé SUR LES SURFACES CLAIRES — cartes de « services »
       (.service-card, son titre, son pictogramme) et de « cards » (.feature-box
       sur fond pastel).
   Un site à accent CLAIR (Kikai) règle les deux avec une teinte sombre. Ici
   l'accent est un vert FONCÉ : le contraste doit être clair (blanc sur bouton
   vert, 8,17:1), et les cartes sortiraient alors blanc sur crème — illisibles.
   Dans ces deux sections seulement, le contraste reprend donc la couleur des
   TITRES du préréglage de la section : bleu nuit sur fond clair, crème sur fond
   sombre. Aucune des deux sections ne pose de texte sur l'accent.
   ⚠️ Même spécificité que .light-background / .dark-background, posées sur le
   même élément : c'est l'ordre de chargement qui décide, d'où ce fichier APRÈS
   maincss. */
.services,
.features-cards { --contrast-color: var(--heading-color); }

/* ─── Cartes « services » sans fond de section — 2026-09-16 ───────────────────
   Depuis l'inversion services / html2, « services » porte « En ce moment » et
   n'a PAS de fond (alternance des sections). Ses cartes (--surface-color
   #FEFDFA) se posaient alors sur le crème #FBF9F2 sans aucun bord : invisibles.
   Même ombre que « shadow-sm » de Bootstrap, celle des cartes des pages et de
   « Nos pôles » ; le survol du thème (0 0 15px) reste plus marqué. */
.services .service-card { box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); }

/* ─── Titre du carrousel — 2026-09-16 ─────────────────────────────────────────
   maincss.php impose « .intro-slider h2 { color: var(--default-color) !important } »
   — la couleur du TEXTE COURANT, posée sur une PHOTO. Elle passe sur un site à
   texte clair ; ici le texte courant est bleu nuit, et le titre sortait bleu sur
   l'image, en écrasant même le « text-white » du gabarit.
   Le titre reprend donc --contrast-color (#FFFFFF à la racine), la couleur prévue
   pour être lue sur un fond coloré. Le !important est obligatoire : c'est le seul
   moyen de passer devant celui de maincss, que ce fichier suit dans la cascade.
   ⚠️ La lisibilité réelle dépend de la PHOTO et du voile (« Voile du carrousel »,
   Paramètres généraux, rgba(0, 0, 0, 0.3)) : à remesurer au §8 avec les vraies
   images, et à foncer si nécessaire. */
.intro-slider h2 { color: var(--contrast-color) !important; }

/* ─── Pages secondaires — 2026-09-16 ──────────────────────────────────────────
   Trois utilitaires pour inc/page1..4_FR.php. L'en-tête des pages, lui, reprend
   « .page-title » du thème (170 px en haut : il dégage la barre fixe, ce que le
   « py-5 » du corps de démonstration ne faisait pas — le h1 passait dessous).

   · .jrmv-btn — le bouton d'action. maincss.php ne dessine « .btn-primary » que
     dans .hero et .pricing : ailleurs il sort en bleu Bootstrap. Même dessin que
     celui du hero, donc accent + contraste : posé dans un conteneur .pole-*, il
     prend la couleur du pôle (blanc sur brun 6,79 · carmin 6,13 · vert 8,17 ; survol plus foncé, donc mieux).
   · .jrmv-pastille — le pictogramme dans un disque teinté de l'accent.
   · .jrmv-poles — le bandeau de clôture : liens vers les trois pôles, texte en
     couleur courante (un lien prendrait l'accent, illisible sur fond sombre). */
.jrmv-btn {
  display: inline-block;
  background-color: var(--accent-color);
  color: var(--contrast-color);
  padding: 0.75rem 2rem;
  border-radius: 50px;
  font-family: var(--nav-font);
  font-weight: 700;
  text-decoration: none;
  transition: background-color 0.3s ease;
}
.jrmv-btn:hover,
.jrmv-btn:focus {
  background-color: color-mix(in srgb, var(--accent-color), black 20%);
  color: var(--contrast-color);
}
.jrmv-pastille {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  font-size: 1.75rem;
  color: var(--accent-color);
  background-color: color-mix(in srgb, var(--accent-color), transparent 85%);
}
.jrmv-poles a { color: var(--default-color); text-decoration: none; }
.jrmv-poles .jrmv-pastille { color: var(--contrast-color); background-color: var(--accent-color); }
.jrmv-poles a:hover .jrmv-pastille,
.jrmv-poles a:focus .jrmv-pastille { background-color: color-mix(in srgb, var(--accent-color), white 15%); }

/* ─── Section « contact » — 2026-09-17 ────────────────────────────────────────
   Deux défauts du gabarit __commonv3/contact.php, qui n'emploie pas les règles
   « .contact » de maincss.php mais des styles EN LIGNE :
   · la carte est émise SANS CONDITION — « <iframe src=""> » quand la clé gmap
     est vide, soit un cadre blanc de 270 px sous les coordonnées ;
   · les trois pictogrammes et le bouton d'envoi sont en bleu Bootstrap #0d6efd
     écrit en dur, étranger à la palette — et maincss.php reprend ce bleu en
     rgba(13, 110, 253, …) sur le disque des pictogrammes, la bordure et l'ombre
     des deux cartes (« 4. » et le bloc qui précède, dans maincss.php).
   ⚠️ Le !important est obligatoire sur les couleurs du gabarit : c'est le seul
   moyen de passer devant un attribut style=. Il l'est aussi sur la bordure et
   l'ombre, que maincss.php déclare déjà en !important — à égalité, c'est l'ordre
   de chargement qui tranche, d'où ce fichier APRÈS maincss.
   Ces défauts sont à corriger dans le socle (project/TODO.md) ; ces règles
   deviendront alors sans effet.
   Contrastes mesurés à l'écran : bouton blanc sur vert 8,17:1 ; pictogramme
   vert sur la carte 8,17:1, au-dessus du seuil de 3:1 d'un élément graphique.
   ⚠️ Non traité, parce que ce n'est pas du bleu : les deux cartes restent en
   #ffffff !important, là où la charte veut la surface #FEFDFA. */
.contact iframe[src=""] { display: none; }
.contact .info-item .bi {
  color: var(--accent-color) !important;
  background: color-mix(in srgb, var(--accent-color), transparent 90%);
}
.contact .info-wrap,
.contact .php-email-form {
  box-shadow: 0 15px 35px color-mix(in srgb, var(--accent-color), transparent 95%) !important;
  border: 1px solid color-mix(in srgb, var(--accent-color), transparent 90%) !important;
}
.contact .php-email-form button[type="submit"] {
  background: var(--accent-color) !important;
  color: var(--contrast-color) !important;
}
.contact .php-email-form button[type="submit"]:hover,
.contact .php-email-form button[type="submit"]:focus {
  background: color-mix(in srgb, var(--accent-color), black 20%) !important;
}