/* ===========================================
   Thème Éditions Factorielles — Palette chaude
   Harmonisé avec le fond du logo: #FEFBEF
   Logo non carré: 200×161px (préserve l'aspect)
   ===========================================*/

/* ---- Tokens de thème (faciles à ajuster) ---- */
:root{
  /* Couleur de fond du logo et variantes */
  --logo-bg: #FEFBEF;             /* fond exact du logo */
  --bg: #FFFDF6;                  /* fond global très clair, proche du logo */
  --surface: #FFFFFF;             /* cartes / panneaux */
  --surface-tint: #FFF6E5;        /* léger voile chaud pour contrastes doux */
  --border: #F1E9D2;              /* bord chaud discret */

  /* Typo / couleurs texte */
  --text: #2B2A27;                /* gris-brun lisible */
  --muted: #7A6A4F;               /* texte secondaire (chaud, doux) */

  /* Actions / liens (ambre/terracotta) */
  --accent: #C75C1A;              /* bouton actif / lien principal */
  --accent-contrast: #FFFFFF;     /* texte sur accent */
  --accent-hover: #B75316;        /* hover accent */
  --accent-soft: #FFE9CF;         /* hover surface douce */

  /* Accessibilité (focus visible, harmonisé chaud) */
  --focus: #8A3B00;               /* anneau de focus haut contraste */

  /* Layout */
  --maxw: 1100px;
  --radius: 12px;
  --shadow: 0 6px 18px rgba(70, 48, 0, .08); /* ombre chaude subtile */
}

/* ---- Reset léger + bases ---- */
* { box-sizing: border-box; }
html:focus-within{ scroll-behavior: smooth; }
html, body { height: 100%; }
body{
  margin:0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
}
img{ max-width: 100%; height:auto; }
a{ color: var(--accent); text-decoration: none; }
a:hover{ text-decoration: underline; }
:focus-visible{ outline: 3px solid var(--focus); outline-offset: 2px; }

/* ---- Lien d’évitement ---- */
.skip-link{
  position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip-link:focus{
  position: fixed; left:1rem; top:1rem; width:auto; height:auto;
  background: var(--accent); color: var(--accent-contrast);
  padding:.6rem 1rem; border-radius:.5rem; z-index:9999;
}

/* ===========================================
   Header — sobre, chaleureux, non contrasté dur
   ===========================================*/
.site-header{
  background: linear-gradient(180deg, #FFFFFF 0%, var(--logo-bg) 100%);
  border-bottom: 1px solid var(--border);
}
.site-header .brand{
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(0.75rem, 1vw, 1rem) clamp(1rem, 3vw, 2rem);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
  align-items: center;
}

/* Logo non-carré : conserver l’aspect 200×161px */
.brand img{
  display:block;
  width: min(200px, 45vw); /* réduit sur mobile si besoin */
  height: auto;            /* respecte l’aspect du fichier */
  border-radius: 0;        /* pas d’arrondi */
  background: var(--logo-bg);
  box-shadow: 0 1px 0 rgba(0,0,0,.04);
  image-rendering: auto;
  object-fit: contain;     /* ne coupe JAMAIS */
}
.brand-text{ display:flex; flex-direction: column; gap:.25rem; }
.subtitle{
  font-size:.9rem; color: var(--muted); letter-spacing:.01em;
}
.site-title{
  margin:0;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: .2px;
  font-size: clamp(1.9rem, 1.1rem + 2.4vw, 2.8rem);
  color: #2b2418; /* un poil plus chaud que le texte standard */
}

/* ===========================================
   Navigation principale — pills chaleureuses
   ===========================================*/
.main-nav{
  max-width: var(--maxw);
  margin: .25rem auto 0;
  padding: 0 clamp(1rem, 3vw, 2rem) .75rem;
}
.main-nav ul{
  margin:0; padding:0; list-style:none;
  display:flex; flex-wrap: wrap; gap:.5rem;
}
.main-nav li{ position: relative; }
.main-nav a{
  display:inline-block;
  padding:.55rem 1rem;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  text-decoration: none !important;
  box-shadow: 0 1px 0 rgba(120,84,0,.06);
  transition: transform .06s ease, background .2s ease, border-color .2s ease, color .2s ease;
}
.main-nav a:hover{
  background: var(--accent-soft);
  border-color: #F2D9B8;
  transform: translateY(-1px);
}
.main-nav a[aria-current="page"], .main-nav .active > a{
  background: var(--accent);
  color: var(--accent-contrast);
  border-color: var(--accent);
}

/* ===========================================
   Fil d’Ariane — discret, n’apparaît que s’il existe
   ===========================================*/
.breadcrumb{
  max-width: var(--maxw);
  margin: .35rem auto 1rem;
  padding: 0 clamp(1rem, 3vw, 2rem);
  color: var(--muted);
  font-size:.95rem;
  display: none;                 /* caché par défaut */
}
.breadcrumb:has(a){ display:block; }
.breadcrumb ul{ margin:0; padding:0; list-style:none; display:flex; flex-wrap:wrap; gap:.25rem; }
.breadcrumb li::after{ content:"›"; margin: 0 .4rem; color: var(--muted); }
.breadcrumb li:last-child::after{ content:""; }
.breadcrumb a{ color: inherit; text-decoration: underline; }

/* ===========================================
   Layout — 1 colonne (sidebar présente mais masquée)
   ===========================================*/
.layout{
  max-width: var(--maxw);
  margin: 1rem auto;
  padding: 0 clamp(1rem, 3vw, 2rem) 1rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1rem, 3vw, 2rem);
}

/* Sidebar : exigée par Jimdo mais cachée au rendu */
.sidebar{ display:none !important; }

/* Navigation imbriquée (si un jour réactivée) */
.nested-nav{
  background: var(--surface);
  border:1px solid var(--border);
  border-radius: var(--radius);
  padding: .75rem;
  margin-bottom: 1rem;
  box-shadow: var(--shadow);
  display: none;
}
.nested-nav:has(a){ display:block; }

/* ===========================================
   Contenu — cartes blanches, touches chaudes
   ===========================================*/
.content .page{
  background: var(--surface);
  border:1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: clip;
}
.page-body{ padding: clamp(1rem, 3vw, 2rem); }

/* Premier titre saisi dans Jimdo : cohérent avec le thème */
.page-body h1:first-of-type{
  margin-top: 0;
  font-size: clamp(1.6rem, 1.1rem + 2vw, 2.2rem);
  line-height: 1.2;
  color: #2b2418;
  font-weight: 800;
}

/* Titres / textes internes */
.page-body h2, .page-body h3{ color:#3a2f1e; }
.page-body p{ margin:.7rem 0; }

/* Liens de contenu (tonalité douce) */
.page-body a{
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: .08em;
  text-underline-offset: .18em;
}
.page-body a:hover{
  background: linear-gradient(transparent 60%, var(--accent-soft) 60%);
}

/* Boutons (si Jimdo ajoute des boutons génériques) */
.page-body .btn, .btn{
  display:inline-block;
  padding:.65rem 1rem;
  border-radius: 10px;
  background: var(--accent);
  color: var(--accent-contrast);
  border: 1px solid var(--accent);
  font-weight: 600;
  text-decoration: none !important;
  transition: filter .15s ease, transform .06s ease;
}
.btn:hover{ filter: brightness(0.98); transform: translateY(-1px); }

/* ===========================================
   Footer — clair, raccord palette
   ===========================================*/
.site-footer{
  margin-top: 2rem;
  background: var(--surface-tint);
  border-top: 1px solid var(--border);
}
.footer-inner{
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 1.25rem clamp(1rem, 3vw, 2rem);
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}
.footer-col{ color: var(--muted); }
.footer-links{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.5rem 1rem; }
.footer-links a{ color: #5E4B2F; }
.footer-links a:hover{ text-decoration: underline; }
.footer-widgets{
  background: var(--surface);
  border:1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem;
  box-shadow: var(--shadow);
}

/* ===========================================
   Responsive
   ===========================================*/
@media (max-width: 980px){
  .brand img{ width: min(180px, 50vw); }
}
@media (max-width: 640px){
  .brand{
    grid-template-columns: 1fr;
    justify-items: start;
  }
  .brand img{ width: min(160px, 60vw); }
  .site-title{ font-size: clamp(1.5rem, 1.2rem + 3vw, 2.1rem); }
  .main-nav a{ padding:.48rem .72rem; }
}

/* ===========================================
   Utilitaires d’accessibilité
   ===========================================*/
.visually-hidden{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ===========================================
   patch ajouté pour améliorer la lisibilité
   ===========================================*/

/* ===== FLATTEN : on supprime l'effet d'encadrement au centre ===== */

/* 1) La grande "carte" qui entourait tout le contenu */
.content .page{
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}

/* 2) Les encadrements génériques appliqués aux blocs internes */
.page-body{
  padding: 0 !important;                 /* on enlève le gros padding si tu en avais */
}
.page-body > *{
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* 3) On garde un rythme vertical propre sans "cadres" */
.page-body > * + *{
  margin-top: 1.25rem;                    /* espace entre blocs */
}
.page-body hr{
  border: 0;
  border-top: 1px solid var(--border);    /* séparateur très discret */
  margin: 1rem 0;
}

/* ===== Optionnel : un encadré ponctuel quand tu en as vraiment besoin ===== */
/* Ajoute class="panel" sur un <div> dans l'éditeur pour créer un bloc mis en avant */
.panel{
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: clamp(.75rem, 2.5vw, 1.25rem);
}

/* Variante "note" douce (sans ombre) */
.panel--soft{
  background: #FFF6E5;
  border: 1px solid #F1E9D2;
  box-shadow: none;
}


/* Pied de page : liens sans soulignement */
.site-footer a,
.footer-links a,
.footer-widgets a{
  text-decoration: none !important;
}

/* Survol : pas de soulignement, légère mise en valeur */
.site-footer a:hover,
.footer-links a:hover,
.footer-widgets a:hover{
  text-decoration: none !important;
  color: var(--accent-hover);
  background: rgba(199, 92, 26, .08); /* harmonisé palette */
  border-radius: 6px;
}

/* Accessibilité : focus clavier bien visible, sans soulignement */
.site-footer a:focus-visible,
.footer-links a:focus-visible,
.footer-widgets a:focus-visible{
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  text-decoration: none !important;
}