/* ==========================================================
   Thème Chibi Fairy — SOMBRE (par défaut) + mise en page
   Chargé APRÈS style260802.css : il remplace l'ancienne mise en
   page (menu vertical, encart gris, largeur fixe 980px) et adapte
   les couleurs du contenu existant. Couleurs : voir :root.
   ========================================================== */
:root{
  color-scheme:dark;
  --cf-accent:#F28AC4;
  --cf-texte:#F6E9F2;
  --cf-texte-doux:#EBD6E3;
  --cf-texte-pale:#D8BFD0;
  --cf-lien:#F49ACB;
  --cf-lien-survol:#FFD0EA;
  --cf-lien-vu:#E3A6D0;
  --cf-fond-bloc:rgba(16,5,15,.82);
  --cf-fond-menu:rgba(14,4,13,.88);
  --cf-fond-panneau:#1A0818;
  --cf-survol:rgba(242,107,180,.12);
  --cf-bordure:rgba(242,138,196,.28);
  --cf-bordure-forte:rgba(242,138,196,.4);
  --cf-ombre:0 10px 30px rgba(0,0,0,.45);
  --cf-largeur:1180px;
}

/* ---------- Page & fond ---------- */
html{background:#000;height:auto}
body{
  height:auto;min-height:100vh;margin:0;
  color:var(--cf-texte);
  font-family:'Quicksand',Verdana,sans-serif;
  background:transparent;
}
/* Fond fixe : calque derrière la page (fonctionne aussi sur iPhone) */
body::before{
  content:"";position:fixed;inset:0;z-index:-1;
  background:#000 url("fond.jpg") center bottom / cover no-repeat;
}

a,a:visited{color:var(--cf-lien)}
a:hover{color:var(--cf-lien-survol)}
:focus-visible{outline:2px solid var(--cf-accent);outline-offset:2px}

/* ---------- Bannière ---------- */
.cf-banniere{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:4px;min-height:200px;padding:40px 24px 28px;text-align:center;
}
.cf-banniere h1{display:block;margin:0;font-weight:400}
.cf-marque,.cf-marque:visited{
  font-family:'Great Vibes',cursive;font-size:88px;line-height:1;
  color:#FFE3F2;text-decoration:none;
  text-shadow:0 0 24px rgba(242,107,180,.65),0 0 2px #fff;
}
.cf-marque:hover{color:#fff}
.cf-slogan{
  margin:0;text-align:center;font-size:14px;font-weight:600;letter-spacing:.32em;
  text-transform:uppercase;color:#E9B8D6;
}

/* ---------- Bandeau du menu ---------- */
.cf-nav{
  position:sticky;top:0;z-index:1000;
  background:var(--cf-fond-menu);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-top:1px solid var(--cf-bordure-forte);
  border-bottom:1px solid var(--cf-bordure-forte);
}
.cf-nav-in{
  max-width:var(--cf-largeur);margin:0 auto;padding:0 16px;
  display:flex;align-items:center;gap:8px;
}
.cf-nav-toggle{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.cf-burger{
  display:none;align-items:center;gap:10px;min-height:52px;padding:0 8px;cursor:pointer;
  color:var(--cf-texte);font-weight:600;font-size:15px;letter-spacing:.08em;text-transform:uppercase;
  user-select:none;
}
.cf-nav-toggle:focus-visible + .cf-burger{outline:2px solid var(--cf-accent);outline-offset:2px}

.cf-tabs{display:flex;flex-wrap:wrap;flex:1;min-width:0}

/* Onglet déroulant (aussi utilisé pour l'encart utilisateur) */
.cf-dd{position:relative}
.cf-dd>summary{
  list-style:none;cursor:pointer;user-select:none;
  display:flex;align-items:center;gap:8px;min-height:52px;padding:0 16px;
  color:var(--cf-texte);font-weight:700;font-size:14px;letter-spacing:.08em;text-transform:uppercase;
  border-bottom:2px solid transparent;
}
.cf-dd>summary::-webkit-details-marker{display:none}
.cf-dd>summary::after{
  content:"";width:7px;height:7px;margin-left:2px;margin-top:-4px;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg);opacity:.6;transition:transform .2s;
}
.cf-dd[open]>summary::after{transform:rotate(-135deg);margin-top:4px}
.cf-dd>summary:hover{background:var(--cf-survol);color:var(--cf-lien-survol)}
.cf-dd[open]>summary{background:var(--cf-survol);color:var(--cf-accent)}
.cf-dd:has(a.active)>summary{color:var(--cf-accent);border-bottom-color:var(--cf-accent)}

.cf-dd-panel{
  position:absolute;top:100%;left:0;z-index:1100;
  min-width:240px;max-width:min(420px,calc(100vw - 32px));
  max-height:calc(100vh - 140px);overflow-y:auto;
  display:flex;flex-direction:column;gap:2px;padding:8px;
  background:var(--cf-fond-panneau);
  border:1px solid var(--cf-bordure-forte);border-top:0;
  border-radius:0 0 14px 14px;box-shadow:var(--cf-ombre);
}
.cf-dd-droite .cf-dd-panel{left:auto;right:0}
.cf-dd-panel a,.cf-dd-panel a:visited{
  display:flex;align-items:center;gap:8px;min-height:40px;padding:6px 12px;border-radius:8px;
  color:var(--cf-texte);text-decoration:none;font-size:15px;font-weight:500;line-height:1.3;
}
.cf-dd-panel a:hover{background:var(--cf-survol);color:var(--cf-lien-survol)}
.cf-dd-panel a.active{color:var(--cf-accent);font-weight:700;background:var(--cf-survol)}
.cf-dd-panel a:not([href]){cursor:default}
.cf-dd-panel img{width:20px;height:20px;object-fit:cover;border-radius:4px;flex:none}
.cf-dd-titre{
  display:block;padding:10px 12px 4px;font-size:12px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--cf-texte-pale);
}
.cf-dd-info{display:block;padding:4px 12px;font-size:14px;color:var(--cf-texte-doux)}
.cf-dd-sep{display:block;height:1px;margin:6px 4px;background:var(--cf-bordure)}

/* Sous-menus des modèles et des tenues : s'ouvrent à droite du panneau
   (survol, ou clic sur la flèche ›). Sur mobile : sous le lien. */
.cf-dd-panel-sous{overflow:visible;max-height:none}
.cf-sous{position:relative;display:flex;align-items:center}
.cf-sous>a{flex:1;min-width:0}
.cf-sous-btn{
  flex:none;width:36px;height:36px;margin-left:2px;padding:0;border:0;border-radius:8px;cursor:pointer;
  background:transparent;color:var(--cf-texte-pale);
  display:inline-flex;align-items:center;justify-content:center;
}
.cf-sous-btn::before{
  content:"";width:7px;height:7px;margin-left:-3px;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg);
  transition:transform .2s;
}
.cf-sous-btn:hover,.cf-sous.ouvert>.cf-sous-btn{background:var(--cf-survol);color:var(--cf-accent)}
.cf-sous:hover>a,.cf-sous.ouvert>a{background:var(--cf-survol);color:var(--cf-lien-survol)}

.cf-dd-panel .subMenu,.cf-dd-panel .subMenuBou{
  position:absolute;top:-8px;left:calc(100% + 10px);z-index:1200;
  display:none;width:240px;max-height:calc(100vh - 140px);overflow-y:auto;
  margin:0;padding:8px;box-sizing:border-box;
  background:var(--cf-fond-panneau);border:1px solid var(--cf-bordure-forte);
  border-radius:14px;box-shadow:var(--cf-ombre);
}
/* pont invisible entre le lien et le sous-menu, pour ne pas perdre le survol */
.cf-sous::after{content:"";position:absolute;top:0;bottom:0;left:100%;width:12px;display:none}
.cf-sous:hover::after{display:block}
/* !important : main.js masque la liste avec un style en ligne */
.cf-sous:hover>.subMenu,.cf-sous:hover>.subMenuBou,
.cf-sous.ouvert>.subMenu,.cf-sous.ouvert>.subMenuBou{display:flex !important;flex-direction:column;gap:2px}
.cf-dd-panel .subMenu a,.cf-dd-panel .subMenuBou a{min-height:34px;font-size:14px;padding:4px 10px}
.cf-dd-panel .subMenu font{display:block;padding:6px 10px 2px;color:var(--cf-texte-pale)}
.cf-dd-panel .subMenu img.photo_background{width:16px;height:16px}
.cf-tabs .menu-modele-0{color:#7FE8F0}
.cf-tabs .menu-modele-2{color:#F28AC4}
.cf-tabs .menu-modele-3{color:#D29BFF}
.cf-tabs .menu-modele-4{color:#F2A35E}
.cf-tabs .menu-modele-5{color:#FF7A7A}

/* ---------- Encart utilisateur (à droite) ---------- */
.cf-user{display:flex;align-items:center;gap:4px;margin-left:auto}
.cf-clo{display:inline-flex;align-items:center;gap:4px;padding:0 8px;font-weight:700;white-space:nowrap}
.cf-clo img{height:20px;width:auto}
.cf-quick,.cf-quick:visited{
  display:inline-flex;align-items:center;min-height:44px;padding:0 10px;border-radius:999px;
  color:var(--cf-texte);text-decoration:none;font-weight:600;font-size:14px;white-space:nowrap;
}
.cf-quick:hover{background:var(--cf-survol);color:var(--cf-lien-survol)}
.cf-compte>summary,.cf-connexion>summary{text-transform:none;letter-spacing:.02em;font-size:15px;padding:0 12px}
.cf-avatar{width:32px;height:32px;border-radius:50%;object-fit:cover;border:2px solid var(--cf-accent)}
.cf-pseudo{max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cf-pastille{background:#cc3333;color:#fff;border-radius:10px;padding:1px 7px;font-size:12px}
.cf-connexion .cf-dd-panel{min-width:300px;padding:16px}
.cf-connexion .formulaireConnexion td{padding:4px;color:var(--cf-texte)}
.cf-connexion input[type=text],.cf-connexion input[type=password]{
  width:100%;min-height:40px;padding:6px 10px;border-radius:8px;font:inherit;
  border:1px solid var(--cf-bordure-forte);background:rgba(255,255,255,.06);color:var(--cf-texte);
}
.cf-connexion input[type=submit]{
  min-height:44px;padding:0 26px;margin-top:6px;border:0;border-radius:999px;cursor:pointer;
  background:var(--cf-accent);color:#1A0517;font:700 15px 'Quicksand',sans-serif;
}

/* Bouton sombre / clair */
.cf-theme{
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:44px;height:44px;padding:0;border-radius:50%;cursor:pointer;
  background:transparent;color:var(--cf-accent);border:1px solid var(--cf-bordure-forte);
}
.cf-theme:hover{background:var(--cf-survol)}
.cf-theme svg{width:22px;height:22px}
.cf-ico-lune{display:none}
html.clair .cf-ico-soleil{display:none}
html.clair .cf-ico-lune{display:block}

/* ---------- Contenu : adaptation des anciens styles ---------- */
#corps{max-width:var(--cf-largeur);margin:0 auto;padding:32px 24px 48px;box-sizing:border-box}
#innerCorps{min-height:0;margin:0}
#innerCorps img{max-width:100%;height:auto}

.article{float:none;width:auto;display:flow-root}
.article h2{color:var(--cf-accent);font-size:18px;line-height:1.4}
.article h2 i{color:var(--cf-texte-pale);font-weight:500}
.deployable h2:hover{background-color:var(--cf-survol)}

.article .article_box,.article_box,fieldset{
  background:var(--cf-fond-bloc);color:var(--cf-texte-doux);
  width:auto;margin:10px 0 18px;padding:14px 22px;
  border:1px solid var(--cf-bordure);border-radius:14px;
  box-shadow:none;filter:none;line-height:1.6;box-sizing:border-box;
}
.form_right{
  width:280px;min-height:0;margin:0 0 24px 24px;padding-bottom:14px;
  background:var(--cf-fond-bloc);color:var(--cf-texte-doux);
  border:1px solid var(--cf-bordure);border-radius:14px;box-shadow:none;filter:none;
}
.bordel{color:var(--cf-accent)}
.welcome{color:var(--cf-texte-doux)}
.nav_menu .active{color:var(--cf-accent)}
#innerCorps .nav_menu a{color:var(--cf-lien)}
ul.liste-partenaires li .partenaire-lien{color:var(--cf-texte)}
ul.liste-partenaires li .partenaire-lien:hover{color:var(--cf-lien-survol)}
hr{border:0;border-top:1px solid var(--cf-bordure)}
.texterouge{color:#FF7A7A}

/* Champs de formulaire */
#innerCorps input[type=text],#innerCorps input[type=password],#innerCorps input[type=email],
#innerCorps input[type=date],#innerCorps input[type=number],#innerCorps select,#innerCorps textarea{
  font:inherit;padding:6px 8px;border-radius:6px;box-sizing:border-box;
  border:1px solid var(--cf-bordure-forte);background:rgba(255,255,255,.07);color:var(--cf-texte);
}
#innerCorps input[type=submit]:not([style]),#innerCorps button:not([style]){
  min-height:40px;padding:0 20px;border:0;border-radius:999px;cursor:pointer;
  background:var(--cf-accent);color:#1A0517;font:700 15px 'Quicksand',sans-serif;
}

/* Infos du profil (déplacées depuis l'encart du haut) */
.cf-profil-infos{display:flex;align-items:center;gap:16px;margin:8px 0 14px;padding-bottom:14px;border-bottom:1px solid var(--cf-bordure)}
.cf-profil-avatar{width:84px;height:84px;border-radius:50%;object-fit:cover;border:2px solid var(--cf-accent)}

/* Anniversaires */
.anniv-box{background:rgba(242,107,180,.08);border-color:var(--cf-bordure-forte)}
.anniv-title{color:var(--cf-accent)}
.anniv-item{background:rgba(255,255,255,.05);border-color:var(--cf-bordure)}
.anniv-item.anniv-today{background:rgba(242,107,180,.18);border-color:var(--cf-accent);box-shadow:0 0 6px rgba(242,107,180,.5)}
.anniv-pseudo,.anniv-pseudo a{color:#FFB8DD}
.anniv-date{color:var(--cf-texte-doux)}
.anniv-age{color:var(--cf-texte-pale)}

/* Encarts à fond clair écrits directement dans les pages (style="background:#fff...") :
   on garde leur fond et on remet un texte foncé pour qu'il reste lisible. */
html:not(.clair) #innerCorps [style*="background:#fff"],
html:not(.clair) #innerCorps [style*="background: #fff"],
html:not(.clair) #innerCorps [style*="background:#FFF"],
html:not(.clair) #innerCorps [style*="background:white"],
html:not(.clair) #innerCorps [style*="background-color:#fff"],
html:not(.clair) #innerCorps [style*="background-color: #fff"],
html:not(.clair) #innerCorps [style*="background:#eef6ff"],
html:not(.clair) #innerCorps [style*="background:#f"],
html:not(.clair) #innerCorps [style*="background: #f"],
html:not(.clair) #innerCorps [style*="background-color:#f"],
html:not(.clair) #innerCorps [style*="background-color: #f"]{color:#222;color-scheme:light}

/* ---------- Pied de page ---------- */
#footer.cf-pied{
  clear:both;display:flex;flex-direction:column;align-items:center;gap:6px;
  border-top:1px solid var(--cf-bordure);background:rgba(10,3,9,.88);
  padding:24px;text-align:center;font-size:14px;color:#CDB3C4;
}
.cf-pied-marque{font-family:'Great Vibes',cursive;font-size:30px;color:var(--cf-accent)}
#footer #mentions{float:none;margin:0;text-align:center}
.cf-pied-reseaux{display:flex;gap:12px;margin:4px 0 0}
.cf-pied-reseaux img{height:32px;width:auto}

/* ---------- Tablette / petit écran ---------- */
@media (max-width:960px){
  .cf-marque{font-size:70px}
  .cf-nav-in{flex-wrap:wrap;padding:0 8px}
  .cf-burger{display:flex;order:1}
  .cf-user{order:2}
  .cf-theme{order:3}
  .cf-tabs{order:4;flex:0 0 100%;display:none;flex-direction:column;flex-wrap:nowrap;padding-bottom:8px}
  .cf-nav-toggle:checked ~ .cf-tabs{display:flex}
  .cf-tabs .cf-dd>summary{justify-content:space-between;border-bottom:0;border-top:1px solid var(--cf-bordure)}
  .cf-tabs .cf-dd:has(a.active)>summary{background:var(--cf-survol)}
  .cf-tabs .cf-dd-panel{position:static;max-width:none;max-height:none;border:0;border-radius:0;box-shadow:none;background:transparent;padding:0 0 8px 12px}
  .cf-dd-panel .subMenu,.cf-dd-panel .subMenuBou{position:static;width:auto;max-height:none;margin:0 0 6px 14px;border:0;border-left:2px solid var(--cf-bordure);border-radius:0;box-shadow:none;background:transparent;padding:2px 0 2px 8px}
  .cf-sous{flex-wrap:wrap}
  .cf-sous>.subMenu,.cf-sous>.subMenuBou{flex:0 0 100%;order:3}
  .cf-sous::after{display:none !important}
  /* sur mobile : pas d'ouverture au survol, seulement au toucher de la flèche */
  .cf-sous:hover:not(.ouvert)>.subMenu,.cf-sous:hover:not(.ouvert)>.subMenuBou{display:none !important}
  .cf-sous-btn{width:44px;height:44px}
  .cf-sous-btn::before{transform:rotate(45deg);margin:-4px 0 0}
  .cf-sous.ouvert>.cf-sous-btn::before{transform:rotate(-135deg);margin:4px 0 0}
  .cf-nav-toggle:checked ~ .cf-tabs{max-height:calc(100vh - 60px);overflow-y:auto}
}
@media (max-width:720px){
  .cf-banniere{min-height:150px;padding:28px 16px 20px}
  .cf-marque{font-size:54px}
  .cf-slogan{font-size:11px;letter-spacing:.2em}
  .cf-quick-txt,.cf-pseudo{display:none}
  .cf-compte>summary,.cf-connexion>summary{padding:0 8px}
  .cf-burger span{display:none}
  .cf-connexion .cf-dd-panel{min-width:0;width:calc(100vw - 32px)}
  #corps{padding:20px 12px 36px}
  .form_right{float:none;width:auto;margin:0 0 16px}
  .article .article_box,.article_box,fieldset{padding:12px 16px}
}