/* ═══════════════════════════════════════════════════════════════════
   À PROPOS DE MOI — la carte suspendue  (section #apropos)
   Toutes les classes commencent par « cd- » : aucun conflit possible avec
   Bootstrap, MDB ou tes autres feuilles de style.
   Les couleurs reprennent tes variables (--accent, --accent-soft, --muted, --pad)
   avec une valeur de secours si elles n'existent pas.
   Les tailles de texte DANS la carte sont en « cqw » = % de la largeur de la carte :
   le texte reste proportionnel à la carte, quelle que soit sa taille.
   ═══════════════════════════════════════════════════════════════════ */


.zone_apo{

    background-color: white;
 
}
.cd{
  --cd-blue:var(--accent,#0100f4);
  --cd-soft:var(--accent-soft,#0000ff);
  --cd-muted:var(--muted,#8b8b9e);
  --cd-line:rgba(255,255,255,.2);
  --cd-ease:cubic-bezier(.2,.8,.1,1);
  position:relative;
  overflow-x:clip;
  color:#151313;
  padding:1rem var(--pad,clamp(1.25rem,4vw,3.5rem)) 7rem;
}
.cd-wrap{
  max-width:1300px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(1.5rem,5vw,4rem);
  align-items:start;
}
@media (min-width:900px){
  .cd-wrap{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:center}
  .cd-stage{order:2}                          /* sur ordinateur : texte à gauche, carte à droite */
}

/* ═══════════ LA SCÈNE : le cordon et la carte sont positionnés par le JS (physique) ═══════════ */
.cd-stage{
  position:relative;height:min(84svh,760px);perspective:1400px;user-select:none;-webkit-user-select:none;
}
@media (max-width:899px){ 
    .cd-stage{height:min(78svh,640px)} 
}
.cd-rail{                                    /* barre d'accroche en haut */
  position:absolute;
  left:6%;
  right:6%;
  top:0;height:1px;
  background:var(--cd-line);
}
.cd-rail::before,.cd-rail::after{
    content:"";
    position:absolute;
    top:-4px;
    width:1px;
    height:9px;
    background:var(--cd-line)}
.cd-rail::before{
    left:0
}
.cd-rail::after{right:0}

.cd-rope{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    overflow:visible;
    pointer-events:none
}

.cd-strap{
    fill:none;
    stroke:var(--cd-blue);
    stroke-width:15;
    stroke-linecap:round;
    stroke-linejoin:round
}

.cd-stitch{
    fill:none;
    stroke:rgba(255,255,255,.75);
    stroke-width:2.5;
    stroke-dasharray:10 13;
    stroke-linecap:round
}

.cd-hook{fill:#000000}

/* ═══════════ LA CARTE ═══════════ */
.cd-card{
  position:absolute;
  left:0;
  top:0;
  width:var(--cw,300px);
  height:var(--ch,440px);
  transform-origin:50% 0;
  transform-style:preserve-3d;
  will-change:transform;
  cursor:grab;
  touch-action:none;
}
.cd-card.grab{
    cursor:grabbing
}
.cd-face{
  position:absolute;
  inset:0;
  border-radius:var(--cr,18px);
  overflow:hidden;
  container-type:inline-size;
  background:#0b0b14;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  box-shadow:0 0 0 1px rgba(255,255,255,.18),0 30px 80px rgba(1,0,244,.35);
}
.cd-back{transform:rotateY(180deg)}

/* Pince métallique en haut de la carte (hors des faces, pour dépasser) */
.cd-clip{
  position:absolute;
  left:50%;
  top:-14px;
  width:46px;
  height:34px;
  margin-left:-23px;
  border-radius:9px 9px 6px 6px;
  z-index:5;
  pointer-events:none;
  background:linear-gradient(180deg,#f1f1f6,#9a9aa8 55%,#d6d6df);
  box-shadow:0 2px 6px rgba(0,0,0,.5),inset 0 0 0 1px rgba(255,255,255,.5);
}
.cd-clip::after{
    content:"";
    position:absolute;
    left:50%;
    top:9px;
    width:16px;
    height:9px;
    margin-left:-8px;
    border-radius:5px;
    background:#0b0b14}

/* ---- Recto ---- */

.cd-fin{
    position:absolute;
    inset:0;
    display:flex;
    flex-direction:column;
    padding:7cqw 7cqw 6cqw;
    color: #fff;
}

.cd-slot{
    position:absolute;
    left:50%;
    top:3.2cqw;
    width:16cqw;
    height:3.4cqw;
    margin-left:-8cqw;
    border-radius:2cqw;
    background:#000;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.25)
}

.cd-head{
    display:flex;
    justify-content:space-between;
    margin-top:5cqw;
    font-size:max(.55rem,3.2cqw);
    font-weight:800;
    letter-spacing:.02em
}

.cd-head span:last-child{
    color: #0000ff ;
}
.cd-photo{
    position:relative;
    margin-top:4cqw;
    flex:1;
    min-height:0;
    border-radius:4cqw;
    overflow:hidden;
    background:#15152a
}

.cd-photo img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    -webkit-user-drag:none;
    pointer-events:none
}

.cd-photo::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(180deg,transparent 55%,rgba(1,0,244,.6))}

.cd-name{
    margin-top:4.5cqw;
    font-size:max(1rem,8.4cqw);
    font-weight:900;
    letter-spacing:-.04em;
    line-height:1}

.cd-role{
    margin-top:1.4cqw;
    font-size:max(.6rem,3.6cqw);
    font-weight:600;
    color:var(--cd-muted)
}

.cd-chips{
    display:flex;
    flex-wrap:wrap;
    gap:1.6cqw;
    list-style:none;
    margin:3.5cqw 0 0;
    padding:0
}

.cd-chips li{
    font-size:max(.5rem,2.7cqw);
    font-weight:700;
    padding:.35em .8em;
    border:1px solid rgba(49, 48, 48, 0.3);
    border-radius:999px}

.cd-bar{
  margin-top:4.5cqw;
  height:7cqw;
  background:#fff repeating-linear-gradient(90deg,#000 0 .5cqw,transparent .5cqw 1cqw,#000 1cqw 2cqw,transparent 2cqw 2.6cqw,#000 2.6cqw 3cqw,transparent 3cqw 4cqw);
}
/* Reflet holographique : il glisse selon l'inclinaison de la carte (le JS règle --gx) */
.cd-gloss{
  position:absolute;
  inset:0;
  pointer-events:none;
  mix-blend-mode:screen;
  opacity:.85;
  background:linear-gradient(115deg,transparent 28%,rgba(149, 149, 149, 0.32) 42%,rgba(1, 1, 254, 0.4) 50%,rgba(255,170,230,.22) 58%,transparent 72%);
  background-size:260% 100%;
  background-position:var(--gx,50%) 0;
}

/* ---- Verso ---- */

.cd-bband{
    position:absolute;
    left:0;
    right:0;
    top:0;
    height:30cqw;
    background:var(--cd-blue)
}
.cd-bin{
    color: #fff;
    position:absolute;
    inset:0;padding:7cqw;
    display:flex;
    flex-direction:column
}

.cd-bhead{
    margin-top:2cqw;
    font-size:max(.6rem,3.4cqw);
    font-weight:800;
    display:flex;
    justify-content:space-between
}

.cd-binfo{
    margin:20cqw 0 0;
    padding:0;
    display:grid;
    gap:4.5cqw
}
.cd-binfo div{
    border-left:2px solid #0000ff;
    padding-left:3.5cqw
}
.cd-binfo dt{
    margin:0;
    color:#fff;
    font-size:max(.52rem,2.8cqw);
    font-weight:600
}

.cd-binfo dd{
    margin:.8cqw 0 0;
    font-size:max(.68rem,3.7cqw);
    font-weight:700;
    line-height:1.3
}

.cd-qr{
  margin-top:auto;
  width:22cqw;
  aspect-ratio:1;
  border-radius:1.5cqw;
  background-color:#fff;
  background-image:repeating-conic-gradient(#000 0 25%,transparent 0 50%);
  background-size:4.4cqw 4.4cqw;
  box-shadow:0 0 0 2cqw #fff;
}

.cd-bfoot{
    margin-top:4cqw;
    font-size:max(.5rem,2.7cqw);
    color:#9e9e9f;
    font-weight:600}

/* Indication + bouton « retourner » sous la scène */

.cd-ui{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:1rem;
    flex-wrap:wrap;
    pointer-events:none
}
.cd-hint{
    margin-top:2em;
    font-size:.8rem;
    font-weight:600;
    color:var(--cd-muted);
    transition:opacity .6s
}

.cd-flip{
  pointer-events:auto;
  cursor:pointer;
  background:#000000;
  border:none;
  border-radius:999px;
  color:#fff;
  font:700 .8rem/1 'Montserrat',sans-serif;
  padding:.75em 1.3em;
  transition:background .3s,border-color .3s;
}

.cd-flip:hover{
    background:#0000ff;
}
.cd-flip:focus-visible{
    outline:2px solid #fff;
    outline-offset:3px
}

/* ═══════════ LE TEXTE ═══════════ */

.apro{

    font-weight:800;
    letter-spacing:-0.099em;
    line-height:1.02;
    font-size:clamp(2.1rem,4.8vw,4.4rem);
    color:#000000;
    margin: 0;
    
    span{
        color: #0000ff;
    }
}
.cd-lead{
    margin:0;
    font-weight:900;
    letter-spacing:-.04em;
    line-height:1.02;
    font-size:clamp(2.1rem,4.8vw,4.4rem);
    color:#fff;
   
}
.cd-lead .w{
    display:inline-block;
    overflow:hidden;
    vertical-align:top;
    padding-bottom:.12em;
    margin-bottom:-.12em
}
.cd-lead .w i{
    display:inline-block;
    font-style:normal;
    transform:translateY(112%);
    transition:transform .9s var(--cd-ease)
}
.cd.in .cd-lead .w i{
    transform:none;
    transition-delay:calc(.15s + var(--k) * 70ms)
}

.cd-bio{
    margin:1.8rem 0 0;
    max-width:36ch;
    font-size:clamp(1.1rem,1.7vw,1.45rem);
    line-height:1.5;
    font-weight:600;
    letter-spacing:-.01em
}
.cd-bio .bw{opacity:.16}

.cd-facts{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:1.4rem 2rem;
    margin:2.2rem 0 0;
    padding:0;
    max-width:38rem
}
@media (max-width:520px){ 
    .cd-facts{
        grid-template-columns:1fr
    } }
.cd-facts > div{
    position:relative;
    padding-left:1.1rem
}
.cd-facts > div::before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    bottom:0;
    width:2px;
    background:#0000ff;
    transform:scaleY(0);
    transform-origin:top;
    transition:transform .9s var(--cd-ease)
}

.cd-facts dt,.cd-facts dd{
    margin:0;
    opacity:0;
    transform:translateY(10px);
    transition:opacity .7s,transform .8s var(--cd-ease)
}

.cd-facts dt{
    color:var(--cd-muted);
    font-size:.8rem;
    font-weight:600;
    margin-bottom:.25rem
}

.cd-facts dd{
    font-weight:700;
    font-size:.98rem;
    line-height:1.35
}
.cd.in .cd-facts > div::before{
    transform:none;
    transition-delay:calc(.7s + var(--k) * 110ms)
}

.cd.in .cd-facts dt,.cd.in .cd-facts dd{
    opacity:1;
    transform:none;
    transition-delay:calc(.85s + var(--k) * 110ms)
}

.cd-btns{
    display:flex;
    flex-wrap:wrap;
    gap:.8rem;
    margin-top:2.2rem;
    opacity:0;
    transform:translateY(14px);
    transition:opacity .8s,transform .9s var(--cd-ease)
}
.cd.in .cd-btns{
    opacity:1;
    transform:none;
    transition-delay:1.3s
}

.cd-btn{
  display:inline-block;
  padding:.85em 1.7em;
  border:1px solid rgba(2, 2, 2, 0.895);
  border-radius:999px;
  color:#010101;
  text-decoration:none;
  font-weight:700;
  font-size:.9rem;
  transition:background .3s,border-color .3s,color .3s;
}
.cd-btn.p{
    background:#0000ff;
    border-color: #0000ff ;
    color: #fdfdfd;
}
.cd-btn:hover{
    background:#0b0b0b;
    border-color:#000000;
    color:#fff;
}

/* Mouvement réduit : la carte reste simplement accrochée, sans physique */
@media (prefers-reduced-motion:reduce){
  .cd *,.cd *::before{transition-duration:.01ms !important;transition-delay:0s !important;animation:none !important}
}