/* ==========================================================================
   modern-theme.css
   Tasteful, respectful visual refresh for Groupe Louis Lafrance Mémorial.
   Loaded site-wide AFTER the original openElement/template stylesheets so
   it can gently override typography, color and spacing without touching
   the underlying page structure, grid or per-page positioning.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;1,400&family=Poppins:wght@300;400;500;600&display=swap');

:root{
  --ll-bg:            #f8f6f3;
  --ll-bg-soft:       #fbfaf8;
  --ll-ink:           #3a3733;
  --ll-ink-soft:      #5c5852;
  --ll-accent:        #8a6d3b;   /* muted antique gold, echoes existing brand color */
  --ll-accent-soft:   #b89359;
  --ll-line:          #e6e1d8;
  --ll-shadow:        0 4px 18px rgba(60, 50, 30, 0.08);
  --ll-shadow-soft:   0 2px 10px rgba(60, 50, 30, 0.06);
  --ll-radius:         10px;
  --ll-radius-sm:       6px;
}

/* ---- Base page canvas --------------------------------------------------- */
html{
  background: var(--ll-bg);
}
body{
  background: var(--ll-bg) !important;
  font-family: 'Poppins', 'Segoe UI', Verdana, Arial, Helvetica, sans-serif !important;
  color: var(--ll-ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Give the fixed-width page "card" area a soft canvas + gentle shadow so it
   reads as a calm printed program rather than a bare template, without
   altering its width/position (left untouched — purely decorative). */
.OESK_XBody_Default{
  background: var(--ll-bg-soft);
  box-shadow: var(--ll-shadow);
  border-radius: var(--ll-radius);
}

/* ---- Typography ---------------------------------------------------------
   Headings / name displays keep a dignified serif; body copy stays a clean,
   legible sans-serif. We layer these on top of inline font-family rules
   only where it is safe (text blocks), leaving structural/icon elements
   alone. */
h1, h2, h3, h4, h5, h6{
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif !important;
  letter-spacing: 0.01em;
  color: var(--ll-ink);
}

.OEWEText .ContentBox,
.OEWEText span,
.OEWELabel .ContentBox{
  font-family: 'Poppins', 'Segoe UI', Verdana, Arial, Helvetica, sans-serif;
}

/* NOTE: do NOT override line-height on .ContentBox/.OEWEText — these sit in
   openElement's fixed-height BaseDiv containers (px height baked in from the
   original design), so any interline increase makes text overflow past the
   box and visually overlap the next block below it (confirmed bug on
   Temoignages.htm). Font-family only; leave vertical rhythm untouched. */

/* ---- Links & buttons ------------------------------------------------------ */
a:link, a:visited{
  color: var(--ll-accent);
  transition: color 0.2s ease, opacity 0.2s ease;
}
a:hover, a:active{
  color: var(--ll-accent-soft);
  opacity: 0.85;
}

/* Nav / link-image hotspots (arrows, social icons, menu items) get a soft
   hover fade instead of an abrupt jump — purely a transition, no layout
   change. */
.OEWELinkImage, .OEWEImage img, .OEWEMenu a, .OEWEButton{
  transition: opacity 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.OEWELinkImage:hover{
  opacity: 0.8;
}

/* Buttons (contact/join forms) get rounded corners, soft shadow and a
   gentle hover lift — safe, purely cosmetic additions. */
input[type="submit"],
input[type="button"],
button,
.OEWEButton{
  border-radius: var(--ll-radius-sm) !important;
  box-shadow: var(--ll-shadow-soft);
  transition: box-shadow 0.2s ease, transform 0.15s ease, opacity 0.2s ease;
}
input[type="submit"]:hover,
input[type="button"]:hover,
button:hover,
.OEWEButton:hover{
  box-shadow: var(--ll-shadow);
  transform: translateY(-1px);
}

/* Form fields: soften the boxy default look on Contact Us / Rejoindre. */
input[type="text"],
input[type="email"],
input[type="tel"],
textarea,
select{
  border-radius: var(--ll-radius-sm) !important;
  border: 1px solid var(--ll-line) !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  font-family: 'Poppins', 'Segoe UI', Verdana, Arial, Helvetica, sans-serif;
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
textarea:focus,
select:focus{
  border-color: var(--ll-accent-soft) !important;
  box-shadow: 0 0 0 3px rgba(184, 147, 89, 0.15);
  outline: none;
}

/* ---- Cards / framed content blocks (OEWECadre) --------------------------
   These are used as bordered content boxes throughout the memorial pages;
   giving them rounded corners + a soft shadow reads as "modern card" while
   leaving their fixed width/height/position exactly as authored. */
.OEWECadre{
  border-radius: var(--ll-radius);
  overflow: hidden;
  box-shadow: var(--ll-shadow-soft);
}

/* Portrait / memorial photo frames: soften hard edges a touch. */
.OEWEImage img.OESZ_Img{
  border-radius: var(--ll-radius-sm);
}

/* Keep tiny icons (facebook/social/nav arrows, ~20px) perfectly square —
   rounding those would look broken, so we explicitly reset them back. */
#WEa943974de8 img.OESZ_Img,
#WEebd43e6f2a img.OESZ_Img,
#WE4d17f263d7 img.OESZ_Img{
  border-radius: 0;
}

/* ---- Footer band ---------------------------------------------------------
   The dark footer bar keeps its existing navy background color (untouched)
   but gains slightly friendlier link contrast on hover. */
[id] a{
  transition: color 0.2s ease, opacity 0.2s ease;
}

/* ---- Small responsive polish ----------------------------------------------
   The template already ships breakpoints; we only add safe overflow guards
   so nothing bleeds horizontally on small phones, without touching column
   layout logic. */
html, body{
  max-width: 100%;
  overflow-x: hidden;
}
img{
  max-width: 100%;
  height: auto;
}
.OESK_XBody_Default{
  max-width: 100%;
}

@media only screen and (max-width: 480px){
  body{ font-size: 15px; }
}

/* ==========================================================================
   PASS 2 — more visual presence (requested: push further, first pass read
   as too close to the original). Keeps the calm, respectful memorial tone —
   no bright/flashy colors — but adds real contrast, a warmer accent band,
   and a proper hero treatment instead of a barely-changed template. */

/* Deepen the gold accent so it reads instead of blending into the cream */
:root{
  --ll-accent:      #6b4f1f;
  --ll-accent-soft: #9c7a3d;
  --ll-header-bg:   #2c2a26;
}

/* Header banding removed — the site's structure uses absolutely positioned
   elements rather than a semantic header wrapper, so a broad selector here
   painted the wrong block dark (confirmed bug: covered "Qui sommes-nous?"
   body copy in near-black). Not worth the risk on a 120+ page site; skip it. */

/* Main page headings: larger, warmer, with a thin gold rule beneath for
   definition (a decorative border, does not add layout height since these
   heading boxes already carry bottom margin in the original design) */
h1, h2, h3{
  font-weight: 600 !important;
}

/* Top ribbon ("Pour le respect de vos valeurs") gets real color weight
   instead of pale cream-on-cream */
div[style*="background-color:#ffefd5"]{
  background: linear-gradient(90deg, #6b4f1f 0%, #9c7a3d 100%) !important;
}
div[style*="background-color:#ffefd5"] *{
  color: #fdf8ef !important;
  font-weight: 500;
}

/* Submit buttons: filled gold instead of default grey browser button */
input[type="submit"],
input[type="button"],
button,
.OEWEButton{
  background-color: var(--ll-accent) !important;
  color: #fdf8ef !important;
  border: none !important;
  font-weight: 500;
  letter-spacing: 0.03em;
  border-radius: 999px !important;
  padding: 10px 28px !important;
}
input[type="submit"]:hover,
input[type="button"]:hover,
button:hover,
.OEWEButton:hover{
  background-color: var(--ll-accent-soft) !important;
}

/* Memorial/portrait photo frames: add a defined gold-tinted border so
   photos feel intentionally framed rather than floating on cream */
.OEWECadre{
  border: 1px solid var(--ll-line);
}
.OEWEImage img.OESZ_Img{
  box-shadow: 0 6px 20px rgba(60, 50, 30, 0.15);
}