/* ============================================================
   Fromage Corse — Couche d'amélioration UX / design
   Additive : chargée en dernier, n'altère pas le contenu.
   Palette de marque : olive #5B5A14 · or #91711B · crème #F0EAD6
   ============================================================ */

:root{
  --fc-dark:#16140b;
  --fc-dark-2:#2c2913;
  --fc-olive:#5B5A14;
  --fc-gold:#91711B;
  --fc-cream:#F0EAD6;
  --fc-cream-bg:#FFF9EB;
  --fc-border:#E2D8C0;
  --fc-text:#5A5A4A;
  --fc-ink:#1A1A0E;
}

/* ---------- 1. Fondations & lisibilité ---------- */
html{ scroll-behavior:smooth; overflow-x:clip; }          /* clip : ne casse pas position:sticky/fixed */
body{
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  overflow-x:clip;
}
img,video,iframe,svg{ max-width:100%; }

/* Accessibilité : focus clavier visible et cohérent */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible,
.elementor-button:focus-visible{
  outline:3px solid var(--fc-gold);
  outline-offset:3px;
  border-radius:4px;
}
::selection{ background:var(--fc-gold); color:var(--fc-cream-bg); }

/* ---------- 2. Bande « philosophie » sombre ----------
   Fix du défaut d'origine : la citation en crème (#F0EAD6) et la
   section vidéo Pexels n'avaient aucun fond -> texte illisible.
   On garantit un fond sombre de secours (visible même sans vidéo)
   + overlay pour le contraste si la vidéo se charge.
   Sections concernées (home) : ddccf30 (vidéo) + 13eda32a (citation). */
.elementor-element-ddccf30,
.elementor-element-ddccf30 > .e-con-inner,
.elementor-element-13eda32a{
  position:relative;
  background-color:var(--fc-dark) !important;
  background-image:radial-gradient(130% 130% at 30% 0%, var(--fc-dark-2) 0%, var(--fc-dark) 70%) !important;
}
/* Dans cet export, la variable Elementor --display n'est jamais définie, donc
   .e-con{display:var(--display)} retombe sur "inline" et le fond ne se peint pas
   en pleine largeur. On rétablit display:block sur CE conteneur (son contenu
   reste empilé verticalement) pour que le dégradé sombre couvre toute la bande. */
.elementor-element-ddccf30,
.elementor-element-ddccf30 > .e-con-inner{ display:block !important; }
.elementor-element-ddccf30 > .e-con-inner{ padding-block:40px !important; }
/* la bande ddccf30 et la citation 13eda32a forment un bloc sombre continu */
.elementor-element-ddccf30{ margin-bottom:0 !important; }
.elementor-element-13eda32a{ margin-top:-1px !important; }

/* La vidéo de fond Pexels (externe) ne se charge pas de façon fiable et
   laisse un conteneur vide -> on le masque, le dégradé sombre suffit. */
.elementor-element-ddccf30 .elementor-background-video-container,
.elementor-element-ddccf30 .elementor-background-video-embed,
.elementor-element-ddccf30 .elementor-background-video-hosted{
  display:none !important;
}

/* le contenu reste au-dessus */
.elementor-element-ddccf30 > .e-con-inner,
.elementor-element-ddccf30 > .elementor-container{ position:relative; z-index:2; }

/* texte en crème sur toute la bande sombre (heading H3 + sous-titre DIV + citation P + cite) */
.elementor-element-ddccf30 .elementor-widget-container,
.elementor-element-ddccf30 .elementor-widget-container *,
.elementor-element-13eda32a .elementor-widget-container,
.elementor-element-13eda32a .elementor-widget-container *{
  color:var(--fc-cream) !important;
}
/* la citation : un peu plus de présence + guillemet décoratif */
.elementor-element-13eda32a blockquote{ position:relative; }
.elementor-element-13eda32a blockquote p{
  font-size:clamp(20px, 2.4vw, 28px) !important;
  line-height:1.65 !important;
}
.elementor-element-13eda32a .elementor-widget-container cite,
.elementor-element-13eda32a .elementor-widget-container cite *{ color:var(--fc-gold) !important; opacity:.95; }
/* espacement vertical généreux pour la bande */
.elementor-element-ddccf30{ padding-top:64px !important; }
.elementor-element-13eda32a{ padding-bottom:72px !important; }

/* ---------- 3. Cartes « univers » : élévation au survol ---------- */
a[style*="background:#F0EAD6"][style*="border-radius:8px"]{
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease, background-color .25s ease;
}
a[style*="background:#F0EAD6"][style*="border-radius:8px"]:hover{
  transform:translateY(-6px);
  box-shadow:0 16px 34px -12px rgba(26,26,14,.40);
  border-color:var(--fc-gold) !important;
}

/* ---------- 4. Boutons & CTA : micro-interactions ---------- */
a[style*="border-radius:4px"][style*="padding"]{
  transition:transform .2s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease;
}
a[style*="border-radius:4px"][style*="padding"]:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 24px -8px rgba(91,90,20,.45);
}
.elementor-button{ transition:transform .2s ease, box-shadow .2s ease, filter .2s ease; }
.elementor-button:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 24px -8px rgba(26,26,14,.35);
  filter:brightness(1.05);
}

/* ---------- 5. Images de contenu : arrondi + ombre douce ---------- */
.elementor-widget-image img,
.entry-content img:not(.custom-logo){
  border-radius:10px;
  box-shadow:0 10px 28px -14px rgba(26,26,14,.32);
}
/* garde-fous : pas d'arrondi/ombre sur logo, en-tête, navigation */
.custom-logo,
header img, .site-header img,
.elementor-location-header img,
[class*="logo"] img,
img[width="1"], img[height="1"]{
  border-radius:0 !important;
  box-shadow:none !important;
}

/* ---------- 6. Tableaux comparatifs : scroll horizontal en mobile ---------- */
@media (max-width:600px){
  .elementor-widget-html table,
  .entry-content table{
    display:block;
    width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
}

/* ---------- 7. Liens de contenu : transition de couleur ---------- */
.entry-content a, article a{ transition:color .15s ease; }