/*
 * LAMBEAUCLIC – Design system (bleu clair, bleu marine, bleu ciel, blanc)
 * ---------------------------------------------------------------------
 * Fond        #D7EBFB   Surfaces #FFFFFF   Séparateurs #D9E5F0
 * Texte       #0A2E50 (titres) / #173455 (texte)   Logo #002444
 * Accent      #5BA3DF (ciel)   #2E7BC4 (actif)   #E8F3FC (fond actif)
 * Police      Montserrat 300 / 400 / 500 / 600
 * Rayons      14 px (cartes, boutons)   Ombres très légères
 * Pour revenir à l'ancien aspect : retirer le bloc « lambeauclic-ui.php » de functions.php.
 */
:root {
  --lc-bg: #D7EBFB;
  --lc-bg-2: #E4F1FC;
  --lc-white: #FFFFFF;
  --lc-navy: #0A2E50;
  --lc-navy-deep: #002444;
  --lc-ink: #173455;
  --lc-sky: #5BA3DF;
  --lc-sky-deep: #2E7BC4;
  --lc-sky-soft: #E8F3FC;
  --lc-line: #D9E5F0;
  --lc-radius: 14px;
  --lc-shadow: 0 1px 2px rgba(10, 46, 80, .05), 0 10px 24px -16px rgba(10, 46, 80, .35);
  --lc-ease: cubic-bezier(.22, .8, .24, 1);
  --lc-font: 'Montserrat', 'Raleway', 'Helvetica Neue', Arial, sans-serif;
}

/* ---------- base ---------- */
html, body { min-height: 100vh; }
body {
  font-family: var(--lc-font);
  color: var(--lc-ink);
  background: linear-gradient(135deg, #E3F0FC 0%, var(--lc-bg) 42%, #D2E7F9 100%);
  background-attachment: fixed;
  padding-top: 0 !important;
}
body.home { background: var(--lc-bg); }
h1, h2, h3, h4 { color: var(--lc-navy); font-family: var(--lc-font); }
a { transition: color .2s; }

/* ---------- en-tête : transparent, bleu clair, épuré ---------- */
#header {
  position: absolute !important; top: 0; left: 0; right: 0; z-index: 50;
  background: transparent !important; box-shadow: none !important; border-radius: 0 !important;
}
#header > .container-fluid { padding: 22px 38px !important; }
#header .row { align-items: center; }
#header .col:last-child { display: flex; justify-content: flex-end; }
#toggle-menu, #toggle-menu span {
  color: #132A45 !important; font-family: var(--lc-font); font-size: .95rem; font-weight: 400; letter-spacing: .16em; text-transform: uppercase;
}
#toggle-menu .line { stroke: #132A45 !important; }
#toggle-menu svg { width: 44px; height: 44px; margin-left: -10px; }
.brand-link { display: block; text-align: center; text-decoration: none; }
#header .brand-link .logo-lambeau {
  display: inline-block !important; width: auto !important; margin: 0 !important; font-family: var(--lc-font); font-weight: 500 !important; font-size: 1.7rem !important;
  letter-spacing: .05em !important; line-height: 1 !important; color: var(--lc-navy-deep) !important; white-space: nowrap; text-align: left;
}
#header .brand-link .logo-lambeau .clic { display: inline !important; margin: 0 !important; color: var(--lc-sky) !important; font-size: inherit !important; font-weight: 400 !important; letter-spacing: inherit !important; }
#header .creator {
  display: inline-block; font-family: var(--lc-font); font-weight: 300; font-size: .85rem; letter-spacing: .3em; text-transform: none;
  color: var(--lc-navy); white-space: nowrap; opacity: 1;
}
body.lc-intro #header .brand-link, body.lc-intro #header .creator,
body.lc-flying #header .brand-link, body.lc-flying #header .creator { opacity: 0; }

/* menu déroulant */
.primary-menu { background: #fff !important; border-radius: 0 var(--lc-radius) var(--lc-radius) 0; box-shadow: var(--lc-shadow); }
.primary-menu a { color: var(--lc-navy) !important; font-family: var(--lc-font); font-weight: 500; letter-spacing: .04em; border-radius: 10px; }
.primary-menu a:hover { background: var(--lc-sky-soft) !important; color: var(--lc-sky-deep) !important; }

/* ================================================================
   ACCUEIL « HÉROS » (reproduit la photo : visage à gauche, logo à droite)
   ================================================================ */
.lambeau-selector.lc-app { position: relative; height: 100vh; min-height: 560px; overflow: hidden; display: block; max-width: none; padding: 0; }
.lc-wash {
  position: absolute; right: 0; bottom: 0; width: min(39vw, 88vh); aspect-ratio: 738 / 833; pointer-events: none; z-index: 0;
  background: url('../img/home-wash.png') no-repeat right bottom / 100% 100%;
}
.lc-layout { position: absolute; inset: 0; z-index: 1; }
.lc-stage { position: absolute; left: 0; top: 0; bottom: 0; width: 42%; }
.lc-stage::before {                                  /* halo bleu discret autour du visage */
  content: ''; position: absolute; left: -16%; right: -16%; top: 2%; bottom: -4%; pointer-events: none;
  background: radial-gradient(closest-side at 50% 56%, rgba(150, 203, 246, .85) 0%, rgba(176, 214, 247, .55) 55%, rgba(215, 235, 251, 0) 100%);
}
#lc-face { position: relative; width: 100%; height: 100%; background: transparent; }
.lc-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; display: block; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
#lc-face:not(.is-zoomed) .lc-svg { -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 60px); mask-image: linear-gradient(to bottom, transparent 0, #000 60px); }
#lc-face.is-zoomed .lc-svg {                          /* pas de cadre : le visage se fond doucement dans le fond bleu */
  -webkit-mask-image: radial-gradient(ellipse closest-side at 50% 50%, #000 66%, rgba(0, 0, 0, 0) 100%);
  mask-image: radial-gradient(ellipse closest-side at 50% 50%, #000 66%, rgba(0, 0, 0, 0) 100%);
}
.lc-img { opacity: 0; transition: opacity .5s ease; pointer-events: none; }
.lc-img.is-on { opacity: 1; }

/* zones : invisibles tant qu'on ne les survole pas */
.lc-set { transition: opacity .2s; }
.lc-set.is-out { opacity: 0; pointer-events: none; }
.lc-zone {
  cursor: pointer; outline: none; fill: transparent; stroke: transparent; stroke-width: 1.5; stroke-linejoin: round; vector-effect: non-scaling-stroke;
  transition: fill .22s ease, stroke .22s ease, filter .22s ease;
}
.lc-set .lc-zone.is-hover, .lc-set .lc-zone:focus-visible {
  fill: rgba(91, 163, 223, .42); stroke: var(--lc-sky-deep); stroke-width: 2.2; filter: drop-shadow(0 0 7px rgba(91, 163, 223, .75));
}
.lc-svg .lc-set .lc-zone.is-picked {
  fill: rgba(46, 123, 196, .45); stroke: var(--lc-sky-deep); stroke-width: 2.4; filter: drop-shadow(0 0 8px rgba(46, 123, 196, .55));
}
.lc-hint { fill: url(#lc-hatch); stroke: var(--lc-sky-deep); stroke-width: 1.3; stroke-dasharray: 5 4; vector-effect: non-scaling-stroke; opacity: 0; pointer-events: none; transition: opacity .3s; }
.lc-hint.is-on { opacity: 1; }
.lc-tip {
  position: absolute; z-index: 5; transform: translate(-50%, -100%); pointer-events: none; white-space: nowrap;
  background: var(--lc-navy); color: #fff; font-family: var(--lc-font); font-size: .78rem; font-weight: 500; letter-spacing: .04em; padding: 6px 12px; border-radius: 999px;
  box-shadow: 0 8px 18px -8px rgba(10, 46, 80, .7);
}
.lc-tip::after { content: ''; position: absolute; left: 50%; bottom: -5px; width: 10px; height: 10px; background: var(--lc-navy); transform: translateX(-50%) rotate(45deg); border-radius: 2px; }

/* bloc d'accueil (moitié droite) : logo, nom, trait, consigne */
.lc-hero {
  position: absolute; left: 65%; top: 52%; transform: translate(-50%, -50%); z-index: 3;
  display: flex; flex-direction: column; align-items: center; text-align: center; width: min(46vw, 920px);
}
.lc-hero-logo {
  margin: 0; font-family: var(--lc-font); font-size: clamp(2.3rem, 4.25vw, 6rem); font-weight: 500; letter-spacing: .05em; line-height: 1;
  color: var(--lc-navy-deep); white-space: nowrap; display: inline-block;
}
.lc-hero-logo span { color: var(--lc-sky); font-weight: 400; }
.lc-hero-name {
  margin: 2.7vw 0 0; font-family: var(--lc-font); font-size: clamp(.95rem, 1.6vw, 2.1rem); font-weight: 300; letter-spacing: .3em; line-height: 1.2;
  color: var(--lc-navy); white-space: nowrap; display: inline-block;
}
.lc-hero-rule { display: block; width: 4.2vw; min-width: 48px; height: max(3px, .2vw); margin: 3.3vw 0 2.9vw; background: var(--lc-sky); border-radius: 2px; }
.lc-hero-prompt {
  margin: 0; font-family: var(--lc-font); font-size: clamp(.78rem, 1.07vw, 1.4rem); font-weight: 400; letter-spacing: .07em; line-height: 1.75;
  text-transform: uppercase; color: var(--lc-ink);
}
body:not(.lc-intro) .lc-hero { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .35s ease, visibility 0s .4s; }

/* colonne de droite après le premier clic : consignes et questions uniquement */
.lc-side { position: absolute; left: 50%; right: 0; top: 0; bottom: 0; display: flex; align-items: center; justify-content: center; padding: 96px 4vw 40px 1vw; z-index: 2; }
.lc-panel-wrap { position: relative; width: 100%; max-width: 520px; }
body.lc-intro .lc-panel-wrap { opacity: 0; visibility: hidden; }
body:not(.lc-intro) .lc-panel-wrap { opacity: 1; transition: opacity .5s .55s; }
.lc-panel {
  max-height: calc(100vh - 170px); overflow-y: auto; padding: 10px 12px 50px; scrollbar-width: thin; scrollbar-color: rgba(10, 46, 80, .22) transparent;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 14px, #000 calc(100% - 28px), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 14px, #000 calc(100% - 28px), transparent 100%);
}
#lc-reset {
  position: absolute; top: -30px; right: 12px; font-family: var(--lc-font); font-size: .72rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
  color: var(--lc-sky-deep); text-decoration: none; opacity: 0; pointer-events: none; transition: opacity .3s;
}
.lc-started #lc-reset { opacity: 1; pointer-events: auto; }
#lc-reset:hover { color: var(--lc-navy); }

/* ---------- questions empilées ---------- */
@keyframes lc-slide { from { opacity: 0; transform: translateY(-40px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes lc-slide-sm { from { opacity: 0; transform: translateY(-18px); } to { opacity: 1; transform: none; } }
@keyframes lc-grow { from { transform: scaleY(0); opacity: 0; } to { transform: scaleY(1); opacity: 1; } }
.lc-level { position: relative; transform-origin: top center; margin: 0 0 22px; animation: lc-slide .65s var(--lc-ease) backwards; transition: opacity .35s, transform .35s; scroll-margin-top: 90px; }
.lc-level.is-empty { display: none; }
.lc-level.is-past { opacity: .55; transform: scale(.985); transform-origin: top left; }
.lc-level.is-past:hover, .lc-level.is-past:focus-within { opacity: .95; transform: none; }
.lc-level.is-leaving { opacity: 0; transform: translateY(-10px); pointer-events: none; }
.lc-level + .lc-level::before {
  content: ''; position: absolute; left: 33px; top: -22px; width: 2px; height: 22px; border-radius: 2px;
  background: linear-gradient(var(--lc-sky), rgba(91, 163, 223, .15)); transform-origin: top; animation: lc-grow .5s .05s var(--lc-ease) backwards;
}
.lc-level.is-empty + .lc-level::before, .lc-level:first-child::before { display: none; }
.lc-prompt { margin: 0 0 6px; font-family: var(--lc-font); font-size: .95rem; font-weight: 500; letter-spacing: .09em; line-height: 1.7; text-transform: uppercase; color: var(--lc-ink); }
.lc-q { margin: 0 0 12px; font-family: var(--lc-font); font-size: .74rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--lc-sky-deep); text-align: left; }
.lc-options { display: flex; flex-direction: column; gap: 10px; }
.lc-opt {
  position: relative; display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; text-decoration: none;
  background: var(--lc-white); color: var(--lc-navy); border: 1px solid var(--lc-line); border-radius: var(--lc-radius); padding: 14px 18px;
  font-family: var(--lc-font); font-size: .95rem; font-weight: 500; line-height: 1.3; cursor: pointer; box-shadow: var(--lc-shadow);
  animation: lc-slide-sm .55s var(--lc-ease) backwards; animation-delay: calc(var(--i, 0) * 65ms + 160ms);
  transition: transform .22s var(--lc-ease), border-color .2s, background .25s, box-shadow .22s, opacity .3s;
}
.lc-opt:hover, .lc-opt:focus-visible { transform: translateY(-2px); border-color: var(--lc-sky); box-shadow: 0 1px 2px rgba(10, 46, 80, .05), 0 14px 26px -16px rgba(46, 123, 196, .55); outline: none; }
.lc-opt:active { transform: translateY(0) scale(.99); }
.lc-opt-check { flex: 0 0 22px; height: 22px; border-radius: 50%; border: 2px solid #C9D9E8; background: #fff; transition: all .25s var(--lc-ease); position: relative; }
.lc-opt:hover .lc-opt-check { border-color: var(--lc-sky); }
.lc-opt.is-picked { background: var(--lc-sky-soft); border-color: var(--lc-sky); }
.lc-opt.is-picked .lc-opt-check { background: var(--lc-sky-deep); border-color: var(--lc-sky-deep); }
.lc-opt.is-picked .lc-opt-check::after { content: ''; position: absolute; left: 6px; top: 2px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.lc-opt.is-dim { opacity: .6; }
.lc-opt.is-dim:hover { opacity: 1; }
.lc-opt-label { flex: 1; }
.lc-opt--result { border-left: 4px solid var(--lc-sky); padding-left: 16px; }
.lc-opt--result:hover { border-left-color: var(--lc-sky-deep); }
.lc-opt-arrow { flex: 0 0 22px; height: 22px; position: relative; transition: transform .25s var(--lc-ease); }
.lc-opt-arrow::before { content: ''; position: absolute; left: 2px; top: 10px; width: 16px; height: 2px; background: var(--lc-sky-deep); border-radius: 2px; }
.lc-opt-arrow::after { content: ''; position: absolute; right: 3px; top: 6px; width: 8px; height: 8px; border: solid var(--lc-sky-deep); border-width: 2px 2px 0 0; transform: rotate(45deg); }
.lc-opt--result:hover .lc-opt-arrow { transform: translateX(5px); }
.lc-retry { background: var(--lc-sky-deep); color: #fff; border: 0; border-radius: 999px; padding: 10px 22px; font-family: var(--lc-font); font-weight: 600; cursor: pointer; }
.lc-intro-end .lc-level, .lc-intro-end .lc-level::before { animation-delay: .8s; }
.lc-intro-end .lc-opt { animation-delay: calc(var(--i, 0) * 65ms + .95s); }

/* ================================================================
   PAGE D'UNE TECHNIQUE
   ================================================================ */
body.single-lambeau { background: linear-gradient(135deg, #E3F0FC 0%, var(--lc-bg) 45%, #D2E7F9 100%); background-attachment: fixed; }
body.single-lambeau > .container-fluid { padding: 118px 38px 60px; }
#header-lambeau { padding-right: 36px; text-align: left; }
#header-lambeau:after { display: none !important; background: none !important; }
#header-lambeau .back {
  display: inline-flex; align-items: center; padding: 7px 16px; border: 1px solid var(--lc-line); border-radius: 999px; background: #fff; box-shadow: var(--lc-shadow);
  font-family: var(--lc-font); font-size: .74rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; text-decoration: none; color: var(--lc-sky-deep) !important;
  transition: transform .2s var(--lc-ease), border-color .2s;
}
#header-lambeau .back:hover { transform: translateX(-3px); border-color: var(--lc-sky); }
#header-lambeau h1 { margin-top: 2.4rem !important; font-family: var(--lc-font); font-size: clamp(1.55rem, 2.1vw, 2.3rem); font-weight: 500; line-height: 1.25; letter-spacing: .005em; text-transform: none; color: var(--lc-navy-deep) !important; }
#header-lambeau h3 { margin: 1.6rem 0 .8rem; font-family: var(--lc-font); font-size: .72rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--lc-sky-deep) !important; opacity: 1; }
.btn-primary, a.btn-primary {
  display: inline-block; background: var(--lc-sky-deep); border: 0; border-radius: var(--lc-radius); color: #fff !important; padding: .95rem 1.25rem .95rem 3.1rem; position: relative;
  font-family: var(--lc-font); font-size: .84rem; font-weight: 600; line-height: 1.45; text-align: left; text-decoration: none;
  box-shadow: 0 12px 24px -14px rgba(46, 123, 196, .9); transition: transform .2s var(--lc-ease), background .2s, box-shadow .2s;
}
a.btn-primary::before {
  content: ''; position: absolute; left: 1.15rem; top: 50%; width: 18px; height: 18px; transform: translateY(-50%);
  background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12m0 0l-5-5m5 5l5-5M5 21h14'/%3E%3C/svg%3E");
}
.btn-primary:hover, .btn-primary:focus { background: #1F63A8; transform: translateY(-2px); box-shadow: 0 16px 28px -14px rgba(31, 99, 168, .9); }

#body-lambeau { padding-top: 0 !important; }
.lambeau-images { margin-bottom: 22px; }
.lambeau-images .slide img { border-radius: var(--lc-radius); background: #fff; border: 1px solid var(--lc-line); box-shadow: var(--lc-shadow); }

/* « mini-menu » description / anesthésie / fils / soins : même style que les choix de questions */
#body-lambeau .accordion-item { background: transparent; border: 0; margin-bottom: 10px; box-shadow: none; }
#body-lambeau .accordion-header { margin: 0; }
#body-lambeau .accordion-button {
  display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 18px; background: #fff !important; color: var(--lc-navy) !important;
  border: 1px solid var(--lc-line); border-radius: var(--lc-radius) !important; box-shadow: var(--lc-shadow);
  font-family: var(--lc-font); font-size: .95rem; font-weight: 500; text-align: left; transition: transform .22s var(--lc-ease), border-color .2s, background .25s;
}
#body-lambeau .accordion-button { text-transform: capitalize; }
#body-lambeau .accordion-button::after { display: none; }
#body-lambeau .accordion-button::before {
  content: ''; flex: 0 0 22px; height: 22px; border-radius: 50%; border: 2px solid #C9D9E8; background: #fff no-repeat center / 12px; transition: all .25s var(--lc-ease);
}
#body-lambeau .accordion-button:hover { transform: translateY(-2px); border-color: var(--lc-sky); }
#body-lambeau .accordion-button:focus { box-shadow: var(--lc-shadow); }
#body-lambeau .accordion-button:not(.collapsed) { background: var(--lc-sky-soft) !important; border-color: var(--lc-sky); }
#body-lambeau .accordion-button:not(.collapsed)::before {
  border-color: var(--lc-sky-deep); background-color: var(--lc-sky-deep);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}
#body-lambeau .accordion-collapse { background: #fff; border: 1px solid var(--lc-line); border-radius: var(--lc-radius); margin-top: 8px; box-shadow: var(--lc-shadow); }
#body-lambeau .accordion-body { padding: 1.2rem 1.4rem 1.3rem; font-size: .95rem; line-height: 1.7; color: var(--lc-ink); }
#body-lambeau .accordion-body p:last-child { margin-bottom: 0; }
#body-lambeau .accordion-body ul { padding-left: 1.2rem; }
#body-lambeau .accordion-body li::marker { color: var(--lc-sky); }

/* ================================================================
   PAGES SIMPLES (À propos, Sources, Marges d'exérèse…)
   ================================================================ */
.site-main { padding-top: 96px; padding-bottom: 60px; }
.content-area { max-width: 860px; margin: 0 auto; line-height: 1.75; font-size: .98rem; }
#page-title { position: relative; padding-bottom: .8rem; font-family: var(--lc-font); font-weight: 500; color: var(--lc-navy-deep); }
#page-title::after { content: ''; position: absolute; left: 0; bottom: 0; width: 56px; height: 3px; border-radius: 3px; background: var(--lc-sky); }
.content-area a { color: var(--lc-sky-deep); font-weight: 600; text-underline-offset: 3px; }
.content-area a:hover { color: var(--lc-navy); }
.content-area h2 { margin-top: 2rem; font-size: 1.15rem; font-weight: 600; }
.content-area li { margin-bottom: .55rem; }

/* ================================================================
   TÉLÉPHONE / TABLETTE
   ================================================================ */
@media (max-width: 991px) {
  .lambeau-selector.lc-app { height: auto; min-height: 100vh; overflow: visible; }
  .lc-layout { position: relative; inset: auto; }
  .lc-stage { position: relative; width: 100%; height: min(112vw, 640px); margin-top: 70px; }
  .lc-stage::before { left: 0; right: 0; }
  .lc-side { position: relative; left: auto; right: auto; top: auto; bottom: auto; padding: 0 16px 70px; display: block; }
  .lc-hero { position: relative; left: auto; top: auto; transform: none; width: 100%; margin: 0 auto; padding: 8px 8px 20px; }
  .lc-hero-logo { font-size: clamp(2rem, 9vw, 3.4rem); }
  .lc-hero-name { margin-top: 5vw; font-size: clamp(.85rem, 3.4vw, 1.2rem); }
  .lc-hero-rule { margin: 7vw 0 6vw; width: 14vw; }
  .lc-hero-prompt { font-size: clamp(.72rem, 3vw, 1rem); }
  .lc-panel { max-height: none; overflow: visible; -webkit-mask-image: none; mask-image: none; }
  #lc-reset { top: -26px; }
  .lc-wash { width: 80vw; opacity: .8; }
  body.single-lambeau > .container-fluid { padding: 100px 18px 40px; }
}
@media (max-width: 767px) {
  #header > .container-fluid { padding: 16px 18px !important; }
  #header .creator { display: none; }
  #header .brand-link .logo-lambeau { font-size: 1.25rem !important; }
}
@media (prefers-reduced-motion: reduce) {
  .lc-level, .lc-opt, .lc-level::before { animation: none !important; }
  .lc-img, .lc-zone, .lc-opt { transition-duration: .01s !important; }
}
.is-restoring .lc-level, .is-restoring .lc-opt { animation: none !important; transition: none !important; }