/*
	Theme Name: CleCle
	Theme URI: https://fw16.fr
	Description: 
	Author: FW16
	Author URI: https://fw16.fr
	Version: 3.4.6
	Stable tag: 3.4.6
	Requires at least: 6.0
	Tested up to: 6.8
	Requires PHP: 7.4
	License: GNU General Public License v3 or later.
	License URI: https://www.gnu.org/licenses/gpl-3.0.html
	Text Domain: hello-elementor
	Tags: accessibility-ready, flexible-header, custom-colors, custom-menu, custom-logo, featured-images, rtl-language-support, threaded-comments, translation-ready,
*/



 *, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

  :root {
    --burgundy: #6B2034;
    --gold: #C9A84C;
    --gold-light: #E8C97A;
    --cream: #FAF6EE;
    --dark: #1a0a10;
    --pink-footer: #F7D6DF;
  }

  html, body {
    width:100%;
    font-family: 'Cormorant Garamond', serif;
  }

  /* ── BACKGROUND ── */
  .bg {
    position: fixed; inset:0; z-index:0;
    background: url('https://clecle.fr/wp-content/uploads/2026/03/background.webp') center/cover no-repeat;
  }
  .bg::after {
    content:''; position:absolute; inset:0;
    background: rgba(255,235,240,0.12);
  }

  /* ── FLOWER DOTS ── */
  .dot {
    position: fixed;
    width:50px; height:50px;
    border-radius:50%;
    cursor:pointer;
    z-index:5;
    transition: transform .2s, box-shadow .2s;
  }
  .dot:hover { transform:scale(1.5); box-shadow:0 0 0 5px rgba(107,32,52,0.35); }
  .dot:nth-child(1) { top:4%;  left:3%; }
  .dot:nth-child(2) { top:7%;  left:35%; }
  .dot:nth-child(3) { top:5%;  right:10%; }
  .dot:nth-child(4) { top:35%; left:4%; }
  .dot:nth-child(5) { top:40%; right:5%; }
  .dot:nth-child(6) { top:58%; right:14%; }
  .dot:nth-child(7) { top:26%; right:25%; }
  .dot:nth-child(8) { top:34%; left:25%; }
  .dot:nth-child(9) { bottom:14%; left:20%; }
  .dot:nth-child(10) { bottom:18%; right:22%; }
  .dot:nth-child(11) { top:3%; left:6%; }


  div.wpforms-container-full .wpforms-confirmation-container-full, div[submit-success]>.wpforms-confirmation-container-full:not(.wpforms-redirection-message) {
    background: #FAF6EE !important;
    border: 1px solid #FAF6EE !important;
    box-sizing: border-box;
    font-family:'Cinzel',serif !important;
    text-align: center;
  }

  .wpforms-container .wpforms-field, .wp-core-ui div.wpforms-container .wpforms-field {
    padding: 4px !important;
  }


  /* ── MAIN LAYOUT ── */
  .contentPage {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  /* ── ENVELOPE ── */
  .envelope {
    height: 438px !important;
    width: auto;
    filter: drop-shadow(0 16px 48px rgba(107,32,52,0.4));
    animation: floatIn 1.2s cubic-bezier(.22,1,.36,1) both;
  }
  @keyframes floatIn {
    from { opacity:0; transform:translateY(-24px); }
    to   { opacity:1; transform:translateY(0); }
  }

  /* ── COUNTDOWN ── */
  .countdown {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    animation: fadeUp .9s .4s both;
  }
  .cd-unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
  }
  .cd-digits {
    display: flex;
    gap: 3px;
  }
  .cd-digit {
    width: clamp(28px, 3.8vw, 46px);
    height: clamp(36px, 4.8vw, 58px);
    background: var(--gold);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'DSEG7 Classic', 'DSEG7Classic', monospace;
    font-size: clamp(18px, 2.4vw, 30px);
    font-weight: 300;
    color: #ffffff;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.6), 0 2px 6px rgba(0,0,0,0.4);
    position: relative;
    overflow: hidden;
  }
  .cd-digit::after {
    content: '';
    position: absolute;
    left: 0; right: 0; top: 50%;
    height: 1px;
    background: rgba(0,0,0,0.35);
  }
  .cd-block { display: none; } /* kept for JS compat */
  .cd-label {
    font-family: 'Cinzel', serif;
    font-size: 9px;
    letter-spacing: 3px;
    color: var(--burgundy);
    text-transform: uppercase;
    font-weight: bold;
  }
  .cd-sep {
    color: #1a1a1a;
    font-size: clamp(20px, 2.8vw, 34px);
    font-weight: 700;
    padding-bottom: 18px;
    line-height: 1;
    text-shadow: 0 1px 3px rgba(0,0,0,0.3);
  }

  /* ── VIC CARD ── */
  .vic {
    background: rgba(250,246,238,0.88);
    backdrop-filter: blur(6px);
    border-radius:4px;
    padding: clamp(14px,2vh,22px) clamp(20px,4vw,40px);
    text-align:center;
    max-width:440px; width:90vw;
    box-shadow: 0 6px 30px rgba(107,32,52,0.12);
    animation: fadeUp .9s .7s both;
  }
  .vic-title {
    font-family:'Cinzel',serif;
    font-size:12px;
    letter-spacing:4px; color:var(--burgundy); font-weight:600;
    margin-bottom:2px;
  }

  a{
	color:var(--burgundy) !important;
  }
  .vic-sub {
    font-family:'Cinzel',serif;
    font-size:12px;
    letter-spacing:3px; color:var(--gold); opacity:.7;
    margin-bottom:8px;
    font-weight: bold;
  }
  .vic-text {
    font-size:14px;
    color:#4a2030; line-height:1.55;
    margin-bottom:14px;
  }
  .vic-text em { font-style:italic; }
  .btn-vic {
    border: 1.5px solid var(--gold) !important;
    background:transparent !important;
    color:var(--burgundy) !important;
    font-family:'Cinzel',serif !important;
    font-size:clamp(8px,.85vw,10px) !important;
    letter-spacing:4px !important;
    text-transform:uppercase !important;
    padding:11px 28px !important;
    cursor:pointer; transition:all .3s !important;
    margin: 0 auto !important;
    display: block !important;
  }
  .btn-vic:hover { background:var(--burgundy) !important; border-color:var(--burgundy) !important; color:var(--cream) !important; }

  /* ── FOOTER ── */
  .footer {
    text-align:center;
    animation: fadeUp .9s 1s both;
    background: rgba(250,246,238,0.88);
    border-radius: 6px;
    padding: 12px 28px 10px;
    box-shadow: 0 4px 18px rgba(107,32,52,0.10);
    width: 100%;
  }
  .footer-icons {
    display:flex; gap:16px; justify-content:center; margin-bottom:8px;
  }
  .footer-icons a {
    width:32px; height:32px; border-radius:50%;
    background:rgba(255,255,255,0.72);
    display:flex; align-items:center; justify-content:center;
    color:var(--burgundy); text-decoration:none;
    transition:background .2s, transform .2s;
  }
  .footer-icons a:hover { background:var(--cream); transform:translateY(-2px); }
  .footer-links {
    font-size:12px; letter-spacing:1.5px; color:var(--burgundy);
    font-family:'Cinzel',serif;
  }
  .footer-links a { color:var(--burgundy); text-decoration:underline; margin:0 5px; }
  .footer-copy {
    margin-top:4px; font-size:12px; letter-spacing:2px;
    color:var(--burgundy); font-family:'Cinzel',serif; opacity:.65;
  }

  @keyframes fadeUp {
    from { opacity:0; transform:translateY(16px); }
    to   { opacity:1; transform:translateY(0); }
  }

  /* ═══════════════════════════
     MODAL FORM
  ═══════════════════════════ */
  .overlay {
    position:fixed; inset:0; z-index:100;
    background:rgba(60,10,20,0.6);
    backdrop-filter:blur(8px);
    display:flex; align-items:center; justify-content:center;
    opacity:0; pointer-events:none; transition:opacity .4s;
  }
  .overlay.open { opacity:1; pointer-events:all; }

  /* ── GOLD FRAME WRAPPER ── */
  .modal-frame {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateY(24px);
    transition: transform .4s;
  }
  .overlay.open .modal-frame { transform: translateY(0); }

  .modal-frame::before {
    content: '';
    position: absolute;
    inset: -93px -193px;          /* frame extends beyond the white card */
    background: url('https://clecle.fr/wp-content/uploads/2026/03/cadre.webp') center / 100% 100% no-repeat;
    pointer-events: none;
    z-index: 2;
  }

  .modal {
    background:var(--cream);
    width:min(500px, 94vw);
    max-height:92vh; overflow-y:auto;
    padding:38px 36px 30px;
    position:relative; border-radius:3px;
    box-shadow:0 30px 80px rgba(0,0,0,0.45);
    min-height: 565px;
    z-index: 1;
  }
  .modal::before {
    content:'';
    position:absolute; inset:7px;
    border:1px solid rgba(201,168,76,0.3);
    pointer-events:none; border-radius:1px;
  }
  .modal-close {
    position:absolute; top: 0;
    right: 1.2rem;
    background:none; border:none;
    font-size:18px; color:var(--gold); cursor:pointer;
    font-family:'Cormorant Garamond',serif;
    z-index: 3;
  }
  .modal-flowers { text-align:center; font-size:18px; letter-spacing:6px; margin-bottom:10px; }
  .modal-title {
    font-family:'Cormorant Garamond',serif;
    font-size:clamp(22px,2.5vw,28px); font-weight:300; font-style:italic;
    color:var(--burgundy); text-align:center; margin-bottom:3px;
  }
  .modal-subtitle {
    font-family:'Cinzel',serif; font-size:14px; letter-spacing:3px;
    color:var(--gold); text-align:center; margin-bottom:5px;
  }
  .modal-desc {
    font-size: 16px;
    color: #5a2030;
    text-align: center;
    line-height: 1.6;
    margin-bottom: 20px;
    font-style: italic;
    font-family: 'Cormorant Garamond';
  }
  .form-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:12px; }
  .f { margin-bottom:12px; }
  .f input {
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid var(--gold) !important;
    padding: 8px 0 !important;
    font-family: 'Cormorant Garamond', serif !important;
    font-size: 18px !important;
    color: var(--burgundy) !important;
    outline: none !important;
  }
  .f input::placeholder { color:#c9a0a0 !important; font-style:italic !important; }
  .f input:focus { border-bottom-color:var(--burgundy) !important; }
  .wpforms-field-description { font-size:12px !important; color:#c9a0a0 !important; font-style:italic !important; margin-top:3px !important; }
  .cb-label {
    display:flex; align-items:flex-start; gap:10px;
    cursor:pointer; margin-bottom:9px;
  }
  .cb-label input[type=checkbox] { accent-color:#D4748A !important; width:13px !important; height:13px !important; margin-top:2px !important; flex-shrink:0 !important; }
  .cb-label span { font-size:10px; color:#5a3040; line-height:1.5; }
  .btn-submit {
    background: var(--dark) !important;
    border: none !important;
    color: var(--gold-light) !important;
    font-family: 'Cinzel', serif !important;
    font-size: 12px !important;
    letter-spacing: 4px !important;
    padding: 14px !important;
    border-radius: 2px !important;
    transition: background .2s !important;
    text-transform: uppercase !important;
    width: 100% !important;
  }
  .btn-submit:hover { background:var(--burgundy) !important; }

  .wpforms-field-label-inline{
	font-size: 12px !important;
    color: #5a3040 !important;
  }
  /* Confirm */
  .confirm { display:none; text-align:center; padding:24px 0; }
  .confirm.show { display:block; }
  .confirm-title {
    font-family:'Cormorant Garamond',serif; font-size:24px; font-style:italic;
    color:var(--burgundy); margin-bottom:12px;
  }
  .confirm-sub { font-size:13px; color:#5a2030; font-style:italic; line-height:1.7; }

  /* ═══════════════════════════
     SECRET PANEL
  ═══════════════════════════ */
  .secret-ov {
    position:fixed; inset:0; z-index:200;
    background:rgba(20,4,10,.85);
    backdrop-filter:blur(12px);
    display:flex; align-items:center; justify-content:center;
    opacity:0; pointer-events:none; transition:opacity .4s;
  }
  .secret-ov.open { opacity:1; pointer-events:all; }
  .secret-box {
    background:var(--cream); width:min(460px,90vw);
    padding:46px 36px; text-align:center; position:relative;
    border:1px solid var(--gold);
    outline:1px solid rgba(201,168,76,.3); outline-offset:7px;
    transform:scale(.92); transition:transform .4s;
  }
  .secret-ov.open .secret-box { transform:scale(1); }
  .secret-close {
    position:absolute; top:12px; right:16px;
    background:none; border:none; font-size:18px; color:var(--gold); cursor:pointer;
  }
  .s-num { font-family:'Cinzel',serif; font-size:9px; letter-spacing:5px; color:var(--gold); margin-bottom:18px; }
  .s-quote {
    font-family:'Cormorant Garamond',serif; font-size:22px; font-style:italic;
    color:var(--burgundy); line-height:1.65; margin-bottom:18px;
  }
  .s-orn { color:var(--gold); font-size:16px; letter-spacing:10px; }

  @media (max-width:480px) {
    .modal { padding: 3rem 2.5rem;}
    .form-row { grid-template-columns:1fr; }
    .envelope { height:clamp(160px,30vh,240px); }
    .cd-block { width:44px; height:44px; }
    .vic { padding:12px 16px; }
    .modal-frame::before { inset: -120px -111px; }
    .envelope {height: auto !important;}
    .modal::before{border: none;}
    .modal-desc{font-size: 0.8rem;}
    .wpforms-field-label-inline {font-size: 11px !important;}
    .modal-subtitle{font-size: .7rem;}
    .dot:nth-child(1) { top:4%;  left:3%; }
    .dot:nth-child(2) { top:3%;  left:24%; }
    .dot:nth-child(3) { top:5%;  right:10%; }
    .dot:nth-child(4) { top:35%; left:4%; }
    .dot:nth-child(5) { top:40%; right:4%; }
    .dot:nth-child(6) { top:49%; right:14%; }
    .dot:nth-child(7) { top:26%; right:3%; }
    .dot:nth-child(8) { top:19%; left:2%; }
    .dot:nth-child(9) { bottom:44%; left:4%; }
    .dot:nth-child(10) { bottom:44%; right:47%; }
    .dot:nth-child(11) { top:3%; left:6%; }
  }