/*
Theme Name: Hello Elementor Child — OOI Header Test
Description: Child theme optimisé pour l’Association Ostéopathe de l’Océan Indien
Template: hello-elementor
Version: 2.3.6
*/

/* ==========================================================
   0) BASE
========================================================== */

main { margin-top: 30px; }
body.home main { margin-top: 0; }

main h1 {
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 20px;
}

/* ==========================================================
   1) FORMULAIRES (INSCRIPTION / LOGIN / MON ESPACE)
========================================================== */

.inscription form{
  max-width: 600px;
  margin: 20px auto;
  padding: 24px;
  border: 1px solid #ddd;
  border-radius: 12px;
  background: #f9f9f9;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

.inscription form h3{
  margin-bottom: 15px;
  font-size: 1.2em;
  border-bottom: 2px solid var(--e-global-color-primary);
  padding-bottom: 5px;
}

.inscription form label{
  font-weight: 600;
  margin-bottom: 6px;
  display: block;
}

.inscription form input,
.inscription form select{
  width: 100%;
  padding: 10px;
  margin-bottom: 14px;
  border: 1px solid #ccc;
  border-radius: 6px;
}

.inscription form button,
.inscription .elementor-widget-login .elementor-button{
  background: var(--e-global-color-primary) !important;
  color: #fff;
  padding: 10px 20px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
}
.inscription form button:hover{ opacity: .9; }

/* Mon Espace (form shortcode) */
.gestionUser label{
  font-weight: 700;
  margin-top: 14px;
  display: block;
}
.gestionUser input,
.gestionUser textarea{
  width: 100%;
  padding: 10px;
  border-radius: 6px;
  border: 1px solid #ccc;
}

.notice-success{
  border-left: 4px solid #46b450;
  background: #fff;
  padding: 12px;
  margin: 20px 0;
}

/* ==========================================================
   2) ANNUAIRE (shortcode [liste_adherents])
========================================================== */

.ooi-annuaire{ margin-top: 20px; }

/* Toolbar */
.ooi-annuaire-toolbar{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 20px;
}

.ooi-annuaire-search{ flex: 1 1 300px; }
.ooi-annuaire-search input{
  width: 100%;
  padding: 12px;
  border-radius: 10px;
  border: 1px solid #ccc;
}

.ooi-annuaire-filters{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.filter-btn{
  padding: 8px 14px;
  border-radius: 999px;
  background: #f2f2f2;
  border: 1px solid #ddd;
  font-size: 13px;
  cursor: pointer;
}

.filter-btn:hover,
.filter-btn.active{
  background: var(--e-global-color-primary);
  color: #fff;
  border-color: var(--e-global-color-primary);
}

/* Grid + Cards */
.ooi-annuaire-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.ooi-card{
  display: grid;
  grid-template-columns: 1fr 96px;
  gap: 14px;
  padding: 16px;
  border-radius: 16px;
  border: 1px solid #e6e6e6;
  background: #fff;
  box-shadow: 0 6px 16px rgba(0,0,0,0.05);
  transition: transform .12s ease, box-shadow .12s ease;
}

.ooi-card:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 26px rgba(0,0,0,0.08);
}

.ooi-card-title{
  font-size: 20px;
  font-weight: 800;
  margin: 0 0 6px 0;
  background: none !important;
  padding: 0 !important;
}

.ooi-card-subtitle{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  padding: 6px 10px;
  border-radius: 999px;
  background: #f3f5f7;
  margin-bottom: 10px;
}

.ooi-card-subtitle::before{
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #999;
}

/* Couleurs métiers (dot) */
.user-statut-osteopathe .ooi-card-subtitle::before{ background:#7270AC; }
.user-statut-kine .ooi-card-subtitle::before{ background:#80C5CF; }
.user-statut-podologue .ooi-card-subtitle::before{ background:#FFAB4E; }
.user-statut-orthophoniste .ooi-card-subtitle::before{ background:#AACF80; }
.user-statut-sagefemme .ooi-card-subtitle::before{ background:#D99E82; }
.user-statut-sante .ooi-card-subtitle::before,
.user-statut-autre .ooi-card-subtitle::before{ background:#6c757d; }

.ooi-card-line{ font-size: 14px; margin: 4px 0; }

.ooi-card-actions{
  display: flex;
  gap: 10px;
  margin-top: 12px;
  flex-wrap: wrap;
}

.ooi-btn{
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--e-global-color-primary);
  color: #fff !important;
  text-decoration: none;
  font-size: 13px;
  font-weight: 700;
}
.ooi-btn-ghost{
  background: #fff;
  color: var(--e-global-color-primary) !important;
  border: 1px solid #d6dbe3;
}

/* Media (photo) */
.ooi-card-media{
  width: 96px;
  height: 96px;
  border-radius: 14px;
  overflow: hidden;
  background: #f1f1f1;
}
.ooi-card-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ==========================================================
   3) PROFIL ADHÉRENT (author_base /adherent/)
========================================================== */

.ooi-profil-card{
  border: 1px solid #e6e6e6;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 6px 16px rgba(0,0,0,0.05);
  padding: 18px;
}

.ooi-profil-main{
  display: grid;
  grid-template-columns: 1fr 240px;
  gap: 18px;
  align-items: start;
}

.ooi-profil-title{
  margin: 0 0 10px 0;
  font-size: 28px;
  font-weight: 900;
  color: #111;
  text-transform: none;
}

.ooi-profil-badge{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  background: #f3f5f7;
  border: 1px solid #e6e8eb;
  font-weight: 800;
  font-size: 13px;
  margin-bottom: 12px;
}

.ooi-profil-meta{ margin: 8px 0 12px; color: #444; font-size: 14px; }
.ooi-profil-line{ margin: 4px 0; }

.ooi-profil-desc{
  margin: 12px 0;
  color: #333;
  font-size: 14px;
  line-height: 1.5;
}

.ooi-profil-actions{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 12px;
}

.ooi-profil-tel{
  font-size: 13px;
  color: #555;
  font-weight: 700;
  padding: 8px 10px;
  border: 1px solid #e6e8eb;
  border-radius: 12px;
  background: #fff;
}

.ooi-profil-media{
  width: 240px;
  aspect-ratio: 1 / 1;
  border-radius: 16px;
  overflow: hidden;
  background: #f1f1f1;
  justify-self: end;
}
.ooi-profil-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Map */
.ooi-profil-map-wrap{
  margin-top: 16px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid #e6e6e6;
}
.ooi-profil-map{ width: 100%; height: 360px; }

/* ==========================================================
   4) MON ESPACE / MES RÉSERVATIONS — Woo My Account (page-id-140)
   Objectif : appliquer l'ancien style "Mes réservations" directement dans Mon espace
========================================================== */

/* Masquer titres natifs WP/Elementor */
body.page-id-140 .entry-title,
body.page-id-140 h1.page-title,
body.page-id-140 header.page-header,
body.page-id-140 .elementor-page-title,
body.page-id-140 .elementor-widget-theme-post-title,
body.page-id-140 .elementor-element.elementor-widget-heading h1{
  display: none !important;
}

/* Largeur max propre */
body.page-id-140.woocommerce-account .woocommerce{
  max-width: 1100px;
  margin: 0 auto;
}

/* Masquer onglets inutiles (identique à l'ancien page-id-929) */
body.page-id-140 .woocommerce-MyAccount-navigation-link--downloads,
body.page-id-140 .woocommerce-MyAccount-navigation-link--edit-address,
body.page-id-140 .woocommerce-MyAccount-navigation-link--payment-methods,
body.page-id-140 .woocommerce-MyAccount-navigation-link--edit-account,
body.page-id-140 .woocommerce-MyAccount-navigation-link--subscriptions{
  display: none !important;
}

/* Navigation */
body.page-id-140 .woocommerce-MyAccount-navigation ul{
  list-style: none;
  padding: 0;
  margin: 0;
}
body.page-id-140 .woocommerce-MyAccount-navigation li{ margin: 0 0 12px 0; }

body.page-id-140 .woocommerce-MyAccount-navigation a{
  display: block;
  padding: 14px 16px;
  background: #fff;
  border-radius: 14px;
  text-decoration: none;
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 8px 24px rgba(0,0,0,0.06);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
body.page-id-140 .woocommerce-MyAccount-navigation a:hover,
body.page-id-140 .woocommerce-MyAccount-navigation a:focus{
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(0,0,0,0.08);
}
body.page-id-140 .woocommerce-MyAccount-navigation li.is-active a{
  border-color: rgba(114,112,172,0.45);
}

/* Table commandes */
body.page-id-140 table.shop_table{
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 16px;
  overflow: hidden;
}

body.page-id-140 table.shop_table th,
body.page-id-140 table.shop_table td{
  padding: 14px 12px;
}

body.page-id-140 .woocommerce-orders-table__cell-order-actions a,
body.page-id-140 a.woocommerce-button{
  border-radius: 999px !important;
  padding: 10px 14px !important;
  font-weight: 600;
}

/* ==========================================================
   5) RESPONSIVE GLOBAL (annuaire + profil + mon espace)
========================================================== */

@media (max-width: 768px){

  /* Annuaire */
  .ooi-annuaire-grid{ grid-template-columns: 1fr; }
  .ooi-card{ grid-template-columns: 1fr 80px; }
  .ooi-card-media{ width: 80px; height: 80px; }
  .filter-btn{ padding: 8px 12px; font-size: 12px; }
/* Profil */
  .ooi-profil-main{ grid-template-columns: 1fr; }
  .ooi-profil-title{ font-size: 22px; }
  .ooi-profil-media{
    width: 100%;
    max-width: 420px;
    justify-self: start;
  }

  /* Mon espace : menu en grille + commandes en cartes */
  body.page-id-140 .woocommerce-MyAccount-navigation,
  body.page-id-140 .woocommerce-MyAccount-content{
    width: 100%;
  }

  body.page-id-140 .woocommerce-MyAccount-navigation ul{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 20px;
  }

  body.page-id-140 .woocommerce-MyAccount-navigation li{ margin: 0; }

  body.page-id-140 .woocommerce-MyAccount-navigation a{
    text-align: center;
    padding: 14px 12px;
    min-height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
  }

  body.page-id-140 table.shop_table thead{ display: none; }

  body.page-id-140 table.shop_table tr{
    display: block;
    background: #fff;
    border-radius: 16px;
    margin-bottom: 14px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.06);
    overflow: hidden;
  }

  body.page-id-140 table.shop_table td{
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border: none !important;
  }

  body.page-id-140 table.shop_table td::before{
    font-weight: 600;
    opacity: .65;
  }

  body.page-id-140 .woocommerce-orders-table__cell-order-actions a,
  body.page-id-140 a.woocommerce-button{
    width: 100%;
    text-align: center;
  }
}

@media (max-width: 520px){
  .ooi-card-actions,
  .ooi-profil-actions{
    flex-direction: column;
    align-items: stretch;
  }
  .ooi-btn,
  .ooi-btn-ghost{
    width: 100%;
  }
}

/* ==========================================================
   6) ACCUEIL MEMBRE — Tuile Prestataire (shortcode)
========================================================== */

.ooi-tile.ooi-tile--prestataire{
  /* Neutraliser l'héritage Elementor */
  color: inherit !important;
  font-family: inherit;
  text-decoration: none !important;

  /* Alignement tuile */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  /* Look identique à vos tuiles */
  background: #ead9cf;                 /* beige proche des autres */
  border-radius: 22px;
  padding: 26px 18px;
  min-height: 160px;

  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 8px 16px rgba(0,0,0,0.08);

  gap: 12px;
  transition: transform .15s ease, box-shadow .15s ease;
}

.ooi-tile.ooi-tile--prestataire:hover{
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0,0,0,0.10);
}

/* Icône ronde noire */
.ooi-tile.ooi-tile--prestataire .ooi-tile__icon{
  width: 78px;
  height: 78px;
  border-radius: 999px;
  background: #2e2e2e;
  color: #fff;                          /* SVG en blanc via currentColor */
  display: grid;
  place-items: center;
}

/* SVG */
.ooi-tile.ooi-tile--prestataire .ooi-tile__svg{
  display: block;
}

/* Titre : même style que vos tuiles */
.ooi-tile.ooi-tile--prestataire .ooi-tile__title{
  color: #111 !important;
  font-weight: 800;
  font-size: 20px;
  text-align: center;
  line-height: 1.15;
}

/* État "new" : léger accent (optionnel) */
.ooi-tile.ooi-tile--prestataire.ooi-tile--new{
  outline: 2px solid rgba(114,112,172,0.22);
  outline-offset: 0;
}
/* ==========================================================
   EVENT CTA — Prestataires (shortcode [ooi_event_prestataire_cta])
========================================================== */

.ooi-event-cta{
  max-width: 720px;
  margin: 22px 0 26px;
  padding: 18px 18px;
  border-radius: 18px;

  background: #fff;
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 10px 26px rgba(0,0,0,0.08);
}

.ooi-event-cta__head{
  margin-bottom: 12px;
}

.ooi-event-cta__title{
  font-weight: 900;
  font-size: 18px;
  color: #111;
  margin-bottom: 4px;
}

.ooi-event-cta__subtitle{
  font-weight: 700;
  font-size: 14px;
  color: #444;
  line-height: 1.35;
}

.ooi-event-cta__actions{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* Bouton */
.ooi-event-cta__btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  padding: 12px 16px;
  border-radius: 999px;
  text-decoration: none !important;

  font-weight: 800;
  font-size: 14px;

  background: var(--e-global-color-primary, #7270AC);
  color: #fff !important;
  box-shadow: 0 10px 22px rgba(0,0,0,0.12);

  transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}

.ooi-event-cta__btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(0,0,0,0.16);
  opacity: .96;
}

/* Variantes état (optionnel, léger) */
.ooi-event-cta--profile{
  border-left: 4px solid rgba(255,171,78,0.9);
}
.ooi-event-cta--apply{
  border-left: 4px solid rgba(114,112,172,0.9);
}
.ooi-event-cta--login{
  border-left: 4px solid rgba(128,197,207,0.9);
}

/* Mobile */
@media (max-width: 768px){
  .ooi-event-cta{
    padding: 16px;
    border-radius: 16px;
  }
  .ooi-event-cta__btn{
    width: 100%;
  }
}
.ooi-event-cta--done .ooi-event-cta__btn--disabled {
    background: #e6f7ee;
    color: #1f7a4d;
    border: 1px solid #9fe3c2;
    cursor: default;
    pointer-events: none;
    font-weight: 600;
}

.ooi-event-cta--done .ooi-event-cta__btn--disabled svg {
    color: #1f7a4d;
}