/* ==========================================================================
   INFOLUMIÈRE — accueil V4 : démonstrations
   Habillage des nouvelles maquettes de la future interface (espace client,
   Praticien Pro) : navigation bleu nuit et bleu océan, encarts ivoire,
   champagne et bleu brume, photographies immersives, titres Cormorant,
   icônes dorées dans des médaillons pêche, légendes manuscrites (Allura).
   Les fonctions et les données restent celles de la V3 (réelles / fictives).
   Aucune capture d'écran n'est utilisée : tout est redessiné en HTML.
   ========================================================================== */
:root {
  --d-nuit: #071A33;
  --d-nuit-2: #0B2447;
  --d-ocean: #12355E;
  --d-ivoire: #FCF8F0;
  --d-ivoire-2: #F5ECDC;
  --d-carte: #FFFDF8;
  --d-peche: #F7E7CB;
  --d-or: #B98C59;
  --d-or-clair: #E9C88C;
  --d-encre: #0B2447;
  --d-texte: #3A4659;
  --d-sourd: #5F6979;
  --d-filet: rgba(166, 124, 78, .2);
  --d-vert: #2F6E53;
  --d-bleu: #2F5C8F;
}

/* ---------- briques communes ---------- */
.d-titre-app { font-family: var(--font-titre-app); font-weight: 600; letter-spacing: -.005em; }

/* ==========================================================================
   APERÇU DE L'ESPACE CLIENT (.ec)
   ========================================================================== */
.ec { position: relative; }
.ec-cadre { container: ec / inline-size; position: relative; border-radius: 26px; overflow: hidden; background: var(--d-nuit); box-shadow: 0 60px 110px -50px rgba(11, 36, 71, .65), 0 0 0 1px rgba(166, 124, 78, .3); }
.ec-mention { position: absolute; z-index: 5; right: 16px; top: 14px; padding: 7px 12px; border-radius: 999px; font: 600 10px/1 var(--font-cond); letter-spacing: .16em; text-transform: uppercase; color: var(--d-encre); background: linear-gradient(180deg, #FFF8EA, var(--il-champagne)); box-shadow: 0 8px 18px -10px rgba(0, 0, 0, .5); }
.ec-app { display: grid; grid-template-columns: 208px 1fr; font-family: var(--font-sans); -webkit-font-smoothing: antialiased; }
.ec-app svg { flex: none; }
.ec-side { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 2px; padding: 20px 14px; color: #DCE3EC; font-size: 13px; background: radial-gradient(ellipse 120% 40% at 0% 100%, rgba(233, 200, 140, .14), transparent 60%), linear-gradient(180deg, #0B2141 0%, #071A33 60%, #061529 100%); border-right: 1px solid rgba(246, 223, 179, .1); }
.ec-logo { display: flex; align-items: center; gap: 10px; padding: 0 6px 18px; font: 600 21px/1 var(--font-titre-app); color: var(--il-cream); }
.ec-logo b { font-weight: 600; }
.ec-nav { position: relative; display: flex; align-items: center; gap: 11px; min-height: 40px; padding: 0 12px; border-radius: 12px; color: #D6DDE7; }
.ec-nav svg { width: 17px; height: 17px; color: var(--d-or-clair); opacity: .9; }
.ec-nav.actif { color: var(--il-ivory); background: linear-gradient(90deg, rgba(233, 200, 140, .22), rgba(143, 185, 236, .11) 72%, rgba(143, 185, 236, .04)); box-shadow: inset 0 0 0 1px rgba(185, 211, 244, .26); }
.ec-nav.actif::before { content: ""; position: absolute; left: -14px; top: 9px; bottom: 9px; width: 3px; border-radius: 2px; background: var(--il-gold-bright); }
.ec-side hr { border: 0; border-top: 1px solid rgba(233, 200, 140, .16); margin: 10px 8px; }
.ec-script, .vp-script { font-family: var(--font-script); font-weight: 400; color: var(--il-ivory); line-height: 1.05; }
.ec-script svg, .vp-script svg { width: .75em; height: .75em; vertical-align: -.05em; color: var(--il-champagne); }
.ec-side .ec-script { margin-top: auto; padding: 60px 6px 4px; font-size: 25px; transform: rotate(-6deg); transform-origin: left bottom; color: #F3E4C6; }
.ec-main { position: relative; min-width: 0; background: linear-gradient(180deg, var(--d-ivoire) 0%, var(--il-brume-clair) 100%); }
.ec-hero { position: relative; height: 205px; overflow: hidden; }
.ec-hero > picture, .ec-hero > picture img { position: absolute; inset: 0; width: 100%; height: 100%; }
.ec-hero > picture img { object-fit: cover; object-position: 30% 38%; }
.ec-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5, 22, 46, .82) 0%, rgba(5, 22, 46, .5) 45%, rgba(5, 22, 46, .05) 80%); }
.ec-haut { position: absolute; z-index: 2; right: 18px; top: 48px; display: flex; gap: 10px; align-items: center; }
.ec-ico { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: var(--il-ivory); background: rgba(4, 25, 53, .35); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); }
.ec-ico svg { width: 17px; height: 17px; }
.ec-moi { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px 4px 4px; border-radius: 999px; font-size: 13px; color: var(--il-ivory); background: rgba(4, 25, 53, .35); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); }
.ec-moi i, .vp-moi i { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font: 600 15px/1 var(--font-titre-app); font-style: normal; color: var(--d-encre); background: linear-gradient(160deg, #FFF6E2, var(--d-or-clair)); }
.ec-bonjour { position: absolute; z-index: 2; left: 28px; bottom: 50px; max-width: 58%; }
.ec-bonjour h3 , .ec-bonjour [data-nv="3"]{ margin: 0 0 6px; font: 600 40px/1 var(--font-titre-app); color: var(--il-ivory); }
.eclat { width: 22px; height: 22px; color: var(--il-gold-bright); vertical-align: 12px; }
.ec-bonjour p { margin: 0; font: 400 16px/1.35 var(--font-titre-app); color: #EEF1F5; }
.ec-script.droite { position: absolute; z-index: 2; right: 22px; bottom: 48px; text-align: right; font-size: 23px; transform: rotate(-5deg); text-shadow: 0 2px 10px rgba(4, 25, 53, .55); }
.ec-panneau { position: relative; z-index: 3; margin-top: -32px; padding: 22px 22px 24px; border-radius: 28px 28px 0 0; display: grid; grid-template-columns: minmax(0, 1fr) 262px; gap: 18px; background: linear-gradient(180deg, var(--d-ivoire) 0%, #F8F5EF 38%, var(--il-brume-clair) 100%); box-shadow: 0 -1px 0 rgba(233, 200, 140, .6), 0 -18px 30px -24px rgba(4, 25, 53, .5); }
.ec-col { display: grid; gap: 14px; align-content: start; min-width: 0; }
.ec-titre { display: flex; align-items: flex-start; gap: 12px; color: var(--d-encre); }
.ec-titre > svg { width: 30px; height: 30px; color: var(--d-or); margin-top: 2px; }
.ec-titre h4 , .ec-titre [data-nv="4"]{ margin: 0; font: 600 24px/1.1 var(--font-titre-app); color: var(--d-encre); }
.ec-titre p { margin: 3px 0 0; font-size: 12.5px; color: var(--d-sourd); }
.ec-titre.petit > svg { width: 22px; height: 22px; }
.ec-titre.petit h4 , .ec-titre.petit [data-nv="4"]{ font-size: 20px; }
.ec-carte { border-radius: 18px; padding: 16px; background: linear-gradient(180deg, var(--d-carte) 35%, var(--il-brume-clair) 160%); box-shadow: inset 0 0 0 1px var(--d-filet), 0 16px 30px -24px rgba(11, 36, 71, .45); }
.ec-prat-tete { display: flex; gap: 14px; align-items: center; }
.ec-av, .vp-av, .vp-grand-av { display: grid; place-items: center; border-radius: 50%; font-family: var(--font-titre-app); font-weight: 600; color: var(--d-encre); background: linear-gradient(160deg, #FFF8EA, #EBD3A8); box-shadow: inset 0 0 0 2px #fff, 0 0 0 1px rgba(166, 124, 78, .45); }
.ec-av { width: 62px; height: 62px; font-size: 22px; }
.ec-prat-tete b { display: block; font: 600 20px/1.1 var(--font-titre-app); color: var(--d-encre); }
.ec-prat-tete small { display: block; margin: 2px 0 6px; font-size: 12.5px; color: var(--d-sourd); }
.ec-actif, .vp-actif { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 500; font-style: normal; color: var(--d-vert); background: rgba(143, 201, 169, .18); box-shadow: inset 0 0 0 1px rgba(47, 110, 83, .25); }
.ec-actif svg, .vp-actif svg { width: 12px; height: 12px; }
.ec-nouveau { display: flex; gap: 12px; align-items: center; margin: 14px 0; padding: 12px 14px; border-radius: 14px; background: linear-gradient(90deg, #FFFAF0 0%, var(--il-brume-clair) 100%); box-shadow: inset 0 0 0 1px rgba(143, 185, 236, .3); }
.ec-nouveau > svg { width: 22px; height: 22px; color: var(--d-or); }
.ec-nouveau b { display: block; font-size: 13.5px; font-weight: 500; color: var(--d-encre); }
.ec-nouveau span { font-size: 12px; color: var(--d-sourd); }
.ec-prat-pied { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ec-puce { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 999px; font-size: 12px; color: var(--d-bleu); background: #fff; box-shadow: inset 0 0 0 1px rgba(47, 92, 143, .25); }
.ec-puce svg { width: 14px; height: 14px; }
.ec-ouvrir, .vp-btn.or { color: var(--d-encre); background: linear-gradient(180deg, #FCEBC6 0%, #E8C27F 100%); box-shadow: 0 8px 16px -10px rgba(166, 124, 78, .9), inset 0 1px 0 rgba(255, 255, 255, .7), inset 0 0 0 1px rgba(166, 124, 78, .35); }
.ec-ouvrir { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 20px; border-radius: 999px; font-size: 13.5px; font-weight: 600; }
.ec-ouvrir svg { width: 14px; height: 14px; }
.ec-modules { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.ec-module { position: relative; overflow: hidden; isolation: isolate; min-height: 196px; padding: 14px; border-radius: 18px; display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; color: var(--il-ivory); box-shadow: 0 18px 30px -22px rgba(4, 25, 53, .8), inset 0 0 0 1px rgba(246, 223, 179, .3); }
.ec-module picture, .ec-module img { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; }
.ec-module img { object-fit: cover; transition: transform 1.4s var(--ease-out); }
.ec-module::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(4, 25, 53, .05) 20%, rgba(4, 25, 53, .88) 78%); }
.ec-module b { font: 600 23px/1.05 var(--font-titre-app); }
.ec-module small { font-size: 11.5px; line-height: 1.4; color: #E2E7EE; }
.ec-lock { position: absolute; left: 12px; top: 12px; display: inline-flex; align-items: center; gap: 5px; padding: 5px 9px; border-radius: 999px; font: 600 9.5px/1 var(--font-cond); letter-spacing: .12em; text-transform: uppercase; color: var(--il-champagne); background: rgba(4, 25, 53, .62); box-shadow: inset 0 0 0 1px rgba(246, 223, 179, .45); }
.ec-lock svg { width: 11px; height: 11px; }
@media (hover: hover) { .ec-module:hover img { transform: scale(1.05); } }
.ec-afaire ul { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 4px; }
.ec-afaire li, .vp-afaire li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: center; padding: 9px 8px; border-radius: 12px; font-size: 11.5px; color: var(--d-sourd); }
.ec-afaire li + li, .vp-afaire li + li { border-top: 1px solid rgba(143, 185, 236, .22); border-radius: 0; }
.ec-afaire li b, .vp-afaire li b { display: block; font-size: 13px; font-weight: 500; color: var(--d-encre); }
.ec-afaire li i, .vp-afaire li i { width: 20px; height: 20px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(166, 124, 78, .55); position: relative; }
.ec-afaire li.fait i { box-shadow: none; background: transparent; }
.ec-afaire li.fait i::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--d-bleu) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.5 12.5l3.6 3.6L17.5 8' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat; transform: scale(0); transition: transform .6s 1.1s var(--ease-out); }
.ec.joue .ec-afaire li.fait i::after { transform: scale(1); }
.ec-afaire li.fait { background: rgba(221, 234, 245, .55); }
.ec-club { position: relative; overflow: hidden; color: #D9E0EA; background: radial-gradient(ellipse 80% 80% at 100% 0%, rgba(233, 200, 140, .2), transparent 60%), radial-gradient(ellipse 70% 70% at 0% 100%, rgba(143, 185, 236, .2), transparent 62%), linear-gradient(160deg, #0F2E55, #071A33); box-shadow: inset 0 0 0 1px rgba(233, 200, 140, .35), 0 20px 34px -22px rgba(4, 25, 53, .8); }
.ec-club-ico { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: var(--il-gold-bright); box-shadow: inset 0 0 0 1px rgba(233, 200, 140, .5); margin-bottom: 10px; }
.ec-club-ico svg { width: 18px; height: 18px; }
.ec-club b { font: 600 10px/1 var(--font-cond); letter-spacing: .18em; text-transform: uppercase; color: var(--d-or-clair); }
.ec-club h4 , .ec-club [data-nv="4"]{ margin: 4px 0 6px; font: 600 26px/1 var(--font-titre-app); color: var(--il-champagne); }
.ec-club p { margin: 0; font-size: 12.5px; line-height: 1.5; }
.ec-citation, .vp-citation { position: relative; overflow: hidden; isolation: isolate; min-height: 150px; border-radius: 18px; display: grid; place-items: center; padding: 18px; text-align: center; box-shadow: 0 18px 30px -22px rgba(4, 25, 53, .8); }
.ec-citation picture, .ec-citation img, .vp-citation picture, .vp-citation img { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; }
.ec-citation img, .vp-citation img { object-fit: cover; }
.ec-citation::after, .vp-citation::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(4, 25, 53, .62), rgba(4, 25, 53, .3)); }
.ec-citation p, .vp-citation p { margin: 0; font: italic 500 19px/1.25 var(--font-titre-app); color: var(--il-ivory); text-shadow: 0 2px 10px rgba(4, 25, 53, .6); }
.ec-beo { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px; align-items: center; padding: 16px 18px; border-radius: 18px; background: linear-gradient(100deg, #FFFDF8 0%, #FBF6EE 45%, var(--il-brume) 100%); box-shadow: inset 0 0 0 1px rgba(143, 185, 236, .32); }
.ec-beo ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 18px; }
.ec-beo li { display: grid; justify-items: center; gap: 6px; max-width: 130px; text-align: center; font-size: 11.5px; line-height: 1.35; color: var(--d-texte); }
.ec-beo li svg { width: 26px; height: 26px; color: var(--d-or); }
.ec-legende, .vp-legende { max-width: 86ch; margin: 18px auto 0; text-align: center; font-size: 13.5px; line-height: 1.55; color: #4A5566; }
.ec-legende b { font-weight: 500; color: var(--il-titre-jour); }

/* apparitions de l'aperçu (une fois, à l'écran) */
.ec .ec-carte, .ec .ec-module, .ec .ec-citation, .ec .ec-beo { opacity: 0; transform: translate3d(0, 14px, 0); transition: opacity .9s var(--ease-out), transform 1s var(--ease-out); }
.ec.joue .ec-carte, .ec.joue .ec-module, .ec.joue .ec-citation, .ec.joue .ec-beo { opacity: 1; transform: none; }
.ec.joue .ec-module:nth-child(2) { transition-delay: .08s; } .ec.joue .ec-module:nth-child(3) { transition-delay: .16s; } .ec.joue .ec-module:nth-child(4) { transition-delay: .24s; }
.ec.joue .cote .ec-carte:nth-child(2) { transition-delay: .2s; } .ec.joue .ec-citation { transition-delay: .3s; } .ec.joue .ec-beo { transition-delay: .35s; }

@container ec (max-width: 960px) {
  .ec-app { grid-template-columns: 1fr; }
  .ec-side { display: none; }
  .ec-panneau { grid-template-columns: 1fr; }
  .ec-modules { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ec-col.cote { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ec-citation { display: none; }
}
@container ec (max-width: 560px) {
  .ec-mention { right: 50%; transform: translateX(50%); top: 12px; white-space: nowrap; font-size: 9px; }
  .ec-hero { height: 190px; }
  .ec-haut { top: 46px; right: 14px; }
  .ec-haut .ec-ico { display: none; }
  .ec-bonjour { left: 18px; bottom: 46px; max-width: 80%; }
  .ec-bonjour h3 , .ec-bonjour [data-nv="3"]{ font-size: 32px; }
  .ec-bonjour p { font-size: 14px; }
  .ec-script.droite { display: none; }
  .ec-panneau { padding: 18px 14px 18px; gap: 14px; }
  .ec-titre h4 , .ec-titre [data-nv="4"]{ font-size: 21px; }
  .ec-col.cote { grid-template-columns: 1fr; }
  .ec-modules { gap: 10px; }
  .ec-module { min-height: 170px; padding: 12px; }
  .ec-module b { font-size: 20px; }
  .ec-module small { display: none; }
  .ec-beo { grid-template-columns: 1fr; }
  .ec-beo ul { justify-content: space-between; gap: 8px; }
  .ec-prat-pied .ec-ouvrir { margin-left: 0; }
}

/* ==========================================================================
   VISITE PRATICIEN PRO (.vp) — déplacée sur /praticiens (visite-pro.css, 29/10/2026).
   Ne restent ici que les règles partagées avec l'aperçu de l'espace (.ec-…)
   ========================================================================== */

/* barre latérale */

/* zone principale */

/* changement d'écran : l'ancien s'efface vite, le nouveau entre ensuite — jamais deux interfaces superposées */

/* bandeau photo + barre du haut */

/* panneau ivoire qui chevauche la photo */

/* briques communes */

.pt { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; }
.pt.or { background: #D99A3E; }
.pt.bleu { background: #3C6FB8; }

/* écran 1 : tableau de bord */

/* écran 2 : agenda */

/* écran 3 : dossier */

/* écran 4 : séance */

/* projecteur, curseur, clic — déplacés par transform : aucun décalage de mise en page */

/* commandes de la visite (sur fond nuit) */

/* commandes plus lisibles : Précédent / Suivant en verre azur, Lecture-Pause en bleu doux plein */

/* ---------- composition mobile, d'après la largeur du cadre (navigation basse du CRM) ---------- */

/* composition intermédiaire (tablette, petit portable) */

/* mouvement réduit : pas de curseur ni d'onde de clic */

@media (prefers-reduced-motion: reduce) {
  
  .ec .ec-carte, .ec .ec-module, .ec .ec-citation, .ec .ec-beo { opacity: 1; transform: none; }
}
html.calme .ec .ec-carte, html.calme .ec .ec-module, html.calme .ec .ec-citation, html.calme .ec .ec-beo { opacity: 1; transform: none; }