/* ===================================================================
   Thème « Agence Communication Montpellier » — identité visuelle propre.
   Chargé APRÈS planeo.css : redéfinit les variables et retouche les
   composants pour un rendu éditorial chaud (terracotta / crème, titres
   serif), radicalement différent de la charte d'origine.
   =================================================================== */

:root{
  /* Accent chaud (remplace le bleu) — on réutilise les noms de variables. */
  --blue:#DC5A2E;          /* accent terracotta */
  --blue-deep:#B23F1B;     /* survols / liens */
  --blue-light:#F7E7DE;    /* fonds, encarts */
  --navy:#2A2521;          /* structure sombre chaude (header sombre / footer) */
  --ink:#201D18;           /* texte courant */
  --slate:#6E655A;         /* texte secondaire (taupe) */
  --slate-soft:#A89C8B;
  --line:#E8DECF;          /* filets */
  --bg-soft:#F3ECE0;       /* fonds clairs */
  --bg:#FBF7F0;            /* fond crème */
  --white:#FFFFFF;

  /* Angles plus nets + ombres chaudes */
  --radius:6px; --radius-sm:4px; --radius-pill:999px;
  --shadow-sm:0 1px 2px rgba(42,37,33,.06);
  --shadow:0 14px 34px rgba(42,37,33,.10);
  --shadow-lg:0 24px 60px rgba(42,37,33,.16);

  /* Typographie : titres serif éditoriaux, corps sans, labels mono */
  --font:"Manrope", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --mono:"IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --display:"Iowan Old Style","Palatino Linotype","Palatino","Book Antiqua",Georgia,"Times New Roman",serif;
}

/* ---- Titres en serif ---- */
h1,h2,h3,h4,.h-section,.page-hero h1,.card h3{
  font-family:var(--display);
  font-weight:700;
  letter-spacing:-.01em;
  line-height:1.12;
}
.card h3{font-weight:700}

/* ---- Fond général crème ---- */
body{background:var(--bg)}

/* ---- En-tête : barre crème translucide, filet bas discret ---- */
.site-header{background:rgba(251,247,240,.88)}
.site-header.scrolled{box-shadow:0 6px 24px rgba(42,37,33,.07)}
.nav-list>li>a:hover{background:var(--bg-soft);color:var(--blue-deep)}

/* ---- Kicker : petite étiquette mono en accent ---- */
.kicker{color:var(--blue-deep)}
.kicker--line::after{background:var(--blue)}

/* ---- Hero : dégradé chaud + halo terracotta ---- */
.page-hero{background:linear-gradient(180deg,var(--blue-light),var(--bg) 82%);border-bottom:1px solid var(--line)}
.page-hero::before{background:radial-gradient(circle,rgba(220,90,46,.14),rgba(220,90,46,0) 60%)}

/* ---- Boutons ---- */
.btn{border-radius:var(--radius)}
.btn-primary{background:var(--blue);box-shadow:0 8px 22px rgba(220,90,46,.26)}
.btn-primary:hover{background:var(--blue-deep);box-shadow:0 12px 26px rgba(220,90,46,.32)}
.btn-ghost:hover{border-color:var(--blue);color:var(--blue-deep)}

/* ---- Cartes : angles nets, filet supérieur qui s'accentue au survol ---- */
.card{background:#fff;border:1px solid var(--line);border-top:3px solid var(--line);border-radius:var(--radius)}
.card:hover{border-color:#e0d3bf;border-top-color:var(--blue);box-shadow:var(--shadow);transform:translateY(-3px)}
.card .num{color:var(--blue)}

/* ---- FAQ (couleurs d'icône) ---- */
.faq-q .ico{background:var(--blue-light);color:var(--blue-deep)}
.faq-item.open .faq-q .ico{background:var(--blue);color:#fff}

/* ---- Encart « En bref » (défini en inline) — s'harmonise via variables ---- */

/* ---- Pied de page : fond sombre chaud, textes taupe clair ---- */
.site-footer{background:var(--navy);color:#CDBEAC}
.footer-base{color:#D8A98F}
.footer-tag{color:#B7A895}
.footer-h{color:#fff}
.footer-contact,.footer-contact a{color:#D8CBBA}
.footer-contact a:hover{color:#fff}
.site-footer ul a{color:#D8CBBA}
.site-footer ul a:hover{color:#fff}

/* ---- Wordmark : monogramme carré net ---- */
.brand-mono{border-radius:6px;background:var(--blue)}
.brand-name b{font-family:var(--display);font-weight:700}

/* ---- Liens de contenu en accent ---- */
.article-body a{color:var(--blue-deep);text-decoration:underline;text-underline-offset:2px}
.article-body a:hover{color:var(--blue)}