/* Danz – Professeurs — Fiches (Flip Cards)
   Prefix: dpf-
*/

.dpf-wrap{
  --dpf-cols:3;
  --dpf-cols-tablet:2;
  --dpf-cols-mobile:1;
  --dpf-card-height:380px;
  --dpf-card-radius:18px;
  --dpf-photo-radius:18px;
  --dpf-overlay-bg:rgba(0,0,0,0.35);
  --dpf-name-size:48px;
  --dpf-style-size:28px;
  --dpf-name-color:#fff;
  --dpf-style-color:#7fffd4;
  /* Back (overlay) */
  --dpf-back-overlay-bg:rgba(255,255,255,0.88);
  --dpf-back-name-size:20px;
  --dpf-back-style-size:13px;
  --dpf-back-text-size:14px;
  --dpf-back-name-color:#00c4b5;
  --dpf-back-style-color:#111;
  --dpf-back-text:#111;
  /* legacy */
  --dpf-back-bg:#fff;
  --dpf-flip-ms:650ms;
  font-family:inherit;
}

.dpf-notice{
  padding:14px 16px;
  border:1px solid rgba(0,0,0,.12);
  border-radius:12px;
  background:rgba(0,0,0,.03);
}

.dpf-grid{
  display:grid;
  grid-template-columns:repeat(var(--dpf-cols), minmax(0, 1fr));
  gap:22px;
  align-items:stretch;
}

@media (max-width: 980px){
  .dpf-grid{ grid-template-columns:repeat(var(--dpf-cols-tablet), minmax(0,1fr)); }
}
@media (max-width: 640px){
  .dpf-grid{ grid-template-columns:repeat(var(--dpf-cols-mobile), minmax(0,1fr)); }
}

.dpf-card{
  position:relative;
  height:var(--dpf-card-height);
  perspective:1200px;
  cursor:pointer;
  outline:none;
}
.dpf-card:focus-visible{
  box-shadow:0 0 0 3px rgba(0,0,0,.20);
  border-radius:var(--dpf-card-radius);
}

.dpf-card-inner{
  position:absolute;
  inset:0;
  transform-style:preserve-3d;
  transition:transform var(--dpf-flip-ms) cubic-bezier(.2,.7,.2,1);
  border-radius:var(--dpf-card-radius);
}

.dpf-has-shadow .dpf-card-inner{
  box-shadow:0 10px 30px rgba(0,0,0,.12);
}

.dpf-card.is-flipped .dpf-card-inner{
  transform:rotateY(180deg);
}

.dpf-card-front,
.dpf-card-back{
  position:absolute;
  inset:0;
  border-radius:var(--dpf-card-radius);
  overflow:hidden;
  backface-visibility:hidden;
}

/* FRONT */
.dpf-card-front{
  color:#fff;
}

.dpf-photo{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  filter:saturate(1.05) contrast(1.03);
}

.dpf-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.20) 0%, var(--dpf-overlay-bg) 55%, rgba(0,0,0,.55) 100%);
}

.dpf-front-content{
  position:absolute;
  left:22px;
  right:22px;
  bottom:20px;
  z-index:2;
  text-align:center;
}

.dpf-name{
  font-size:var(--dpf-name-size);
  line-height:1.05;
  color:var(--dpf-name-color);
  font-weight:700;
  letter-spacing:.2px;
  text-shadow:0 8px 22px rgba(0,0,0,.35);
}

.dpf-style{
  margin-top:6px;
  font-size:var(--dpf-style-size);
  line-height:1.15;
  color:var(--dpf-style-color);
  font-weight:700;
  text-shadow:0 8px 22px rgba(0,0,0,.30);
}

/* BACK (overlay like front) */
.dpf-card-back{
  transform:rotateY(180deg);
  color:var(--dpf-back-text);
}

.dpf-back-photo-bg{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  filter:saturate(1.05) contrast(1.03);
  transform:scale(1.03);
}

.dpf-back-overlay{
  position:absolute;
  inset:0;
  background:var(--dpf-back-overlay-bg);
}

.dpf-back-content{
  position:absolute;
  inset:0;
  z-index:2;
  padding:20px 22px 18px;
  display:flex;
  flex-direction:column;
  text-align:center;
}

.dpf-close{
  position:absolute;
  top:12px;
  right:12px;
  z-index:3;
  width:40px;
  height:40px;
  border:0;
  border-radius:12px;
  background:rgba(0,0,0,.10);
  color:inherit;
  font-size:26px;
  line-height:40px;
  cursor:pointer;
}
.dpf-close:hover{
  background:rgba(0,0,0,.10);
}


.dpf-back-top{
  padding-top:8px;
}

.dpf-back-name{
  font-size:var(--dpf-back-name-size);
  font-weight:800;
  line-height:1.1;
  color:var(--dpf-back-name-color);
}

.dpf-back-style{
  margin-top:6px;
  font-size:var(--dpf-back-style-size);
  font-weight:700;
  color:var(--dpf-back-style-color);
  opacity:.9;
}

.dpf-back-section-title{
  margin-top:14px;
  font-size:12px;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
  opacity:.65;
}

.dpf-back-bio{
  margin-top:10px;
  font-size:var(--dpf-back-text-size);
  line-height:1.55;
  overflow:auto;
  padding:0 4px;
}

.dpf-bio{ font-size:inherit; line-height:inherit; }

.dpf-bio p{ margin:0 0 10px; }
.dpf-bio p:last-child{ margin-bottom:0; }


.dpf-back-footer{
  margin-top:auto;
  padding-top:12px;
  border-top:1px solid rgba(0,0,0,.12);
}

.dpf-contact-row{
  display:flex;
  justify-content:space-between;
  gap:10px;
  padding:8px 0;
  border-bottom:1px dashed rgba(0,0,0,.10);
  font-size:13px;
}
.dpf-contact-row:last-child{ border-bottom:0; }

.dpf-contact-label{
  font-weight:700;
  opacity:.75;
  white-space:nowrap;
}

.dpf-contact a{
  color:inherit;
  text-decoration:none;
  border-bottom:1px solid rgba(0,0,0,.25);
}
.dpf-contact a:hover{
  border-bottom-color:rgba(0,0,0,.55);
}

.dpf-contact-text{
  text-align:right;
  opacity:.9;
}

.dpf-inactive-tag{
  display:inline-block;
  margin-top:10px;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(220,0,0,.08);
  color:#b40000;
  font-weight:800;
  font-size:12px;
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  .dpf-card-inner{ transition:none; }
}

/* =============================
   SHOWCASE LAYOUT (bandeaux)
   ============================= */

.dpf-layout-showcase .dpf-showcase{
  display:flex;
  flex-direction:column;
  gap:22px;
}

.dpf-show-item{
  position:relative;
  border-radius:var(--dpf-card-radius);
  overflow:hidden;
  cursor:pointer;
  outline:none;
}

.dpf-has-shadow .dpf-show-item{
  box-shadow:0 10px 30px rgba(0,0,0,.12);
}

.dpf-show-item:focus-visible{
  box-shadow:0 0 0 3px rgba(0,0,0,.20);
}

.dpf-show-hero{
  position:relative;
  height:var(--dpf-show-hero-height);
  background-size:cover;
  background-position:center;
  filter:saturate(1.05) contrast(1.03);
}

.dpf-show-hero-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.18) 0%, var(--dpf-overlay-bg) 55%, rgba(0,0,0,.60) 100%);
}

.dpf-show-hero-content{
  position:absolute;
  left:22px;
  right:22px;
  bottom:20px;
  z-index:2;
  text-align:center;
}

.dpf-show-name{
  font-size:clamp(24px, 4vw, var(--dpf-name-size));
  line-height:1.05;
  color:var(--dpf-name-color);
  font-weight:800;
  letter-spacing:.2px;
  text-shadow:0 8px 22px rgba(0,0,0,.35);
}

.dpf-show-style{
  margin-top:6px;
  font-size:clamp(14px, 3vw, var(--dpf-style-size));
  line-height:1.15;
  color:var(--dpf-style-color);
  font-weight:800;
  text-shadow:0 8px 22px rgba(0,0,0,.30);
}

.dpf-show-toggle{
  position:absolute;
  top:12px;
  right:12px;
  z-index:3;
  width:44px;
  height:44px;
  border:0;
  border-radius:14px;
  background:rgba(0,0,0,.22);
  color:#fff;
  cursor:pointer;
}

.dpf-show-toggle::before{
  content:'+';
  display:block;
  width:44px;
  height:44px;
  line-height:44px;
  text-align:center;
  font-size:30px;
  font-weight:700;
}

.dpf-show-item.is-open .dpf-show-toggle::before{
  content:'–';
}

.dpf-show-panel{
  position:relative;
  background:var(--dpf-back-overlay-bg);
  color:var(--dpf-back-text);
  padding:18px 22px 20px;
  cursor:default;
}

.dpf-show-close{
  position:absolute;
  top:12px;
  right:12px;
  z-index:2;
  width:40px;
  height:40px;
  border:0;
  border-radius:12px;
  background:rgba(0,0,0,.10);
  color:inherit;
  font-size:26px;
  line-height:40px;
  cursor:pointer;
}

.dpf-show-panel-content{
  padding-top:4px;
  text-align:center;
}

.dpf-show-panel-name{
  font-size:var(--dpf-back-name-size);
  font-weight:900;
  line-height:1.1;
  color:var(--dpf-back-name-color);
}

.dpf-show-panel-style{
  margin-top:6px;
  font-size:var(--dpf-back-style-size);
  font-weight:800;
  color:var(--dpf-back-style-color);
  opacity:.9;
}

.dpf-show-panel-title{
  margin-top:14px;
  font-size:12px;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
  opacity:.65;
}

.dpf-show-bio{
  margin-top:10px;
  font-size:var(--dpf-back-text-size);
  line-height:1.55;
}

.dpf-show-footer{
  margin-top:14px;
  padding-top:12px;
  border-top:1px solid rgba(0,0,0,.12);
}

@media (max-width: 640px){
  .dpf-show-hero-content{ left:16px; right:16px; bottom:16px; }
  .dpf-show-panel{ padding:16px 16px 18px; }
}

/* =============================
   DIRECTORY LAYOUT (annuaire)
   ============================= */

.dpf-layout-directory .dpf-directory{
  display:grid;
  grid-template-columns:minmax(220px, 320px) minmax(0, 1fr);
  gap:22px;
  align-items:start;
}

.dpf-layout-directory .dpf-dir-sidebar{
  position:relative;
}

.dpf-layout-directory .dpf-dir-list{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:14px;
  background:var(--dpf-back-overlay-bg);
  border-radius:var(--dpf-card-radius);
}

.dpf-layout-directory.dpf-has-shadow .dpf-dir-list{
  box-shadow:0 10px 30px rgba(0,0,0,.12);
}

.dpf-layout-directory .dpf-dir-item{
  display:flex;
  gap:12px;
  align-items:center;
  width:100%;
  padding:10px 12px;
  border:0;
  border-radius:14px;
  background:rgba(0,0,0,.05);
  cursor:pointer;
  text-align:left;
  outline:none;
}

.dpf-layout-directory .dpf-dir-item:hover{
  background:rgba(0,0,0,.08);
}

.dpf-layout-directory .dpf-dir-item.is-active{
  background:rgba(0,0,0,.12);
}

.dpf-layout-directory .dpf-dir-item:focus-visible{
  box-shadow:0 0 0 3px rgba(0,0,0,.20);
}

.dpf-layout-directory .dpf-dir-thumb{
  width:48px;
  height:48px;
  flex:0 0 auto;
  border-radius:var(--dpf-photo-radius);
  background-size:cover;
  background-position:center;
}

.dpf-layout-directory .dpf-dir-item-meta{ display:block; min-width:0; }

.dpf-layout-directory .dpf-dir-item-name{
  display:block;
  font-weight:900;
  font-size:14px;
  line-height:1.2;
  color:var(--dpf-back-name-color);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.dpf-layout-directory .dpf-dir-item-style{
  display:block;
  margin-top:2px;
  font-weight:800;
  font-size:12px;
  opacity:.85;
  color:var(--dpf-back-style-color);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.dpf-layout-directory .dpf-dir-content{
  position:relative;
}

.dpf-layout-directory .dpf-dir-detail{
  border-radius:var(--dpf-card-radius);
  overflow:hidden;
}

.dpf-layout-directory.dpf-has-shadow .dpf-dir-detail{
  box-shadow:0 10px 30px rgba(0,0,0,.12);
}

.dpf-layout-directory .dpf-dir-hero{
  position:relative;
  height:var(--dpf-show-hero-height);
  background-size:cover;
  background-position:center;
  filter:saturate(1.05) contrast(1.03);
}

.dpf-layout-directory .dpf-dir-hero-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.16) 0%, var(--dpf-overlay-bg) 55%, rgba(0,0,0,.62) 100%);
}

.dpf-layout-directory .dpf-dir-hero-content{
  position:absolute;
  left:22px;
  right:22px;
  bottom:18px;
  z-index:2;
  text-align:center;
}

.dpf-layout-directory .dpf-dir-name{
  font-size:clamp(24px, 4vw, var(--dpf-name-size));
  line-height:1.05;
  color:var(--dpf-name-color);
  font-weight:900;
  letter-spacing:.2px;
  text-shadow:0 8px 22px rgba(0,0,0,.35);
}

.dpf-layout-directory .dpf-dir-style{
  margin-top:6px;
  font-size:clamp(14px, 3vw, var(--dpf-style-size));
  line-height:1.15;
  color:var(--dpf-style-color);
  font-weight:900;
  text-shadow:0 8px 22px rgba(0,0,0,.30);
}

.dpf-layout-directory .dpf-dir-panel{
  background:var(--dpf-back-overlay-bg);
  color:var(--dpf-back-text);
  padding:18px 22px 20px;
  text-align:center;
}

.dpf-layout-directory .dpf-dir-panel-top{
  padding-top:4px;
}

.dpf-layout-directory .dpf-dir-panel-name{
  font-size:var(--dpf-back-name-size);
  font-weight:900;
  line-height:1.1;
  color:var(--dpf-back-name-color);
}

.dpf-layout-directory .dpf-dir-panel-style{
  margin-top:6px;
  font-size:var(--dpf-back-style-size);
  font-weight:800;
  color:var(--dpf-back-style-color);
  opacity:.9;
}

.dpf-layout-directory .dpf-dir-panel-title{
  margin-top:14px;
  font-size:12px;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
  opacity:.65;
}

.dpf-layout-directory .dpf-dir-bio{
  margin-top:10px;
  font-size:var(--dpf-back-text-size);
  line-height:1.55;
}

.dpf-layout-directory .dpf-dir-footer{
  margin-top:14px;
  padding-top:12px;
  border-top:1px solid rgba(0,0,0,.12);
}

@media (max-width: 900px){
  .dpf-layout-directory .dpf-directory{ grid-template-columns:1fr; }
}

@media (max-width: 640px){
  .dpf-layout-directory .dpf-dir-hero-content{ left:16px; right:16px; bottom:16px; }
  .dpf-layout-directory .dpf-dir-panel{ padding:16px 16px 18px; }
}