/* ============================================================
fwm-fiche.css · Charte graphique commune des fiches
French with Murielle
------------------------------------------------------------
Pour appliquer la charte à une fiche, ajoutez dans le :
(en-tête + pied auto)
La feuille fournit : polices, couleurs de marque, styles de base
(titres, texte, liens, tableaux responsives), la barre de marque,
le pied de page, et des composants réutilisables (.fwm-*).
============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;1,500;1,600&family=Jost:wght@300;400;500;600&display=swap');
:root{
/* Palette de marque */
--cream:#FCFBF7; --warm:#EDE0CC; --card:#ffffff;
--terracotta:#2C7C9C; --terra-light:#60BADA; --terra-pale:#E7F2F7;
--gold:#B8964A; --gold-light:#D4AF6A;
--navy:#281F2A; --text:#242424; --muted:#6A6560; --line:#E7DDCB;
--ok:#2E7D52; --okbg:#EAF3EC; --no:#B23B2E; --nobg:#F6E8E3;
/* Polices */
--serif:'Cormorant Garamond',Georgia,serif;
--sans:'Jost',-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
/* Alias (compatibilité avec les fiches existantes) */
--bg:var(--cream); --ink:var(--text); --accent:var(--terracotta); --accent2:var(--gold);
--hi1:var(--terra-pale); --hi2:var(--warm); --lock:#EFE7D8;
}
/* ---------- Base ---------- */
*{box-sizing:border-box}
html,body{overflow-x:hidden} /* jamais de débordement horizontal */
body{margin:0;background:var(--cream);color:var(--text);font:400 16px/1.6 var(--sans)}
h1,h2,h3{font-family:var(--serif);color:var(--navy);font-weight:600;line-height:1.2}
a{color:var(--terracotta)}
img,svg,video,iframe{max-width:100%}
input,textarea,select{max-width:100%}
/* Tableaux : sur mobile, ils défilent seuls au lieu d'élargir la page */
table{border-collapse:collapse}
@media (max-width:560px){
table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
}
/* ---------- Barre de marque (injectée par fwm-fiche.js) ---------- */
.fwm-topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
padding:12px 24px;background:var(--cream);border-bottom:1px solid var(--warm)}
.fwm-topbar .fwm-back{color:var(--terracotta);text-decoration:none;font-weight:500;font-size:.9rem;white-space:nowrap}
.fwm-topbar .fwm-back:hover{text-decoration:underline}
@media (max-width:560px){
.fwm-topbar{padding:10px 14px}
.fwm-topbar svg{width:170px;height:auto}
}
/* ---------- Pied de page (injecté par fwm-fiche.js) ---------- */
.fwm-footer{margin-top:40px;padding:22px 24px;background:var(--navy);color:#EDE7DC;
text-align:center;font-size:.85rem;font-family:var(--sans)}
.fwm-footer a{color:var(--terra-light);text-decoration:none}
.fwm-footer a:hover{text-decoration:underline}
.fwm-footer .fwm-brand{font-family:var(--serif);font-size:1.1rem}
.fwm-footer .fwm-brand em{color:var(--terra-light);font-style:italic}
/* ---------- Composants réutilisables (fiches futures) ---------- */
.fwm-wrap{max-width:820px;margin:0 auto;padding:24px}
@media (max-width:560px){ .fwm-wrap{padding:16px} }
.fwm-card{background:var(--card);border:1px solid var(--line);border-radius:14px;
padding:20px 22px;margin:16px 0;box-shadow:0 1px 3px rgba(0,0,0,.04)}
.fwm-btn{background:var(--terracotta);color:#fff;border:none;padding:10px 18px;border-radius:10px;
font:inherit;font-weight:600;cursor:pointer}
.fwm-btn:hover{background:#276B87}
.fwm-btn.sec{background:transparent;color:var(--terracotta);border:1px solid var(--terracotta)}
.fwm-badge{display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.03em;
padding:2px 9px;border-radius:20px;background:var(--terracotta);color:#fff;vertical-align:middle}
.fwm-badge.gold{background:var(--gold)}