/* ===================================================================
   Patrice Électricien Hyères — Override Charte « Méditerranée pro »
   Surcharge des CSS variables Source par les valeurs de charte.md
   Chargé après screen.css dans default.hbs
   =================================================================== */

:root {
  /* Palette charte (override des couleurs Source) */
  --color-bleu-principal: #0A4D68;
  --color-bleu-secondaire: #0F6B8C;
  --color-bleu-clair: #F0F4F8;
  --color-jaune-cta: #F7B538;
  --color-orange-hover: #E07A1F;

  /* Texte */
  --color-anthracite: #1F2937;
  --color-gris-clair: #4A5563;

  /* Fonds */
  --background-color: #FAFAF7;
  --color-fond-alt: #F0F4F8;

  /* Override variables Source */
  --color-darker-gray: var(--color-anthracite);
  --color-primary-text: var(--color-anthracite);
  --color-secondary-text: var(--color-gris-clair);

  /* Charte recommande Inter, déjà font-sans par défaut dans Source */

  /* Largeur prose articles (760px charte vs default Source) */
  --max-width-prose: 760px;
}

/* ===================================================================
   Body — taille 17px charte (confort lecture 60-80 ans)
   Source utilise 1.6rem (~16px), on passe à 1.7rem (~17px)
   =================================================================== */
body {
  font-size: 1.7rem;
  background-color: var(--background-color);
  color: var(--color-anthracite);
}

/* Source utilise html { font-size: 62.5% } donc 1rem = 10px */

/* ===================================================================
   Titres — bleu Méditerranée charte
   =================================================================== */
h1, h2, h3, h4, h5, h6,
.gh-article-title,
.gh-card-title,
.gh-feature-title,
.is-title {
  color: var(--color-bleu-principal);
  font-family: var(--gh-font-heading, var(--font-sans));
}

/* ===================================================================
   Liens — bleu Méditerranée + hover bleu secondaire
   =================================================================== */
.gh-article-content a:not(.kg-bookmark-container):not(.gh-button),
.gh-content a:not(.kg-bookmark-container):not(.gh-button) {
  color: var(--color-bleu-principal);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 0.2s;
}

.gh-article-content a:hover,
.gh-content a:hover {
  color: var(--color-bleu-secondaire);
}

/* Liens de la nav header */
.gh-navigation a:not(.gh-button) {
  color: var(--color-anthracite);
  font-weight: 500;
  transition: color 0.2s;
}

.gh-navigation a:not(.gh-button):hover {
  color: var(--color-bleu-principal);
  opacity: 1;
}

/* ===================================================================
   Logo / titre du site dans le header (bleu)
   =================================================================== */
.gh-navigation-logo,
.gh-navigation-logo.is-title {
  color: var(--color-bleu-principal);
  font-weight: 700;
}

/* ===================================================================
   Boutons CTA — jaune charte avec hover orange
   Override les .gh-button qui par défaut utilisent --ghost-accent-color
   =================================================================== */
.gh-button {
  background-color: var(--color-jaune-cta);
  color: var(--color-anthracite);
  font-weight: 700;
  border-radius: 6px;
}

.gh-button:hover {
  background-color: var(--color-orange-hover);
  opacity: 1;
}

/* ===================================================================
   Conteneur prose (largeur lecture 760 px charte)
   Source utilise --container-width pour le viewport, on cible le contenu
   =================================================================== */
.gh-content,
.gh-canvas > *:not(.kg-width-full):not(.kg-width-wide) {
  max-width: var(--max-width-prose);
}

/* Sur mobile et tablet, on laisse Source gérer (max-width Source < 760px déjà) */
@media (min-width: 768px) {
  .gh-content > p,
  .gh-content > h2,
  .gh-content > h3,
  .gh-content > h4,
  .gh-content > ul,
  .gh-content > ol,
  .gh-content > blockquote {
    line-height: 1.7;
    font-size: 1.85rem;
  }
}

/* ===================================================================
   Cards d'article (index.hbs liste blog)
   Bordure bleu très clair pour rythme visuel cohérent charte
   =================================================================== */
.gh-card {
  border-radius: 12px;
  transition: transform 0.2s, box-shadow 0.2s;
}

.gh-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(10, 77, 104, 0.12);
}

/* ===================================================================
   Footer
   =================================================================== */
.gh-footer {
  background-color: var(--color-bleu-clair);
  color: var(--color-anthracite);
}

.gh-footer-logo,
.gh-footer-logo.is-title {
  color: var(--color-bleu-principal);
}

.gh-footer-copyright,
.gh-footer-copyright a {
  color: var(--color-gris-clair);
}

/* ===================================================================
   Bloc newsletter signup (footer)
   =================================================================== */
.gh-footer-signup-header {
  color: var(--color-bleu-principal);
}

/* ===================================================================
   Pull quotes / blockquotes
   =================================================================== */
.gh-content blockquote {
  border-left: 4px solid var(--color-jaune-cta);
  background-color: var(--color-fond-alt);
  padding: 1rem 1.5rem;
  border-radius: 0 6px 6px 0;
}

/* ===================================================================
   Code inline
   =================================================================== */
.gh-content code:not(pre code) {
  background-color: var(--color-fond-alt);
  color: var(--color-bleu-principal);
  padding: 0.15em 0.4em;
  border-radius: 4px;
  font-size: 0.9em;
}

/* ===================================================================
   Sélection de texte — fond jaune charte
   =================================================================== */
::selection {
  background-color: var(--color-jaune-cta);
  color: var(--color-anthracite);
}

/* ===================================================================
   Hero homepage — lisibilité du texte sur image lumineuse
   Force texte en blanc + ombre noire pour contraste sur fond varié
   =================================================================== */
.gh-header,
.gh-header-inner,
.gh-header-content,
.gh-header h1,
.gh-header h2,
.gh-header h3,
.gh-header p,
.gh-header-text,
.gh-header-title,
.gh-header-description,
.gh-canvas > .gh-header,
[class*="gh-header"] h1,
[class*="gh-header"] h2,
[class*="gh-header"] p {
  color: #ffffff !important;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.55), 0 1px 3px rgba(0, 0, 0, 0.4);
}

/* ===================================================================
   Form newsletter / search box — radius cohérent charte + bouton aligné
   Source utilisait 40px (pill) + 100px (très pill), on revient à 12px / 8px
   =================================================================== */
.gh-form,
.gh-form-input,
form.gh-form {
  border-radius: 12px !important;
}

.gh-form .gh-button,
.gh-form button.gh-button,
form .gh-button {
  border-radius: 8px !important;
  height: 44px !important;
  align-self: center !important;
  padding: 0 1.2rem !important;
  margin-right: 6px !important;
  font-weight: 700;
}