/* ══════════════════════════════════════
   MODULE 2 · Identité numérique & e-réputation
   visuel de tête (illustration + réglages qui basculent), démonstration EXIF,
   onglets Instagram / TikTok, recherche « Prénom Nom »
══════════════════════════════════════ */

/* ── Visuel de tête : un téléphone ouvert sur les réglages de confidentialité ── */
.hv-m2 .phone{transform:rotate(3deg)}
.phone-m2 .phone-screen{background:#FBF6F8;color:var(--ink);padding:2.4rem 0 0}
.set-head{display:flex;align-items:center;gap:.3rem;padding:.4rem .8rem .7rem;border-bottom:1px solid var(--line);font-size:.8rem}
.set-head .i{width:.9rem;height:.9rem;color:var(--violet)}
.set-list{display:grid}
.set-row{
  display:grid;grid-template-columns:1.6rem 1fr auto;gap:.5rem;align-items:center;
  padding:.62rem .8rem;border-bottom:1px solid var(--line);font-size:.68rem;font-weight:600;
}
.set-ic{display:grid;place-items:center;width:1.6rem;height:1.6rem;border-radius:.5rem;background:var(--violet-soft);color:var(--violet)}
.set-ic .i{width:.8rem;height:.8rem}
.set-row em{font-style:normal;font-weight:700;color:var(--muted);font-size:.64rem}
.set-row .toggle{width:1.9rem;height:1.1rem}
.set-row .toggle::after{width:.8rem;height:.8rem}
.toggle{position:relative;width:2.3rem;height:1.3rem;border-radius:var(--r-pill);background:var(--violet);flex-shrink:0;animation:toggle-bg 5s ease-in-out infinite}
.toggle::after{content:"";position:absolute;top:.15rem;left:.15rem;width:1rem;height:1rem;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);animation:toggle-knob 5s var(--ease-in-out) infinite}
.set-row .toggle::after{--shift:.8rem}
.toggle--off{animation-name:toggle-bg-off}
.toggle--off::after{animation-name:toggle-knob-off}
@keyframes toggle-bg{0%,40%{background:#D7C8D6}55%,100%{background:var(--violet)}}
@keyframes toggle-knob{0%,40%{transform:none}55%,100%{transform:translateX(var(--shift,1rem))}}
@keyframes toggle-bg-off{0%,50%{background:var(--violet)}65%,100%{background:#D7C8D6}}
@keyframes toggle-knob-off{0%,50%{transform:translateX(var(--shift,1rem))}65%,100%{transform:none}}
.fc-search{bottom:14%;left:0;min-width:13.5rem;animation-delay:-3.5s}
.fc-search > .i{background:var(--bg-2)}
.fc-search .typing{font-weight:700;color:var(--ink)}

/* ── Démonstration EXIF : une photo qui « parle » trop ── */
.split--exif{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}
.exif-demo{display:grid;gap:1rem}
.exif-photo{
  position:relative;aspect-ratio:4/3;border-radius:var(--r-card);overflow:hidden;
  background:linear-gradient(160deg,#FCE3D6,#EBD3F0);border:1px solid var(--line);box-shadow:var(--shadow-md);
}
/* « photo » dessinée : un paysage simple, pour ne pas réutiliser d'illustration */
.exif-scene{position:absolute;inset:0;background:linear-gradient(180deg,#F9D7C4 0%,#F4E3EE 55%,#EBD3F0 100%)}
.exif-scene .sun{position:absolute;left:18%;top:16%;width:16%;aspect-ratio:1;border-radius:50%;background:#FDBC96;box-shadow:0 0 0 .8rem rgba(253,188,150,.35)}
.exif-scene .hill{position:absolute;bottom:-30%;border-radius:50%}
.exif-scene .hill-1{left:-20%;width:90%;height:70%;background:#C69AD6}
.exif-scene .hill-2{right:-25%;width:95%;height:62%;background:#9E559D}
.exif-scene .house{position:absolute;left:30%;bottom:26%;width:14%;height:16%;background:#FFFDFB;border-radius:4px}
.exif-scene .house::before{content:"";position:absolute;left:-12%;right:-12%;bottom:100%;height:70%;background:#CD5C5C;clip-path:polygon(50% 0,100% 100%,0 100%)}
.exif-scene .palm{position:absolute;left:52%;bottom:30%;width:2.2%;height:30%;background:#553739;border-radius:4px}
.exif-scene .palm::before{content:"";position:absolute;left:50%;top:-18%;width:900%;aspect-ratio:2/1;transform:translateX(-50%);background:#3F7A47;border-radius:50% 50% 0 0}
.exif-pin{
  position:absolute;left:62%;top:14%;display:grid;place-items:center;width:2.6rem;height:2.6rem;border-radius:50% 50% 50% 0;
  transform:rotate(-45deg);background:var(--alert);color:#fff;box-shadow:0 10px 18px -8px var(--alert);
  transition:opacity .35s ease, transform .5s var(--spring);
  animation:pin-bounce 2.4s var(--ease-out) infinite;
}
.exif-pin .i{transform:rotate(45deg);width:1.1rem;height:1.1rem}
@keyframes pin-bounce{0%,60%,100%{translate:0 0}75%{translate:0 -8px}}
.exif-meta{
  position:absolute;left:.8rem;right:.8rem;bottom:.8rem;display:grid;gap:.35rem;
  padding:.8rem .9rem;border-radius:var(--r-mini);background:rgba(42,27,34,.82);color:#fff;
  backdrop-filter:blur(6px);font-size:.82rem;
  transition:opacity .4s ease, transform .5s var(--ease-out);
}
.exif-meta span{display:grid;grid-template-columns:1.1rem 7.2rem 1fr;gap:.5rem;align-items:center;color:rgba(255,255,255,.9)}
.exif-meta b{color:#fff;font-weight:700}
.exif-meta .i{width:1rem;height:1rem;color:#F7B9C0}
.exif-demo.is-off .exif-meta{opacity:0;transform:translateY(12px)}
.exif-demo.is-off .exif-pin{opacity:0;transform:rotate(-45deg) scale(.6);animation:none}

.exif-controls{display:grid;gap:.5rem}
.switch{
  display:inline-flex;align-items:center;gap:.8rem;padding:.6rem .9rem .6rem .6rem;border-radius:var(--r-pill);
  border:1px solid var(--line-2);background:var(--surface);font:inherit;font-weight:700;color:var(--ink);cursor:pointer;justify-self:start;
  transition:transform .16s var(--ease-out);
}
.switch:active{transform:scale(.98)}
.switch-track{position:relative;width:2.8rem;height:1.6rem;border-radius:var(--r-pill);background:var(--alert);transition:background-color .3s ease}
.switch-thumb{position:absolute;top:.2rem;left:.2rem;width:1.2rem;height:1.2rem;border-radius:50%;background:#fff;transform:translateX(1.2rem);transition:transform .4s var(--spring);box-shadow:0 1px 3px rgba(0,0,0,.25)}
.switch[aria-checked="false"] .switch-track{background:var(--ok)}
.switch[aria-checked="false"] .switch-thumb{transform:none}
.exif-note{font-size:.9rem;color:var(--ink-2);padding-left:.4rem}

/* ── Recherche « Prénom Nom » ── */
.split--search{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:start}
.search-demo{
  display:grid;gap:.9rem;padding:1.2rem;border-radius:var(--r-card);
  background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-md);
}
.sd-bar{
  display:flex;align-items:center;gap:.7rem;padding:.8rem 1.1rem;border-radius:var(--r-pill);
  border:1px solid var(--line-2);box-shadow:var(--shadow-sm);font-weight:700;color:var(--ink);
}
.sd-bar .i{color:var(--muted)}
.sd-bar .caret{color:var(--violet)}
.sd-tabs{display:flex;gap:1.2rem;padding:0 .6rem;font-size:.82rem;font-weight:700;color:var(--muted);border-bottom:1px solid var(--line)}
.sd-tabs span{padding-bottom:.5rem}
.sd-tabs .on{color:var(--violet);box-shadow:inset 0 -2px 0 var(--violet)}
.sd-results{display:grid;gap:.8rem;padding:.2rem .6rem .4rem}
.sd-results span{
  display:block;height:2.6rem;border-radius:var(--r-mini);
  background:linear-gradient(90deg,var(--bg-2) 25%,var(--violet-tint) 50%,var(--bg-2) 75%) 0 0/200% 100%;
  animation:shimmer 1.8s linear infinite;
}
.sd-results span:nth-child(2){width:85%}.sd-results span:nth-child(3){width:70%}
@keyframes shimmer{to{background-position:-200% 0}}

@media (max-width:860px){
  .split--exif,.split--search{grid-template-columns:1fr}
}

/* thème sombre : la photo d'exemple garde ses couleurs, son cadre s'adapte */
:root[data-theme="dark"] .exif-photo{border-color:var(--line-2)}
:root[data-theme="dark"] .search-demo{background:var(--surface)}
/* thème sombre : l'écran du téléphone garde ses couleurs claires (c'est une illustration) */
.phone-m2 .phone-screen{--line:rgba(94,43,93,.12);color:#2A1B22}
.phone-m2 .set-ic{background:#F4E9F6;color:#9E559D}
.phone-m2 .set-row em{color:#8A7580}

/* démonstrations : proportions et espaces confortables */
.split--exif,.split--search{gap:2rem}
.exif-photo{aspect-ratio:16/10}
.search-demo{padding:1.1rem;gap:.85rem}