/* ============================================================
   Marius Yvard - CV Mac OS Classic / Platinum
   Zero-dependance. Palette Vintage Apple + arc-en-ciel.
   ============================================================ */

:root{
  /* --- Primitives palette creme + arc-en-ciel Apple --- */
  --cream:#FAF7F0; --warm-white:#F3EEE4; --paper:#EDE8DC;
  --black:#181412; --charcoal:#2E2A26; --gray:#6B665E;
  --light-gray:#D8D3C8; --border:#CAC5BA;
  --r-green:#61B93A; --r-yellow:#F7C32E; --r-orange:#EC7B1C;
  --r-red:#D62B2B; --r-purple:#8C32CC; --r-blue:#3B88CA;

  /* --- Platinum : biseaux 1px sans flou --- */
  --plat-hi:#FFFFFF; --plat-light:#E7E2D7; --plat-face:#D9D4C8;
  --plat-dark:#9A958B; --plat-darker:#6E6A61; --plat-frame:#181412;

  /* --- Accent (par defaut orange, pilote par [data-accent]) --- */
  --accent:var(--r-orange);
  --accent-text:#A84F07;

  /* --- Bureau : fond trame teinte par l'accent --- */
  --desk-a:color-mix(in srgb, var(--accent) 16%, #7d8893);
  --desk-b:color-mix(in srgb, var(--accent) 24%, #6c7782);

  --font:"Charcoal","Geneva","Lucida Grande","Helvetica Neue",system-ui,-apple-system,sans-serif;
  --menubar-h:20px;
  --tb-h:19px;

  --z-icons:1; --z-win:10; --z-menubar:9000; --z-dropdown:9100; --z-ipod:9500; --z-boot:9999;
}

[data-accent="orange"]{--accent:var(--r-orange); --accent-text:#A84F07;}
[data-accent="blue"]{--accent:var(--r-blue); --accent-text:#1F5C92;}
[data-accent="green"]{--accent:var(--r-green); --accent-text:#3C7A1F;}
[data-accent="purple"]{--accent:var(--r-purple); --accent-text:#6A1FA3;}

*,*::before,*::after{box-sizing:border-box;}
html,body{margin:0;height:100%;}
html{
  font-family:var(--font);
  font-size:15px;
  color:var(--black);
  background:#6c7782;
  cursor:url("../img/cursor-mac-arrow.png") 1 1, auto;
  -webkit-text-size-adjust:100%;
  overflow:hidden;
}
body{
  height:100dvh;
  overflow:hidden;
  line-height:1.5;
}
a,button,label,summary,[role="button"],[role="menuitem"],.icon,.tb-btn,input{
  cursor:url("../img/cursor-mac-hand.png") 5 1, pointer;
}
body.busy, body.busy *{
  cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='%23FAF7F0' stroke='%23181412' stroke-width='2'/%3E%3Cline x1='12' y1='3' x2='12' y2='1' stroke='%23181412' stroke-width='2'/%3E%3Cline x1='12' y1='12' x2='12' y2='6' stroke='%23181412' stroke-width='1.5'/%3E%3Cline x1='12' y1='12' x2='17' y2='12' stroke='%23181412' stroke-width='1.5'/%3E%3C/svg%3E") 12 12, wait !important;
}

img{max-width:100%;display:block;}
h1,h2,h3,p,ul,ol{margin:0;}

.skip-link{
  position:absolute; left:8px; top:-40px; z-index:calc(var(--z-boot) + 1);
  background:var(--black); color:var(--cream); padding:6px 12px;
  border:1px solid var(--cream); font-size:13px; transition:top .12s ease-out;
}
.skip-link:focus{top:24px;}

:focus-visible{outline:2px solid var(--accent-text); outline-offset:1px;}
.tb-btn:focus-visible, .icon:focus-visible{outline:2px solid var(--accent-text); outline-offset:2px;}

/* ---------------- Boot loader : montre de poche animee ---------------- */
.boot{
  position:fixed; inset:0; z-index:var(--z-boot);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
  background:repeating-conic-gradient(#dad5c9 0% 25%, #cfcabe 0% 50%) 0 0/4px 4px, #d4cfc3;
}
.boot .watch-hands{transform-origin:32px 36px; animation:watchspin 1.6s steps(8) infinite;}
.boot .watch-hour{transform-origin:32px 36px; animation:watchspin 6.4s steps(8) infinite;}
.boot-label{font-size:13px; color:var(--charcoal); letter-spacing:.3px;}
@keyframes watchspin{to{transform:rotate(360deg);}}
.boot.is-done{opacity:0; visibility:hidden; transition:opacity .35s ease-out, visibility 0s linear .35s;}

/* ---------------- Barre de menus (20px, ancree en haut) ---------------- */
.menubar{
  position:fixed; top:0; left:0; right:0; height:var(--menubar-h); z-index:var(--z-menubar);
  display:flex; align-items:stretch; justify-content:space-between;
  background:var(--plat-face);
  border-bottom:1px solid var(--plat-frame);
  box-shadow:inset 0 1px 0 var(--plat-hi), inset 0 -1px 0 var(--plat-dark);
  font-size:12px; user-select:none; -webkit-user-select:none;
}
.mb-left{display:flex; align-items:stretch;}
.mb-apple{display:flex; align-items:center; padding:0 9px; background:none; border:0;}
.apple-logo{display:block;}
.mb-item{
  display:flex; align-items:center; padding:0 9px; background:none; border:0;
  font:inherit; color:var(--black); line-height:var(--menubar-h);
}
.mb-item:hover, .mb-apple:hover{background:color-mix(in srgb, var(--black) 8%, transparent);}
.mb-item[aria-expanded="true"], .mb-apple[aria-expanded="true"]{background:var(--black); color:var(--cream);}
.mb-right{display:flex; align-items:center; gap:6px; padding:0 10px; font-variant-numeric:tabular-nums;}
.mb-lang{background:none; border:0; font:inherit; color:var(--black); padding:2px 5px;}
.mb-lang:hover{background:var(--black); color:var(--cream);}
.mb-bullet{color:var(--gray);}
.mb-clock{color:var(--black);}

/* ---------------- Menus deroulants ---------------- */
.mb-menus{position:fixed; top:var(--menubar-h); left:0; z-index:var(--z-dropdown);}
.dropdown{
  position:absolute; top:0; min-width:184px; list-style:none; margin:0; padding:3px 0;
  background:var(--cream);
  border:1px solid var(--plat-frame);
  box-shadow:1px 1px 0 var(--plat-dark), 3px 3px 6px rgba(24,20,18,.32);
  font-size:13px;
}
.dropdown li{padding:3px 18px; color:var(--black); white-space:nowrap;}
.dropdown li[role="menuitem"]:not(.dd-disabled):hover,
.dropdown li[role="menuitem"]:not(.dd-disabled):focus{background:var(--black); color:var(--cream); outline:none;}
.dd-disabled{color:var(--light-gray); cursor:default;}
.dd-sep{padding:0; margin:4px 0; height:1px; background:var(--border);}

/* ---------------- Bureau ---------------- */
.desktop{
  position:fixed; top:var(--menubar-h); left:0; right:0; bottom:0; z-index:var(--z-icons);
  overflow:hidden;
  background-color:#6c7782;
  background-image:repeating-conic-gradient(var(--desk-a) 0% 25%, var(--desk-b) 0% 50%);
  background-size:4px 4px;
}

/* ---------------- Icones du bureau (grille stricte) ---------------- */
.icons{
  position:absolute; top:10px; right:8px; width:96px; margin:0; padding:0; list-style:none;
  display:grid; grid-auto-rows:78px; gap:2px; justify-items:center;
}
.icon{
  display:flex; flex-direction:column; align-items:center; gap:3px; width:88px; padding:4px 2px;
  background:none; border:1px solid transparent; color:var(--cream); font:inherit;
}
.icon-glyph{width:48px; height:40px; display:flex; align-items:center; justify-content:center;}
.icon-glyph[data-folder]::before{
  content:""; width:46px; height:38px; display:block;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 40'%3E%3Cpath d='M3 9 h14 l4 4 h23 a2 2 0 0 1 2 2 v20 a2 2 0 0 1 -2 2 H3 a2 2 0 0 1 -2 -2 V11 a2 2 0 0 1 2 -2 z' fill='%23F0C04A' stroke='%23181412' stroke-width='1.4'/%3E%3Cpath d='M3 15 H46' stroke='%23181412' stroke-width='1' opacity='.35'/%3E%3C/svg%3E") center/contain no-repeat;
}
.icon-glyph[data-doc]::before{
  content:""; width:34px; height:40px; display:block;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 40'%3E%3Cpath d='M3 2 h20 l8 8 v28 a1 1 0 0 1 -1 1 H3 a1 1 0 0 1 -1 -1 V3 a1 1 0 0 1 1 -1z' fill='%23FDFBF7' stroke='%23181412' stroke-width='1.4'/%3E%3Cpath d='M23 2 v8 h8' fill='none' stroke='%23181412' stroke-width='1.4'/%3E%3Cpath d='M7 18 H27 M7 23 H27 M7 28 H22' stroke='%236B665E' stroke-width='1.4'/%3E%3C/svg%3E") center/contain no-repeat;
}
.icon-label{
  font-size:11.5px; line-height:1.25; text-align:center; padding:0 3px; max-width:88px;
  text-shadow:0 1px 0 rgba(24,20,18,.55); word-break:break-word;
}
.icon.is-selected .icon-label{background:var(--accent-text); color:#fff; text-shadow:none; border-radius:1px;}
.icon.is-selected .icon-glyph{filter:brightness(.82) saturate(1.1);}
.icon:hover .icon-label{text-decoration:underline;}

/* ===================== Fenetres Platinum ===================== */
.window{
  position:absolute; z-index:var(--z-win);
  min-width:248px; width:420px; max-width:94vw; max-height:calc(100dvh - var(--menubar-h) - 16px);
  display:flex; flex-direction:column;
  background:var(--cream);
  border:1px solid var(--plat-frame);
  box-shadow:inset 1px 1px 0 var(--plat-hi), inset -1px -1px 0 var(--plat-dark), 2px 2px 0 rgba(24,20,18,.30);
}
.window[hidden]{display:none;}

.title-bar{
  position:relative; display:flex; align-items:center; gap:5px; height:var(--tb-h); padding:0 4px;
  background:var(--plat-face);
  border-bottom:1px solid var(--plat-frame);
  box-shadow:inset 0 1px 0 var(--plat-hi);
  touch-action:none; user-select:none; -webkit-user-select:none;
}
.tb-stripes{
  flex:1 1 auto; height:11px; align-self:center; min-width:8px;
  background:repeating-linear-gradient(to bottom, var(--plat-darker) 0 1px, transparent 1px 2px);
}
.tb-title{
  flex:0 1 auto; font-size:12px; padding:0 7px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  background:var(--plat-face); max-width:60%;
}
.tb-btn{
  flex:0 0 auto; width:13px; height:13px; padding:0; border:1px solid var(--plat-frame);
  background:var(--plat-light);
  box-shadow:inset 1px 1px 0 var(--plat-hi), inset -1px -1px 0 var(--plat-dark);
  position:relative;
}
.tb-btn:active{box-shadow:inset -1px -1px 0 var(--plat-hi), inset 1px 1px 0 var(--plat-dark);}
.tb-zoom::before{content:""; position:absolute; left:1px; top:1px; width:5px; height:5px; border:1px solid var(--plat-darker);}
.tb-shade::before{content:""; position:absolute; left:1px; right:1px; top:4px; height:2px; border-top:1px solid var(--plat-darker); border-bottom:1px solid var(--plat-darker);}

/* Etat actif / inactif pilote par la classe .active (variables CSS) */
.window:not(.active){box-shadow:inset 1px 1px 0 var(--plat-light), inset -1px -1px 0 var(--plat-dark), 2px 2px 0 rgba(24,20,18,.16);}
.window:not(.active) .title-bar{background:var(--paper);}
.window:not(.active) .tb-stripes{opacity:0;}
.window:not(.active) .tb-title{color:var(--gray); background:var(--paper);}
.window:not(.active) .tb-btn{background:var(--paper); border-color:var(--plat-dark); box-shadow:none;}

.window.shaded{height:auto !important; min-height:0;}
.window.shaded .window-body, .window.shaded .resize-handle{display:none;}

.window-body{
  flex:1 1 auto; min-height:0; overflow:auto; padding:14px 16px 18px; background:var(--cream);
  scrollbar-width:auto; scrollbar-color:var(--plat-dark) var(--plat-face);
}
.window-body::-webkit-scrollbar{width:15px; height:15px;}
.window-body::-webkit-scrollbar-track{background:var(--plat-face); box-shadow:inset 1px 1px 0 var(--plat-dark), inset -1px -1px 0 var(--plat-hi);}
.window-body::-webkit-scrollbar-thumb{
  background:#cfcabe url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0IiBoZWlnaHQ9IjQiIHNoYXBlLXJlbmRlcmluZz0iY3Jpc3BFZGdlcyI+PHJlY3Qgd2lkdGg9IjQiIGhlaWdodD0iNCIgZmlsbD0iI2NmY2FiZSIvPjxyZWN0IHdpZHRoPSIyIiBoZWlnaHQ9IjIiIGZpbGw9IiM5YTk1OGIiLz48cmVjdCB4PSIyIiB5PSIyIiB3aWR0aD0iMiIgaGVpZ2h0PSIyIiBmaWxsPSIjOWE5NThiIi8+PC9zdmc+") repeat;
  border:1px solid var(--plat-frame);
  box-shadow:inset 1px 1px 0 var(--plat-hi), inset -1px -1px 0 var(--plat-dark);
}
.window-body::-webkit-scrollbar-corner{background:var(--plat-face);}

.resize-handle{
  position:absolute; right:0; bottom:0; width:15px; height:15px; z-index:2; cursor:nwse-resize; touch-action:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15'%3E%3Crect width='15' height='15' fill='%23D9D4C8'/%3E%3Cpath d='M14 4 L4 14 M14 8 L8 14 M14 12 L12 14' stroke='%236E6A61' stroke-width='1'/%3E%3C/svg%3E") no-repeat;
}

/* ===================== Contenu : Profil ===================== */
.win-h2{font-size:18px; margin-bottom:10px; padding-bottom:5px; border-bottom:1px solid var(--border);}
.profil-head{display:flex; gap:14px; align-items:flex-start; margin-bottom:12px;}
.profil-photo{width:120px; height:120px; flex:0 0 auto; border:1px solid var(--plat-frame); box-shadow:inset 1px 1px 0 var(--plat-hi), inset -1px -1px 0 var(--plat-dark); background:var(--warm-white);}
.profil-id{min-width:0;}
.profil-dispo{font-size:12px; color:var(--charcoal); margin-bottom:2px;}
.dispo-dot{display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--r-green); margin-right:5px; vertical-align:baseline; box-shadow:0 0 0 1px rgba(24,20,18,.35); animation:pulse 2.2s ease-in-out infinite;}
@keyframes pulse{0%,100%{opacity:1} 50%{opacity:.4}}
.profil-name{font-size:30px; line-height:1.05; letter-spacing:-.5px; margin:1px 0 3px;}
.profil-role{font-size:14px; color:var(--charcoal); margin-bottom:8px;}
.pills{display:flex; flex-wrap:wrap; gap:6px; margin:8px 0;}
.pill{font-size:12px; padding:3px 9px; background:var(--warm-white); border:1px solid var(--border); box-shadow:inset 1px 1px 0 var(--plat-hi), inset -1px -1px 0 var(--plat-dark);}
.btn-row{display:flex; flex-wrap:wrap; gap:8px; margin-top:10px;}

.btn{
  display:inline-block; padding:5px 13px; font:inherit; font-size:13px; color:var(--black); text-decoration:none;
  background:var(--plat-light); border:1px solid var(--plat-frame);
  box-shadow:inset 1px 1px 0 var(--plat-hi), inset -1px -1px 0 var(--plat-dark), 1px 1px 0 rgba(24,20,18,.22);
}
.btn:hover{background:var(--plat-face);}
.btn:active{box-shadow:inset -1px -1px 0 var(--plat-hi), inset 1px 1px 0 var(--plat-dark); transform:translate(1px,1px);}
.btn-primary{box-shadow:inset 1px 1px 0 var(--plat-hi), inset -1px -1px 0 var(--plat-dark), 0 0 0 2px var(--accent), 1px 1px 0 rgba(24,20,18,.22);}
.btn-primary:active{box-shadow:inset -1px -1px 0 var(--plat-hi), inset 1px 1px 0 var(--plat-dark), 0 0 0 2px var(--accent);}

.prose p{margin:0 0 9px; max-width:64ch;}
.lk{color:var(--accent-text); text-decoration:underline; text-underline-offset:2px;}
.lk:hover{text-decoration:none; background:var(--accent-text); color:#fff; box-shadow:0 0 0 2px var(--accent-text);}

.stat-row{display:grid; grid-template-columns:repeat(2,1fr); gap:8px; margin-top:8px;}
.stat{padding:8px 10px; background:var(--warm-white); border-top:1px solid var(--plat-hi); border-left:1px solid var(--plat-hi); border-right:1px solid var(--plat-dark); border-bottom:1px solid var(--plat-dark);}
.stat-num{display:block; font-size:24px; color:var(--accent-text); font-variant-numeric:tabular-nums; line-height:1;}
.stat-lab{display:block; font-size:11.5px; color:var(--charcoal); margin-top:3px;}

/* ===================== Experiences ===================== */
.xp-list{list-style:none; margin:0; padding:0;}
.xp{padding:10px 0; border-bottom:1px dashed var(--border);}
.xp:last-child{border-bottom:0;}
.xp-top{display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; font-size:12px; color:var(--gray);}
.xp-co{font-weight:400; color:var(--charcoal);}
.xp-now{color:var(--accent-text);}
.xp-role{font-size:15px; margin:2px 0 5px;}
.xp-bullets{margin:0; padding-left:18px;}
.xp-bullets li{margin:0 0 3px;}
.xp-desc{margin:2px 0 0; color:var(--charcoal);}

/* ===================== Formation / Competences / Bench ===================== */
.edu-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:10px;}
.edu, .sk-cat, .bv, .case{
  padding:10px 12px; background:var(--warm-white);
  border-top:1px solid var(--plat-hi); border-left:1px solid var(--plat-hi);
  border-right:1px solid var(--plat-dark); border-bottom:1px solid var(--plat-dark);
}
.edu-deg, .sk-h, .bv-t{font-size:14px; margin-bottom:3px;}
.edu-school{font-size:13px; color:var(--charcoal);}
.edu-date, .bv-date{font-size:12px; color:var(--gray); margin:2px 0 5px;}
.edu-note{font-size:12.5px; color:var(--charcoal);}
.sk-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:10px;}
.sk-h{padding-bottom:3px; border-bottom:1px solid var(--border);}
.sk-items{list-style:none; margin:6px 0 0; padding:0; font-size:13px;}
.sk-items li{padding:2px 0 2px 14px; position:relative;}
.sk-items li::before{content:""; position:absolute; left:1px; top:9px; width:6px; height:6px; background:var(--accent);}
.lang-row{display:flex; flex-wrap:wrap; gap:18px; margin-top:12px; font-size:13px; padding-top:8px; border-top:1px solid var(--border);}

/* ===================== Etudes de cas ===================== */
.case{margin-bottom:12px;}
.case-tag{font-size:11px; letter-spacing:.4px; color:var(--accent-text); text-transform:uppercase;}
.case-title{font-size:16px; margin:2px 0 0;}
.case-sub{font-size:12px; color:var(--gray); margin-bottom:6px;}
.case p{font-size:13px; margin:0 0 5px;}
.kpis{display:flex; gap:14px; margin-top:6px;}
.kpi{font-size:12px; color:var(--charcoal);}
.kpi b{display:block; font-size:18px; color:var(--accent-text); line-height:1;}

/* ===================== Publications ===================== */
.pub{display:block; text-decoration:none; color:inherit; padding:10px 12px; margin-bottom:9px; background:var(--warm-white); border:1px solid var(--border); box-shadow:inset 1px 1px 0 var(--plat-hi), inset -1px -1px 0 var(--plat-dark);}
.pub:hover{background:var(--cream); box-shadow:inset 1px 1px 0 var(--plat-hi), inset -1px -1px 0 var(--plat-dark), 0 0 0 2px var(--accent);}
.pub-kind{display:inline-block; font-size:10.5px; letter-spacing:.5px; text-transform:uppercase; color:#fff; background:var(--accent-text); padding:1px 6px; margin-bottom:4px;}
.pub-t{font-size:14px; margin:2px 0;}
.pub-meta{font-size:12px; color:var(--gray);}
.pub-ex{font-size:12.5px; color:var(--charcoal); margin-top:4px;}
.pub-orcid{font-size:12px; margin-top:4px;}

/* ===================== Voyages / Benevolat ===================== */
.vy-intro{font-size:14px; margin-bottom:10px;}
.vy-kpis, .vy-kpi{display:flex; gap:8px; align-items:baseline;}
.vy-kpis{gap:26px; margin:10px 0;}
.vy-kpi b{font-size:30px; color:var(--accent-text); line-height:1;}
.vy-note{font-size:13px; color:var(--charcoal);}
.bv-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:10px;}
.bv-org{font-size:12.5px; color:var(--charcoal);}

/* ===================== Contact ===================== */
.ct-sub{font-size:13px; color:var(--charcoal); margin:4px 0 12px; max-width:54ch;}
.ct-mail{margin-bottom:12px;}
.ct-list{list-style:none; margin:0; padding:0;}
.ct-list li{display:flex; gap:10px; padding:5px 0; border-bottom:1px dashed var(--border); font-size:13px;}
.ct-k{flex:0 0 96px; color:var(--gray);}
.ct-v{min-width:0; word-break:break-word;}

/* ===================== Temoignage ===================== */
.quote{margin:14px 0 0; padding:11px 13px; background:var(--charcoal); color:var(--cream); border:1px solid var(--plat-frame);}
.quote blockquote{margin:0 0 8px; font-size:13.5px; line-height:1.55;}
.quote figcaption{display:flex; align-items:center; gap:9px; font-size:12px; color:var(--light-gray);}
.quote figcaption b{color:#fff;}
.quote .quote-av{width:40px; height:40px; border-radius:50%; flex:0 0 auto;}
.quote .lk{color:#F3C58C;}

/* ===================== Tableau de bord (accent) ===================== */
.cp-accent{border:1px solid var(--border); padding:10px 12px; margin:6px 0 10px;}
.cp-accent legend{font-size:12px; padding:0 5px; color:var(--charcoal);}
.cp-swatches{display:flex; gap:16px; flex-wrap:wrap;}
.cp-sw{position:relative; display:flex; flex-direction:column; align-items:center; gap:5px; font-size:12px;}
.cp-sw input{position:absolute; opacity:0; width:1px; height:1px;}
.cp-chip{width:38px; height:26px; border:1px solid var(--plat-frame); box-shadow:inset 1px 1px 0 rgba(255,255,255,.55), inset -1px -1px 0 rgba(24,20,18,.35);}
.cp-sw input:checked + .cp-chip{outline:2px solid var(--black); outline-offset:2px;}
.cp-sw input:focus-visible + .cp-chip{outline:2px solid var(--accent-text); outline-offset:2px;}
.cp-note{font-size:12px; color:var(--gray); margin:8px 0 12px; max-width:48ch;}

/* ===================== Animation d'ouverture des fenetres ===================== */
.window.opening{animation:winopen .15s cubic-bezier(.16,1,.3,1);}
@keyframes winopen{from{transform:scale(.92); opacity:.4;} to{transform:scale(1); opacity:1;}}
.window.dragging, .window.resizing{will-change:left,top,width,height;}

/* ===================== iPod Classic (mobile) ===================== */
.ipod{display:none;}
.ipod-frame{display:flex; flex-direction:column; gap:18px;}
.ipod-screen{
  --screen-bg:color-mix(in srgb, var(--accent) 12%, #d7ece4);
  display:flex; flex-direction:column; flex:1 1 auto; min-height:160px; overflow:hidden;
  background:var(--screen-bg);
  border:1px solid var(--plat-frame);
  box-shadow:inset 1px 1px 0 var(--plat-dark), inset -1px -1px 0 var(--plat-hi);
}
.ipod-statusbar{display:flex; justify-content:space-between; align-items:center; padding:3px 8px; font-size:11px; color:var(--charcoal); background:color-mix(in srgb, var(--accent) 22%, #c7e0d6); border-bottom:1px solid rgba(24,20,18,.25);}
.ipod-batt{width:18px; height:9px; border:1px solid var(--charcoal); position:relative; background:linear-gradient(to right, var(--charcoal) 70%, transparent 70%);}
.ipod-batt::after{content:""; position:absolute; right:-3px; top:2px; width:2px; height:5px; background:var(--charcoal);}
.ipod-view{flex:1 1 auto; min-height:0; overflow:auto; -webkit-overflow-scrolling:touch;}
.ipod-menu{list-style:none; margin:0; padding:0;}
.ipod-opt{display:flex; justify-content:space-between; align-items:center; gap:8px; padding:8px 11px; font-size:14px; color:var(--black); border-bottom:1px solid rgba(24,20,18,.08);}
.ipod-opt .chev{opacity:.55;}
.ipod-opt[aria-selected="true"]{background:var(--accent-text); color:#fff;}
.ipod-content{padding:11px 13px; font-size:13px; line-height:1.5;}
.ipod-content h2{font-size:16px; margin-bottom:6px;}
.ipod-content h3{font-size:14px; margin:8px 0 2px;}
.ipod-content :is(p,li){margin:0 0 5px;}
.ipod-content ul,.ipod-content ol{padding-left:18px;}
.ipod-content .btn-row,.ipod-content .pills,.ipod-content .profil-photo,.ipod-content .resize-handle{display:none;}
.ipod-content a{color:var(--accent-text);}
.ipod-wheel{
  position:relative; align-self:center; width:min(74vw,260px); aspect-ratio:1; border-radius:50%; flex:0 0 auto;
  background:#E3DFD6; border:1px solid var(--plat-dark);
  box-shadow:inset 2px 2px 0 var(--plat-hi), inset -2px -2px 0 var(--plat-dark), 0 2px 4px rgba(24,20,18,.3);
  display:grid; place-items:center; touch-action:none; user-select:none; -webkit-user-select:none;
}
.ipod-center{
  width:40%; aspect-ratio:1; border-radius:50%; background:#EDE9E0; border:1px solid var(--plat-dark);
  box-shadow:inset 1px 1px 0 var(--plat-hi), inset -1px -1px 0 var(--plat-dark);
}
.ipod-center:active{box-shadow:inset -1px -1px 0 var(--plat-hi), inset 1px 1px 0 var(--plat-dark);}
.ipod-lbl{position:absolute; background:none; border:0; font:inherit; font-size:11px; letter-spacing:.5px; color:var(--charcoal); padding:6px;}
.ipod-lbl-menu{top:6px; left:50%; transform:translateX(-50%);}
.ipod-lbl-prev{left:6px; top:50%; transform:translateY(-50%);}
.ipod-lbl-next{right:6px; top:50%; transform:translateY(-50%);}
.ipod-lbl-play{bottom:6px; left:50%; transform:translateX(-50%);}
.ipod-hint{font-size:12px; color:var(--charcoal); text-align:center; max-width:280px;}

@media (max-width:767px){
  .menubar, .desktop, .boot{display:none !important;}
  html, body{overflow:hidden;}
  .ipod{
    display:flex; position:fixed; inset:0; z-index:var(--z-ipod);
    flex-direction:column; align-items:center; justify-content:center; gap:8px; padding:8px;
    background:repeating-conic-gradient(#dad5c9 0 25%, #cfcabe 0 50%) 0 0/4px 4px, #d4cfc3;
  }
  .ipod-frame{
    width:min(96vw,460px); height:calc(100dvh - 46px); max-height:840px; padding:14px; background:#ECE8DF;
    border:1px solid var(--plat-frame); border-radius:24px;
    box-shadow:inset 1px 1px 0 var(--plat-hi), inset -2px -2px 0 var(--plat-dark), 0 3px 8px rgba(24,20,18,.35);
  }
}

/* ===================== Repli sans JavaScript / impression ===================== */
.no-js .boot, .no-js .menubar, .no-js .icons, .no-js .ipod, .no-js .resize-handle, .no-js .tb-btn{display:none !important;}
html.no-js, .no-js body{overflow:auto; height:auto; background:var(--cream);}
.no-js .desktop{position:static; inset:auto; height:auto; overflow:visible; background:var(--cream); padding:18px 16px;}
.no-js .window{position:static; display:block; width:100%; max-width:780px; max-height:none; margin:0 auto 18px; box-shadow:inset 1px 1px 0 var(--plat-hi), inset -1px -1px 0 var(--plat-dark), 0 1px 0 var(--border);}
.no-js .window[hidden]{display:block !important;}
.no-js .window-body{overflow:visible;}
.nojs-banner{position:relative; z-index:1; background:var(--accent-text); color:#fff; padding:10px 14px; font-size:13px; text-align:center;}
.nojs-banner a{color:#fff;}

@media print{
  html,body{overflow:visible; height:auto; background:#fff; cursor:auto;}
  .boot,.menubar,.icons,.ipod,.resize-handle,.tb-btn,.mb-menus{display:none !important;}
  .desktop{position:static; height:auto; overflow:visible; background:#fff; padding:0;}
  .window{position:static; display:block; width:100%; max-width:none; max-height:none; margin:0 0 14px; box-shadow:none; border:1px solid #999; break-inside:avoid;}
  .window[hidden]{display:block !important;}
  .window-body{overflow:visible;}
  .title-bar{background:#eee;}
  .lk{color:#000; text-decoration:underline;}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important;}
  .dispo-dot, .boot .watch-hands, .boot .watch-hour, .window.opening{animation:none !important;}
}

/* ===================== Fond d'ecran mac-hello + parallaxe ===================== */
.desk-bg{
  position:absolute; inset:-44px; z-index:0; pointer-events:none;
  background:url("../img/mac-hello.webp") center center / min(58vw, 440px) no-repeat;
  opacity:.9; transform:translate3d(0,0,0);
  transition:transform .25s cubic-bezier(.22,1,.36,1); will-change:transform;
}
.icons, .window{ position:absolute; }
@media (prefers-reduced-motion:reduce){ .desk-bg{transition:none; transform:none !important;} }
@media (max-width:767px){ .desk-bg{display:none;} }

/* ===================== Icones de section, logos, carte ===================== */
.win-head{display:flex; align-items:center; gap:10px; margin-bottom:10px; padding-bottom:5px; border-bottom:1px solid var(--border);}
.win-head .win-h2{border:0; margin:0; padding:0;}
.win-ico{width:38px; height:38px; flex:0 0 auto; object-fit:contain;}
.xp-logo{width:20px; height:20px; vertical-align:-4px; margin-right:6px; object-fit:contain;}
.edu-logo{height:24px; width:auto; max-width:118px; vertical-align:-7px; margin-right:7px; object-fit:contain;}
.bv{text-align:center;}
.bv-ico{width:42px; height:42px; display:block; margin:0 auto 6px; object-fit:contain;}
.vy-map-wrap{margin:12px 0 0;}
.vy-map{width:100%; height:auto; display:block; border:1px solid var(--plat-frame); box-shadow:inset 1px 1px 0 var(--plat-hi), inset -1px -1px 0 var(--plat-dark);}
.ct-list li{align-items:center;}
.ct-ico{width:16px; height:16px; flex:0 0 auto; margin-right:2px; object-fit:contain;}

/* ===================== Carte voyages : epingles + pays ===================== */
.travel-pin-defs{position:absolute; width:0; height:0; overflow:hidden;}
.vy-map-inner{position:relative; display:block; line-height:0; border:1px solid var(--plat-frame); box-shadow:inset 1px 1px 0 var(--plat-hi), inset -1px -1px 0 var(--plat-dark);}
.vy-map{width:100%; height:auto; display:block; border:0; box-shadow:none;}
.vy-pins{position:absolute; inset:0;}
.vy-pin{position:absolute; width:9px; height:16px; transform:translate(-50%,-100%); line-height:0; cursor:help; padding:0; background:none; border:0;}
.vy-pin svg{width:100%; height:100%; display:block; filter:drop-shadow(0 1px 0 rgba(24,20,18,.4));}
.vy-pin:hover, .vy-pin:focus-visible{z-index:2; transform:translate(-50%,-100%) scale(1.25); outline:none;}
.vy-cap{font-size:11px; color:var(--gray); margin-top:4px; line-height:1.3;}
.vy-list{list-style:none; margin:10px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:5px;}
.vy-list li{font-size:12px; padding:2px 8px; background:var(--warm-white); border:1px solid var(--border); box-shadow:inset 1px 1px 0 var(--plat-hi), inset -1px -1px 0 var(--plat-dark);}

/* ===================== Fond mac-hello : opacite reduite + halo leger ===================== */
.desk-bg{
  opacity:.64;
  background:
    url("../img/mac-hello.webp") center center / min(58vw, 440px) no-repeat,
    radial-gradient(circle 420px at 50% 50%, rgba(255,253,247,.72), rgba(255,253,247,0));
}
/* Tooltip pays des epingles */
.map-tip{
  position:fixed; left:0; top:0; z-index:9600; pointer-events:none;
  background:var(--black); color:var(--cream); font-size:12px; padding:3px 8px;
  border:1px solid var(--plat-frame); box-shadow:1px 1px 0 var(--plat-dark);
  opacity:0; transition:opacity .1s ease-out; white-space:nowrap;
}
.map-tip.on{opacity:1;}
@media (prefers-reduced-motion:reduce){ .map-tip{transition:none;} }

/* ===================== Drapeaux pays (images SVG, rendu cross-OS) ===================== */
.vy-flag{width:21px; height:14px; vertical-align:-2px; margin-right:5px; border:1px solid var(--plat-dark); object-fit:cover; background:#fff;}

/* ===================== Embleme systeme Gadzarts (menu + boot) ===================== */
.mb-gadz{display:block; height:16px; width:auto;}
.boot-gadz{display:block; width:34px; height:auto; margin-bottom:8px;}

/* ===================== Ecran de demarrage (style installeur Poolsuite) ===================== */
.boot-card{
  display:flex; gap:16px; align-items:center; max-width:440px; width:88vw; padding:18px 20px;
  background:var(--cream); border:1px solid var(--plat-frame); border-radius:6px;
  box-shadow:inset 1px 1px 0 var(--plat-hi), inset -1px -1px 0 var(--plat-dark), 2px 2px 0 rgba(24,20,18,.3);
}
.boot-gadz{display:block; width:46px; height:auto; flex:0 0 auto; margin:0;}
.boot-info{flex:1 1 auto; min-width:0;}
.boot-word{font-family:Georgia,"Times New Roman",serif; font-size:30px; line-height:1; letter-spacing:.4px; margin-bottom:5px;}
.boot-ver{font-size:13px; font-weight:700; margin-bottom:2px;}
.boot-cred{font-size:12px; font-style:italic; color:var(--charcoal); margin-bottom:2px;}
.boot-copy{font-size:11px; color:var(--gray); margin-bottom:11px;}
.boot-status{display:flex; justify-content:space-between; gap:10px; font-size:12px; margin-bottom:5px; font-variant-numeric:tabular-nums;}
.boot-track{height:14px; background:var(--warm-white); border:1px solid var(--plat-frame); box-shadow:inset 1px 1px 0 var(--plat-dark), inset -1px -1px 0 var(--plat-hi); overflow:hidden;}
.boot-fill{height:100%; width:0; background:repeating-linear-gradient(90deg, var(--accent) 0 7px, color-mix(in srgb, var(--accent) 55%, #fff) 7px 9px); transition:width .12s linear;}
@media (prefers-reduced-motion:reduce){ .boot-fill{transition:none;} }

/* ===================== iPod : menu scinde + apercu + selection brillante (tvillarete) ===================== */
.ipod-split{display:flex; height:100%; min-height:0;}
.ipod-listcol{flex:1 1 56%; min-width:0; overflow:auto; -webkit-overflow-scrolling:touch; border-right:1px solid rgba(24,20,18,.22);}
.ipod-preview{flex:1 1 44%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; padding:8px; text-align:center; background:color-mix(in srgb, var(--accent) 7%, #e7f1ec);}
.ipod-preview img{width:52px; height:52px; object-fit:contain;}
.ipv-title{font-size:13px; font-weight:700; line-height:1.15;}
.ipv-teaser{font-size:11px; color:var(--charcoal); line-height:1.25;}
.ipod-opt[aria-selected="true"]{background:var(--accent-text); background-image:linear-gradient(180deg, rgba(255,255,255,.42), rgba(255,255,255,0) 48%, rgba(0,0,0,.14)); color:#fff;}
.ipod-content.ipod-anim-in{animation:ipodSlide .22s cubic-bezier(.22,1,.36,1);}
@keyframes ipodSlide{from{transform:translateX(55%); opacity:.35;} to{transform:translateX(0); opacity:1;}}
.ipod-wheel{background:radial-gradient(circle at 50% 36%, #f4f1ea, #ddd8cd 62%, #c7c2b6);}
@media (prefers-reduced-motion:reduce){ .ipod-content.ipod-anim-in{animation:none;} }

/* ===================== A propos de cet ordinateur + Corbeille + horloge ===================== */
.window--sm{width:340px;}
.sys-head{display:flex; gap:14px; align-items:center; margin-bottom:12px; padding-bottom:10px; border-bottom:1px solid var(--border);}
.sys-logo{width:48px; height:auto; flex:0 0 auto;}
.sys-os{font-size:20px; margin:0; line-height:1.1;}
.sys-ver{font-size:12px; color:var(--gray);}
.sys-spec{margin:0;}
.sys-spec > div{display:flex; justify-content:space-between; gap:12px; padding:5px 0; border-bottom:1px dashed var(--border); font-size:13px;}
.sys-spec dt{color:var(--gray); margin:0;}
.sys-spec dd{margin:0; text-align:right; color:var(--charcoal);}
.sys-foot{font-size:11px; color:var(--gray); margin-top:12px; text-align:center;}
.cb-body{text-align:center; padding:26px 12px; color:var(--charcoal); font-size:14px;}
#mb-clock{cursor:url("../img/cursor-mac-hand.png") 5 1, pointer;}

/* ===================== Sous-dossiers Finder (HD imbrique) ===================== */
.window--finder{width:288px;}
.finder-body{padding:6px 0 8px;}
.finder-list{list-style:none; margin:0; padding:0;}
.finder-list li{border-bottom:1px solid rgba(24,20,18,.06);}
.finder-list li:last-child{border-bottom:0;}
.fr-row{display:flex; align-items:center; gap:9px; width:100%; padding:6px 12px; background:none; border:0; font:inherit; font-size:13px; text-align:left; color:var(--black);}
.fr-ico{width:18px; height:18px; object-fit:contain; flex:0 0 auto;}
.fr-name{flex:1 1 auto; min-width:0;}
.fr-arrow{color:var(--gray); flex:0 0 auto; font-size:12px;}
.fr-row:hover{background:var(--paper);}
.fr-row.is-selected{background:var(--accent-text); color:#fff;}
.fr-row.is-selected .fr-arrow{color:rgba(255,255,255,.75);}
.fr-row.is-selected:hover{background:var(--accent-text);}

/* ===================== Photos polaroid + lightbox ===================== */
.win-subh{font-size:15px; margin:16px 0 9px; padding-bottom:4px; border-bottom:1px solid var(--border);}
.vy-polaroids{columns:142px; column-gap:14px;}
.polaroid{display:block; width:100%; margin:0 0 14px; break-inside:avoid; padding:7px 7px 10px; background:var(--cream); border:1px solid var(--border); box-shadow:2px 3px 0 rgba(24,20,18,.14); font:inherit; text-align:center; cursor:url("../img/cursor-mac-hand.png") 5 1, zoom-in;}
.vy-polaroids .polaroid:nth-child(odd){transform:rotate(-1.5deg);}
.vy-polaroids .polaroid:nth-child(even){transform:rotate(1.4deg);}
.polaroid:hover, .polaroid:focus-visible{transform:rotate(0) scale(1.03); position:relative; z-index:2; outline:none;}
.polaroid:focus-visible{outline:2px solid var(--accent-text); outline-offset:3px;}
.polaroid img{display:block; width:100%; height:auto;}
.pol-cap{display:block; font-size:12px; font-style:italic; color:var(--gray); padding-top:5px;}
.xp-pola{float:right; width:118px; margin:0 0 8px 12px;}
.xp-pola img{display:block;}
@media (prefers-reduced-motion:no-preference){ .polaroid{transition:transform .18s cubic-bezier(.16,1,.3,1);} }
.lightbox{position:fixed; inset:0; z-index:9700; display:flex; align-items:center; justify-content:center; background:rgba(24,20,18,.88); padding:20px;}
.lightbox[hidden]{display:none;}
.lightbox img{max-width:min(88vw,960px); max-height:84vh; border:7px solid #fff; box-shadow:0 6px 30px rgba(0,0,0,.5);}
.lb-close{position:absolute; top:14px; right:18px; width:40px; height:40px; font-size:20px; background:var(--plat-light); border:1px solid var(--plat-frame); box-shadow:inset 1px 1px 0 var(--plat-hi), inset -1px -1px 0 var(--plat-dark);}

/* ===================== Widgets de bureau ===================== */
.widget{width:auto;}
.widget--card{width:232px;} .widget--sticky{width:188px;} .widget--cal{width:230px;} .widget--ticker{width:300px;}
.widget--launcher{width:220px;} .widget--calc{width:198px;} .widget--clock{width:188px;} .widget--puzzle{width:196px;} .widget--notes{width:200px;}
.widget .window-body{padding:10px 12px;}

.wcard-head{display:flex; gap:10px; align-items:center; margin-bottom:9px;}
.wcard-photo{border:1px solid var(--plat-frame); box-shadow:inset 1px 1px 0 var(--plat-hi), inset -1px -1px 0 var(--plat-dark);}
.wcard-name{font-size:15px; font-weight:700;}
.wcard-role{font-size:12px; color:var(--accent-text);}
.wcard-actions{display:flex; flex-wrap:wrap; gap:5px;}
.wcard-actions .btn{font-size:12px; padding:3px 8px;}

.widget--sticky .window-body{background:#FBEFA8;}
.widget--notes .window-body{background:#BFE3F2;}
.wstk-top{font-size:12px; color:var(--charcoal);}
.wstk-big{font-size:18px; font-weight:700; margin:2px 0 6px; font-family:Georgia,"Times New Roman",serif;}
.wstk-list{list-style:none; margin:0 0 6px; padding:0; font-size:13px;}
.wstk-list li{padding:2px 0 2px 14px; position:relative;}
.wstk-list li::before{content:""; position:absolute; left:1px; top:9px; width:6px; height:6px; background:var(--accent);}
.wstk-sig{font-size:11px; font-style:italic; color:var(--gray);}

.widget--ticker .window-body{padding:7px 0; overflow:hidden;}
.wtick{overflow:hidden; white-space:nowrap;}
.wtick-track{display:inline-block; white-space:nowrap; animation:tickscroll 24s linear infinite; will-change:transform;}
.wtick-track span{display:inline-block; padding:0 16px; font-size:13px; color:var(--charcoal); border-right:1px solid var(--border);}
@keyframes tickscroll{from{transform:translateX(0);} to{transform:translateX(-50%);}}

.wcal-month{font-size:13px; font-weight:700; text-align:center; margin-bottom:6px; text-transform:capitalize;}
.wcal-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:2px; margin-bottom:9px;}
.wc-dow{font-size:10px; color:var(--gray); text-align:center;}
.wc-day{font-size:12px; text-align:center; padding:3px 0;}
.wc-today{background:var(--accent-text); color:#fff; border-radius:2px;}
.wcal-btn{display:block; width:100%; text-align:center; box-sizing:border-box;}

.wlaunch{display:grid; grid-template-columns:1fr 1fr; gap:5px;}
.launch-btn{display:flex; align-items:center; gap:7px; padding:5px 7px; background:var(--plat-light); border:1px solid var(--plat-frame); box-shadow:inset 1px 1px 0 var(--plat-hi), inset -1px -1px 0 var(--plat-dark); font:inherit; font-size:12px; text-align:left; min-width:0;}
.launch-btn span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.launch-btn:active{box-shadow:inset -1px -1px 0 var(--plat-hi), inset 1px 1px 0 var(--plat-dark);}

.wcalc-disp{font-size:22px; text-align:right; padding:6px 8px; margin-bottom:8px; background:#cfe6d8; border:1px solid var(--plat-frame); box-shadow:inset 1px 1px 0 var(--plat-dark); overflow:hidden; font-variant-numeric:tabular-nums;}
.wcalc-keys{display:grid; grid-template-columns:repeat(4,1fr); gap:4px;}
.wcalc-keys button{padding:9px 0; font:inherit; font-size:14px; background:var(--plat-light); border:1px solid var(--plat-frame); box-shadow:inset 1px 1px 0 var(--plat-hi), inset -1px -1px 0 var(--plat-dark);}
.wcalc-keys button:active{box-shadow:inset -1px -1px 0 var(--plat-hi), inset 1px 1px 0 var(--plat-dark);}
.wcalc-keys .wk-op, .wcalc-keys .wk-eq{background:var(--accent-text); color:#fff;}
.wk-zero{grid-column:span 2;}

.wclock{display:flex; flex-direction:column; gap:4px;}
.wclk-row{display:flex; justify-content:space-between; align-items:baseline; padding:5px 2px; border-bottom:1px dashed var(--border); font-size:14px;}
.wclk-city{color:var(--charcoal);}
.wclk-time{font-variant-numeric:tabular-nums; font-weight:700; color:var(--accent-text);}

.wpz-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:3px; margin-bottom:8px;}
.wpz-tile{font:inherit; font-size:16px; font-weight:700; background:var(--plat-light); border:1px solid var(--plat-frame); box-shadow:inset 1px 1px 0 var(--plat-hi), inset -1px -1px 0 var(--plat-dark); aspect-ratio:1; color:var(--accent-text);}
.wpz-tile:active{box-shadow:inset -1px -1px 0 var(--plat-hi), inset 1px 1px 0 var(--plat-dark);}
.wpz-blank{background:transparent !important; border-color:transparent !important; box-shadow:none !important;}
.wpz-shuffle{width:100%;}
@media (prefers-reduced-motion:reduce){ .wtick-track{animation:none;} }

/* ===================== Site commercial (Services, Réalisations, Devis, FAQ) ===================== */
.window--lg{width:480px;} .window--md{width:382px;}
.svc-vp{font-size:14px; margin-bottom:12px; max-width:60ch;}
.svc-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:12px;}
.svc-card{padding:11px 12px; background:var(--warm-white); border-top:1px solid var(--plat-hi); border-left:1px solid var(--plat-hi); border-right:1px solid var(--plat-dark); border-bottom:1px solid var(--plat-dark);}
.svc-card h3{font-size:14px; margin:0 0 4px;}
.svc-card p{font-size:12.5px; color:var(--charcoal); margin:0;}
.svc-card--price{position:relative;}
.svc-price{position:absolute; top:9px; right:11px; font-size:18px; font-weight:700; color:var(--accent-text); font-family:Georgia,"Times New Roman",serif;}
.svc-card--price h3{padding-right:58px;}
.svc-incl{font-size:12.5px; margin-bottom:12px;}
.svc-incl p{margin:0 0 4px;}
.svc-cta{display:flex; flex-wrap:wrap; gap:8px;}
.real-grid{display:flex; flex-direction:column; gap:12px;}
.real-card{display:block; text-decoration:none; color:inherit; border:1px solid var(--plat-frame); background:var(--cream); box-shadow:inset 1px 1px 0 var(--plat-hi), inset -1px -1px 0 var(--plat-dark), 2px 2px 0 rgba(24,20,18,.16);}
.real-card:hover{box-shadow:inset 1px 1px 0 var(--plat-hi), inset -1px -1px 0 var(--plat-dark), 0 0 0 2px var(--accent);}
.real-bar{display:flex; align-items:center; gap:5px; padding:5px 9px; background:var(--plat-face); border-bottom:1px solid var(--plat-frame);}
.real-dot{width:9px; height:9px; border-radius:50%; border:1px solid var(--plat-dark); flex:0 0 auto;}
.real-dot:nth-child(1){background:#EC6A5E;} .real-dot:nth-child(2){background:#F4BF4F;} .real-dot:nth-child(3){background:#61C454;}
.real-url{font-size:11px; color:var(--gray); margin-left:6px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.real-body{padding:10px 12px 12px;}
.real-body h3{font-size:15px; margin:0;}
.real-tag{font-size:11px; color:var(--accent-text); text-transform:uppercase; letter-spacing:.4px; margin:2px 0 6px;}
.real-body p{font-size:12.5px; color:var(--charcoal); margin:0 0 6px;}
.real-link{font-size:12px; color:var(--accent-text); font-weight:700;}
.faq-q{padding:9px 0; border-bottom:1px dashed var(--border);}
.faq-q:last-child{border-bottom:0;}
.faq-q h3{font-size:14px; margin:0 0 3px;}
.faq-q p{font-size:12.5px; color:var(--charcoal); margin:0;}
.cf-form{margin-top:6px;}
.cf-hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;}
.cf-row{display:block; margin-bottom:8px;}
.cf-row span{display:block; font-size:12px; color:var(--gray); margin-bottom:3px;}
.cf-row input, .cf-row select, .cf-row textarea{width:100%; box-sizing:border-box; font:inherit; font-size:13px; padding:5px 7px; background:var(--warm-white); border:1px solid var(--plat-frame); box-shadow:inset 1px 1px 0 var(--plat-dark), inset -1px -1px 0 var(--plat-hi);}
.cf-row textarea{resize:vertical;}
.cf-ok{margin-top:8px; font-size:13px; color:#2c7a55; background:#e7f5ee; border:1px solid #b9e0cd; padding:6px 9px;}
.audit-box{margin-top:14px; padding-top:12px; border-top:1px solid var(--border);}
.audit-h{font-size:14px; margin:0;}
.audit-p{font-size:12.5px; color:var(--charcoal); margin:4px 0 8px;}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Fenetre navigateur embarquee (realisations) */
.window--browser{width:min(92vw,880px); height:min(82dvh,640px);}
.bx-toolbar{display:flex; align-items:center; gap:6px; padding:5px 8px; background:var(--plat-face); border-bottom:1px solid var(--plat-frame); box-shadow:inset 0 1px 0 var(--plat-hi);}
.bx-nav{flex:0 0 auto; width:22px; height:18px; font-size:10px; line-height:1; border:1px solid var(--plat-frame); background:var(--plat-light); box-shadow:inset 1px 1px 0 var(--plat-hi), inset -1px -1px 0 var(--plat-dark); cursor:pointer; color:var(--charcoal);}
.bx-nav:active{box-shadow:inset -1px -1px 0 var(--plat-hi), inset 1px 1px 0 var(--plat-dark);}
.bx-addr{flex:1 1 auto; display:flex; align-items:center; gap:5px; min-width:0; height:18px; padding:0 8px; background:var(--paper); border:1px solid var(--plat-dark); box-shadow:inset 1px 1px 0 rgba(24,20,18,.10); font-size:11px; color:var(--charcoal); overflow:hidden; white-space:nowrap;}
.bx-lock{font-size:9px; opacity:.7; flex:0 0 auto;}
.bx-url{overflow:hidden; text-overflow:ellipsis;}
.bx-open{flex:0 0 auto; text-decoration:none; font-size:13px; color:var(--charcoal); padding:0 4px;}
.bx-body{padding:0; overflow:hidden; background:#fff;}
.bx-frame{width:100%; height:100%; border:0; display:block; background:#fff;}