/*
Theme Name: AfriPaternité
Description: Thème sur-mesure pour AfriPaternité — vente de tests ADN de paternité et de parenté avec WooCommerce.
Author: AfriPaternité
Version: 1.0.0
Text Domain: apt
*/

  :root{
    --bg: #EDE7D8;
    --bg-panel: #F6F2E7;
    --ink: #17302C;
    --ink-soft: #445450;
    --line: #C9BEA2;
    --teal: #2C6C5F;
    --teal-deep: #17302C;
    --amber: #B5752A;
    --amber-deep: #8F5A1E;
    --paper: #FBF9F2;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{
    background:var(--bg);
    color:var(--ink);
    font-family:'Inter', sans-serif;
    font-size:16px;
    line-height:1.55;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3,.serif{ font-family:'Fraunces', serif; font-weight:500; letter-spacing:-0.01em; }
  a{color:inherit;}
  img{max-width:100%; display:block;}
  .wrap{ max-width:1120px; margin:0 auto; padding:0 24px; }
  .view{ display:none; }
  .view.active{ display:block; }

  /* ---------- Reference marker (document-style corner tag) ---------- */
  .ref-tag{
    display:inline-flex; align-items:center; gap:8px;
    font-size:12.5px; color:var(--ink-soft);
    border:1px solid var(--line); border-radius:100px;
    padding:5px 12px 5px 6px;
    background:var(--paper);
  }
  .ref-tag .dot{ width:6px; height:6px; border-radius:50%; background:var(--teal); }

  /* ---------- Header ---------- */
  header{
    position:sticky; top:0; z-index:50;
    background:rgba(237,231,216,0.92); backdrop-filter:blur(6px);
    border-bottom:1px solid var(--line);
  }
  .nav{ display:flex; align-items:center; justify-content:space-between; padding:18px 24px; }
  .brand{ display:flex; align-items:center; gap:10px; font-family:'Fraunces',serif; font-size:20px; font-weight:600; }
  .brand svg{ width:26px; height:26px; }
  .nav-links{ display:flex; gap:30px; font-size:14.5px; color:var(--ink-soft); }
  .nav-links a:hover{ color:var(--ink); }
  .nav-cta{ display:flex; align-items:center; gap:18px; }
  .phone-line{ font-size:14px; color:var(--ink-soft); display:flex; align-items:center; gap:6px; }
  .btn{
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    border-radius:3px; padding:12px 22px; font-size:14.5px; font-weight:600;
    cursor:pointer; border:1px solid transparent; transition:transform .15s ease, background .15s ease;
    font-family:'Inter',sans-serif;
  }
  .btn:hover{ transform:translateY(-1px); }
  .btn-primary{ background:var(--teal-deep); color:var(--paper); }
  .btn-primary:hover{ background:var(--teal); }
  .btn-amber{ background:var(--amber); color:var(--paper); }
  .btn-amber:hover{ background:var(--amber-deep); }
  .btn-outline{ border-color:var(--ink); color:var(--ink); background:transparent; }
  .btn-outline:hover{ background:var(--ink); color:var(--paper); }
  .btn-ghost{ background:transparent; color:var(--ink-soft); padding:12px 4px; }

  /* ---------- Hero ---------- */
  .hero{ padding:88px 0 64px; border-bottom:1px solid var(--line); }
  .hero-grid{ display:grid; grid-template-columns:1.1fr 0.9fr; gap:64px; align-items:center; }
  .hero h1{ font-size:50px; line-height:1.06; max-width:11ch; }
  .hero p.lead{ margin-top:22px; font-size:17.5px; color:var(--ink-soft); max-width:42ch; }
  .hero-actions{ margin-top:32px; display:flex; gap:14px; flex-wrap:wrap; }
  .trust-row{
    margin-top:44px; display:grid; grid-template-columns:repeat(4,1fr); gap:0;
    border-top:1px solid var(--line);
  }
  .trust-item{ padding:16px 18px 0 0; border-right:1px solid var(--line); }
  .trust-item:last-child{ border-right:none; }
  .trust-item .num{ font-family:'Fraunces',serif; font-size:22px; }
  .trust-item .lbl{ font-size:12.5px; color:var(--ink-soft); margin-top:2px; }

  .hero-doc{
    background:var(--paper); border:1px solid var(--line); border-radius:4px;
    padding:26px; position:relative;
  }
  .hero-doc::before{
    content:""; position:absolute; inset:8px; border:1px solid var(--line); border-radius:2px; pointer-events:none;
  }
  .hero-doc .doc-head{ display:flex; justify-content:space-between; align-items:center; font-size:12px; color:var(--ink-soft); padding-bottom:14px; border-bottom:1px dashed var(--line); }
  .helix{ margin:22px auto; display:block; }
  .doc-row{ display:flex; justify-content:space-between; font-size:13.5px; padding:9px 0; border-bottom:1px solid var(--line); color:var(--ink-soft); }
  .doc-row b{ color:var(--ink); font-weight:600; }
  .doc-row:last-child{ border-bottom:none; }
  .stamp{ margin-top:16px; display:inline-flex; align-items:center; gap:8px; font-size:12px; color:var(--teal); border:1px solid var(--teal); padding:6px 12px; border-radius:100px; }

  /* ---------- Sections ---------- */
  section{ padding:76px 0; }
  .section-head{ max-width:56ch; margin-bottom:44px; }
  .section-head .ref-tag{ margin-bottom:16px; }
  .section-head h2{ font-size:34px; }
  .section-head p{ margin-top:14px; color:var(--ink-soft); font-size:16px; }

  /* Steps (legit sequence) */
  .steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; border-top:1px solid var(--line); border-left:1px solid var(--line); }
  .step{ padding:28px 24px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--bg-panel); }
  .step .n{ font-family:'Fraunces',serif; font-size:26px; color:var(--teal); }
  .step h3{ font-size:17px; margin-top:14px; font-weight:600; font-family:'Inter',sans-serif; }
  .step p{ margin-top:8px; font-size:14px; color:var(--ink-soft); }

  /* Test cards */
  .tests-toolbar{ display:flex; align-items:center; justify-content:space-between; margin-bottom:28px; flex-wrap:wrap; gap:14px; }
  select{
    font-family:'Inter',sans-serif; font-size:14.5px; padding:10px 14px; border-radius:3px;
    border:1px solid var(--line); background:var(--paper); color:var(--ink); cursor:pointer;
  }
  .test-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
  .test-card{
    background:var(--paper); border:1px solid var(--line); border-radius:4px; padding:0 0 22px 0;
    display:flex; flex-direction:column; gap:0; overflow:hidden;
  }
  .test-card-image{ width:100%; aspect-ratio:16/10; overflow:hidden; background:var(--bg-panel); }
  .test-card-image img{ width:100%; height:100%; object-fit:cover; display:block; }
  .test-card-image-placeholder{ width:100%; height:100%; background:var(--bg-panel); }
  .test-card h3{ font-size:20px; font-family:'Inter',sans-serif; font-weight:600; padding:18px 22px 0; }
  .test-card .desc{ font-size:13.5px; color:var(--ink-soft); flex-grow:1; padding:0 22px; }
  .test-card .price-row{ display:flex; align-items:baseline; justify-content:space-between; padding:14px 22px 0; margin-top:14px; border-top:1px solid var(--line); }
  .test-card .price{ font-family:'Fraunces',serif; font-size:24px; }
  .test-card .delay{ font-size:12.5px; color:var(--ink-soft); }
  .test-card .cta{ font-size:14px; font-weight:600; color:var(--teal); display:flex; align-items:center; gap:6px; cursor:pointer; }
  .test-card.featured{ border-color:var(--teal); box-shadow:0 0 0 1px var(--teal); }
  .tag-small{ font-size:11.5px; color:var(--teal); font-weight:600; }

  /* Trust / accreditation */
  .accred-band{ background:var(--teal-deep); color:var(--paper); }
  .accred-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:24px; margin-top:36px; }
  .accred-item{ border:1px solid rgba(251,249,242,0.22); border-radius:4px; padding:18px 14px; text-align:center; font-size:12.5px; letter-spacing:.02em; color:rgba(251,249,242,0.85); }
  .accred-band .section-head p{ color:rgba(251,249,242,0.75); }
  .accred-band .ref-tag{ background:transparent; border-color:rgba(251,249,242,0.3); color:rgba(251,249,242,0.85); }
  .accred-band .ref-tag .dot{ background:#E8B65A; }

  /* FAQ */
  .faq-item{ border-bottom:1px solid var(--line); padding:22px 0; }
  .faq-q{ display:flex; justify-content:space-between; align-items:center; cursor:pointer; font-weight:600; font-size:16px; }
  .faq-a{ max-height:0; overflow:hidden; transition:max-height .25s ease; font-size:14.5px; color:var(--ink-soft); }
  .faq-item.open .faq-a{ max-height:200px; margin-top:12px; }
  .faq-q .plus{ font-family:'Fraunces',serif; font-size:20px; color:var(--teal); transition:transform .2s ease; }
  .faq-item.open .plus{ transform:rotate(45deg); }

  footer{ border-top:1px solid var(--line); padding:48px 0 32px; font-size:13.5px; color:var(--ink-soft); }
  .footer-grid{ display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:24px; }

  /* ---------- Order page ---------- */
  .order-shell{ padding:52px 0 90px; }
  .order-grid{ display:grid; grid-template-columns:1fr 380px; gap:48px; align-items:start; }
  .back-link{ display:inline-flex; align-items:center; gap:8px; font-size:14px; color:var(--ink-soft); cursor:pointer; margin-bottom:28px; }
  .order-title{ font-size:30px; margin-bottom:8px; }
  .order-sub{ color:var(--ink-soft); font-size:15px; margin-bottom:36px; }
  .form-block{ background:var(--paper); border:1px solid var(--line); border-radius:4px; padding:30px; margin-bottom:22px; }
  .form-block h3{ font-family:'Inter',sans-serif; font-size:13px; text-transform:none; letter-spacing:.01em; color:var(--ink-soft); font-weight:600; margin-bottom:18px; padding-bottom:14px; border-bottom:1px solid var(--line); }
  .field-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px; }
  .field-row.single{ grid-template-columns:1fr; }
  .field label{ display:block; font-size:12.5px; color:var(--ink-soft); margin-bottom:6px; }
  .field input, .field select{
    width:100%; font-family:'Inter',sans-serif; font-size:14.5px; padding:11px 13px;
    border:1px solid var(--line); border-radius:3px; background:var(--bg-panel); color:var(--ink);
  }
  .field input:focus, .field select:focus{ outline:2px solid var(--teal); outline-offset:1px; }
  .test-pick{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
  .test-pick .opt{ border:1px solid var(--line); border-radius:3px; padding:12px 10px; font-size:13px; text-align:center; cursor:pointer; background:var(--bg-panel); }
  .test-pick .opt.sel{ border-color:var(--teal); background:rgba(44,108,95,0.08); color:var(--teal); font-weight:600; }

  .person-card{ border:1px solid var(--line); border-radius:3px; padding:18px; margin-bottom:12px; background:var(--bg-panel); }
  .person-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
  .person-head .role{ font-weight:600; font-size:14.5px; }
  .person-head .remove{ font-size:12.5px; color:var(--ink-soft); cursor:pointer; text-decoration:underline; }
  .sample-choice{ display:flex; flex-direction:column; gap:8px; }
  .sample-radio{ display:flex; align-items:center; gap:10px; font-size:13.5px; cursor:pointer; }
  .sample-radio .pay-dot{ width:15px; height:15px; }
  .sample-radio.sel .pay-dot{ border-color:var(--teal); background:radial-gradient(circle, var(--teal) 0 40%, transparent 42%); }
  .sample-select{ margin-top:8px; margin-left:25px; width:calc(100% - 25px); }
  .pay-methods{ display:flex; gap:10px; flex-wrap:wrap; }
  .pay-opt{ flex:1; min-width:140px; border:1px solid var(--line); border-radius:3px; padding:14px; cursor:pointer; background:var(--bg-panel); display:flex; align-items:center; gap:10px; font-size:13.5px; }
  .pay-opt.sel{ border-color:var(--amber); background:rgba(181,117,42,0.08); }
  .pay-dot{ width:16px; height:16px; border-radius:50%; border:1.5px solid var(--line); flex-shrink:0; }
  .pay-opt.sel .pay-dot{ border-color:var(--amber); background:radial-gradient(circle, var(--amber) 0 40%, transparent 42%); }

  .order-shell .summary{ background:var(--teal-deep); color:var(--paper); border-radius:4px; padding:28px; position:sticky; top:100px; }
  .order-shell .summary h3{ font-family:'Fraunces',serif; font-size:19px; margin-bottom:20px; }
  .order-shell .summary-row{ display:flex; justify-content:space-between; font-size:14px; padding:10px 0; border-bottom:1px solid rgba(251,249,242,0.18); color:rgba(251,249,242,0.82); }
  .order-shell .summary-row.total{ color:var(--paper); font-weight:600; font-size:17px; border-bottom:none; padding-top:16px; }
  .order-shell .summary-row.total .val{ font-family:'Fraunces',serif; font-size:24px; }
  .order-shell .summary .btn-amber{ width:100%; margin-top:20px; padding:15px; font-size:15px; }
  .order-shell .summary .note{ font-size:12px; color:rgba(251,249,242,0.6); margin-top:14px; line-height:1.5; }
  .confidential-badge{ display:flex; align-items:center; gap:8px; font-size:12.5px; color:rgba(251,249,242,0.7); margin-top:18px; }

  @media (max-width: 880px){
    .nav-links{ display:none; }
    .hero-grid{ grid-template-columns:1fr; }
    .hero h1{ font-size:36px; max-width:none; }
    .trust-row{ grid-template-columns:repeat(2,1fr); row-gap:16px; }
    .steps{ grid-template-columns:repeat(2,1fr); }
    .test-grid{ grid-template-columns:1fr; }
    .accred-grid{ grid-template-columns:repeat(2,1fr); }
    .order-grid{ grid-template-columns:1fr; }
    .field-row{ grid-template-columns:1fr; }
    .test-pick{ grid-template-columns:repeat(2,1fr); }
    .order-shell .summary{ position:static; }
  }

/* ============================================================
   Habillage des pages WooCommerce par défaut (boutique, produit,
   panier, commande) pour rester cohérent avec le reste du site
   ============================================================ */
.woocommerce, .woocommerce-page {
  font-family: 'Inter', sans-serif;
  color: var(--ink);
  background: var(--bg);
  padding: 40px 24px;
}
.woocommerce ul.products, .woocommerce-page ul.products {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
  float: none !important;
  width: auto !important;
  margin: 0 !important;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 20px;
}
.woocommerce ul.products li.product img {
  border-radius: 3px;
  margin-bottom: 12px;
}
.woocommerce ul.products li.product h2,
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: 'Fraunces', serif;
  font-size: 18px;
  font-weight: 500;
  margin: 0 0 8px;
}
.woocommerce span.price, .woocommerce-page span.price {
  font-family: 'Fraunces', serif;
  font-size: 20px;
  color: var(--teal);
}
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce #respond input#submit, .woocommerce-page a.button,
.woocommerce .single_add_to_cart_button, .woocommerce #place_order,
.woocommerce a.checkout-button {
  background: var(--teal-deep) !important;
  color: var(--paper) !important;
  border-radius: 3px !important;
  border: none !important;
  padding: 13px 22px !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  font-size: 14.5px !important;
  cursor: pointer;
}
.woocommerce a.button:hover, .woocommerce button.button:hover,
.woocommerce .single_add_to_cart_button:hover, .woocommerce #place_order:hover {
  background: var(--teal) !important;
}
.woocommerce div.product .product_title {
  font-family: 'Fraunces', serif;
  font-size: 30px;
  margin-bottom: 10px;
}
.woocommerce div.product p.price, .woocommerce div.product span.price {
  font-family: 'Fraunces', serif;
  font-size: 26px;
  color: var(--teal);
}
.woocommerce table.shop_table {
  border-collapse: collapse;
  width: 100%;
  background: var(--paper);
  border: 1px solid var(--line);
}
.woocommerce table.shop_table th, .woocommerce table.shop_table td {
  border-bottom: 1px solid var(--line);
  padding: 12px 14px;
  font-size: 14px;
}
.woocommerce #order_review, .woocommerce-checkout #payment {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 20px;
}
.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea,
.woocommerce form .form-row select {
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 11px 13px;
  background: var(--bg-panel);
  font-family: 'Inter', sans-serif;
}

/* ---------- Checkout : champs, récap et paiement ---------- */
.woocommerce-checkout #customer_details { max-width: 560px; }
.woocommerce-billing-fields > h3, #order_review_heading {
  font-family: 'Fraunces', serif;
  font-size: 22px;
  font-weight: 500;
  margin-bottom: 4px;
}
.woocommerce-billing-fields .form-row { margin-bottom: 14px; }
.woocommerce-additional-fields { display: none; } /* notes de commande masquées */

.woocommerce-checkout #order_review {
  background: var(--teal-deep) !important;
  color: var(--paper) !important;
  border-radius: 4px;
  padding: 26px;
}
.woocommerce-checkout #order_review table.shop_table {
  background: transparent !important;
  border: none !important;
}
.woocommerce-checkout #order_review table.shop_table th,
.woocommerce-checkout #order_review table.shop_table td {
  border-bottom: 1px solid rgba(251,249,242,0.18) !important;
  color: var(--paper) !important;
}
.woocommerce-checkout #order_review table.shop_table .order-total td,
.woocommerce-checkout #order_review table.shop_table .order-total th {
  font-family: 'Fraunces', serif;
  font-size: 20px;
  border-bottom: none !important;
}

.woocommerce-checkout #payment {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin-top: 20px;
}
.woocommerce-checkout #payment ul.payment_methods {
  list-style: none;
  padding: 0 !important;
  border-top: 1px solid var(--line) !important;
  border-bottom: none !important;
  margin: 0 !important;
  padding-top: 16px !important;
}
.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 14px 16px;
  margin-bottom: 10px;
  background: var(--bg-panel) !important;
}
.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method input.input-radio {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--ink);
}
.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method label {
  flex: 1 1 auto;
  margin: 0;
  font-weight: 600;
  color: var(--ink) !important;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
}
/* Les passerelles Djomy n'ont pas d'icône (icon=''), mais au cas où une future
   passerelle en ajoute une, on l'empêche de casser l'alignement */
.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method label img {
  max-height: 20px;
  width: auto;
}
.woocommerce-checkout #payment div.payment_box {
  flex-basis: 100%;
  width: 100%;
  background: var(--paper) !important;
  color: var(--ink) !important;
  border-radius: 3px;
  padding: 16px;
  margin-top: 4px;
  font-size: 13.5px;
}
.woocommerce-checkout #payment div.payment_box p.form-row { margin-bottom: 12px; }
.woocommerce-checkout #payment div.payment_box p.form-row:last-child { margin-bottom: 0; }
.woocommerce-checkout #payment div.payment_box label {
  color: var(--ink) !important;
  font-weight: 500;
  display: block;
  margin-bottom: 6px;
}
.woocommerce-checkout #payment div.payment_box .form-row input.input-text {
  background: var(--bg-panel);
}
#place_order {
  width: 100%;
  margin-top: 16px;
}
.woocommerce-message, .woocommerce-info {
  border-top-color: var(--teal) !important;
  background: var(--paper);
}
.woocommerce-message::before, .woocommerce-info::before {
  color: var(--teal) !important;
}

@media (max-width: 880px) {
  .woocommerce ul.products, .woocommerce-page ul.products {
    grid-template-columns: 1fr;
  }
}