/*
Theme Name: Ma Favorite
Theme URI: https://mafavorite.com
Author: Ma Favorite
Author URI: https://mafavorite.com
Description: Thème sur-mesure pour l'agence Ma Favorite (Saint-Barthélemy), converti depuis le prototype HTML/CSS.
Version: 1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mafavorite
*/

html{scroll-behavior:smooth;}
  :root{
    --black:#0c0c0c;
    --black-2:#141412;
    --white:#f7f5ef;
    --text-rgb:247,245,239;
    --bg-rgb:12,12,12;
    --gold:#2e6bff;
    --gold-rgb:46,107,255;
    --gold-soft:#6a9bff;
    --grad:linear-gradient(100deg, #1746c9 0%, #2e6bff 45%, #4f8bff 75%, #6a9bff 100%);
    --line:rgba(var(--text-rgb),0.10);
  }
  html[data-theme="light"]{
    --black:#faf9f6;
    --black-2:#efeeea;
    --white:#14161a;
    --text-rgb:20,22,26;
    --bg-rgb:250,249,246;
    --gold:#1746c9;
    --gold-rgb:23,70,201;
    --gold-soft:#2e6bff;
    --grad:linear-gradient(100deg, #1746c9 0%, #2e56d9 45%, #3f6be0 75%, #5b7fe8 100%);
  }
  body{transition:background .25s ease, color .25s ease;}
  *{box-sizing:border-box;margin:0;padding:0;}
  body{
    background:var(--black);
    color:var(--white);
    font-family:'Manrope',sans-serif;
    -webkit-font-smoothing:antialiased;
  }
  a{color:inherit;text-decoration:none;}
  .wrap{max-width:1180px;margin:0 auto;padding:0 40px;}
  @media(max-width:700px){.wrap{padding:0 22px;}}

  /* header */
  header{
    position:sticky;top:0;z-index:10;
    background:rgba(var(--bg-rgb),0.85);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
  }
  header .wrap{display:flex;align-items:center;justify-content:space-between;height:78px;}
  .logo-mark-wrap{
    width:40px;height:40px;
    perspective:400px;
  }
  .logo-mark-wrap a{
    display:block;width:100%;height:100%;
  }
  .logo-mark-wrap img,
  .logo-mark{
    width:40px;height:40px;
    max-width:40px;max-height:40px;
    display:block;
    object-fit:contain;
    transform-style:preserve-3d;
    will-change:transform;
  }
  .logo-group{display:flex;align-items:center;gap:12px;}
  .logo-col{display:flex;flex-direction:column;line-height:1.15;}
  .logo-tagline{
    font-size:9.5px;letter-spacing:0.14em;text-transform:uppercase;
    color:rgba(var(--text-rgb),0.45);font-weight:600;margin-top:2px;
  }
  .logo{font-size:16px;font-weight:800;letter-spacing:0.05em;}
  .logo span{color:var(--gold);}
  nav{display:flex;align-items:center;gap:38px;}
  nav a.link{font-size:13.5px;color:var(--white);opacity:0.72;transition:opacity .2s;}
  nav a.link:hover{opacity:1;}
  .btn{
    display:inline-block;
    font-size:13px;font-weight:700;
    padding:12px 24px;
    border-radius:100px;
    background:var(--grad);
    color:var(--white);
    letter-spacing:0.01em;
    transition:filter .2s, transform .2s;
  }
  .btn:hover{filter:brightness(1.2);transform:translateY(-1px);}
  .btn-outline{
    background:transparent;border:1px solid rgba(var(--text-rgb),0.35);color:var(--white);
  }
  .btn-outline:hover{background:rgba(var(--text-rgb),0.08);border-color:var(--gold);}
  .theme-toggle{
    width:34px;height:34px;border-radius:50%;
    border:1px solid rgba(var(--text-rgb),0.25);
    background:transparent;color:var(--white);
    font-size:14px;cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    transition:border-color .2s;
  }
  .theme-toggle:hover{border-color:var(--gold);}

  /* hero */
  .hero{padding:0 0 100px;position:relative;overflow:hidden;}
  .hero > .wrap{padding-top:40px;}
  .petal{
    position:absolute;border-radius:50% 50% 50% 4%;
    background:linear-gradient(135deg, rgba(23,70,201,0.34), rgba(46,107,255,0.28), rgba(46,107,255,0.04));
    filter:blur(0.3px);
  }
  .petal.p1{width:340px;height:220px;right:-60px;top:60px;transform:rotate(28deg);}
  .petal.p2{width:260px;height:170px;right:180px;top:-40px;transform:rotate(-18deg);}
  .petal.p3{width:200px;height:130px;right:60px;top:280px;transform:rotate(70deg);}

  .kicker-brand{
    font-size:13px;letter-spacing:0.14em;text-transform:uppercase;
    color:var(--white);font-weight:800;margin-bottom:8px;
  }
  .kicker{
    font-size:11.5px;letter-spacing:0.18em;text-transform:uppercase;
    color:var(--gold);font-weight:700;margin-bottom:26px;
    display:flex;align-items:center;gap:10px;
  }
  .kicker::before{content:'';width:26px;height:1px;background:var(--gold);display:inline-block;}
  .hero h1{
    font-size:clamp(36px,5.2vw,64px);
    font-weight:800;
    line-height:1.1;
    letter-spacing:-0.02em;
    max-width:820px;
    margin-bottom:28px;
  }
  .hero h1 .accent{
    background:var(--grad);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
  }
  .hero p{font-size:17px;line-height:1.6;color:rgba(var(--text-rgb),0.62);max-width:480px;margin-bottom:38px;font-weight:400;}
  .hero-actions{display:flex;gap:16px;align-items:center;flex-wrap:wrap;}
  #mfWaveWrap{ position:relative; z-index:1; width:100%; height:260px; overflow:hidden; pointer-events:none; }
  #mfWave{ position:absolute; left:50%; top:0; display:flex; flex-direction:column; gap:10px; will-change:transform,opacity; }
  .mf-wave-row{ display:flex; gap:10px; }
  .mf-wave-cell{ position:relative; width:30px; height:40px; animation:mfPetalPulse 9s ease-in-out infinite; }
  .mf-wave-shape{
    position:absolute; inset:0;
    border-radius:50% 50% 50% 4px;
  }
  .mf-wave-fade{ position:absolute; inset:0; background:linear-gradient(180deg, transparent 0%, var(--black) 92%); }
  @keyframes mfPetalPulse{
    0%{ transform:scale(0.35) translateY(30px) rotate(-14deg); opacity:0.15; filter:brightness(0.75); }
    50%{ transform:scale(1.15) translateY(-26px) rotate(14deg); opacity:1; filter:brightness(1.25); }
    100%{ transform:scale(0.35) translateY(30px) rotate(-14deg); opacity:0.15; filter:brightness(0.75); }
  }

  /* logos strip */
  .logos{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--black-2);}
  .logo-carousel-wrap{width:100%;overflow:hidden;-webkit-mask-image:linear-gradient(90deg, transparent 0, #000 60px, #000 calc(100% - 60px), transparent 100%);mask-image:linear-gradient(90deg, transparent 0, #000 60px, #000 calc(100% - 60px), transparent 100%);}
  .logo-carousel-track{display:flex;gap:72px;width:max-content;animation:logoScroll 40s linear infinite;}
  .logo-carousel-track span{white-space:nowrap;color:rgba(var(--text-rgb),0.55);font-weight:600;font-size:15px;}
  .logo-tile{display:flex;align-items:center;justify-content:center;height:72px;}
  .logo-tile img{height:72px;width:auto;max-width:200px;object-fit:contain;opacity:0.8;filter:grayscale(100%);}
  @keyframes logoScroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}
  .logos .wrap{
    display:flex;justify-content:space-between;align-items:center;
    padding:28px 40px;flex-wrap:wrap;gap:22px;
  }
  .logos span{
    font-size:12.5px;letter-spacing:0.09em;text-transform:uppercase;
    color:rgba(var(--text-rgb),0.42);font-weight:700;
  }

  /* section shared */
  .section{padding:100px 0;}
  .eyebrow{
    font-size:11.5px;letter-spacing:0.18em;text-transform:uppercase;
    color:var(--gold);font-weight:700;margin-bottom:18px;
  }
  .section-title{font-size:clamp(24px,2.6vw,32px);font-weight:800;max-width:560px;margin-bottom:56px;line-height:1.3;letter-spacing:-0.01em;}

  /* savoir faire */
  .grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-bottom:1px;border-radius:20px;overflow:hidden;}
  .grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:20px;overflow:hidden;}
  @media(max-width:820px){.grid-4{grid-template-columns:1fr 1fr;}}
  @media(max-width:520px){.grid-4{grid-template-columns:1fr;}}
  .card{background:var(--black);padding:36px 30px;transition:background .2s;position:relative;}
  .signature-quote{margin:36px 0 0;padding:30px 34px;border-left:3px solid var(--gold);background:var(--black-2);border-radius:0 16px 16px 0;}
  .signature-quote p{margin:0 0 10px;font-size:18px;font-style:italic;color:var(--text);}
  .signature-name{font-size:14px;color:rgba(var(--text-rgb),0.55);}
  .video-frame{max-width:820px;margin:32px auto 0;border-radius:16px;overflow:hidden;background:#0c0c0c;border:1px solid var(--line);}
  .video-frame-bar{display:flex;gap:6px;padding:12px 16px;background:#161616;}
  .video-frame-bar span{width:10px;height:10px;border-radius:50%;background:#3a3a3a;}
  .video-frame-body{padding:60px 40px;color:rgba(255,255,255,0.7);font-size:15px;line-height:1.6;}
  html[data-theme="light"] .video-frame{background:#14161a;}
  html[data-theme="light"] .petal{background:linear-gradient(135deg, rgba(23,70,201,0.14), rgba(46,107,255,0.12), rgba(46,107,255,0.02));}
  html[data-theme="light"] .histoire .petal{background:linear-gradient(135deg, rgba(23,70,201,0.10), rgba(46,107,255,0.09), rgba(46,107,255,0.01));}
  .video-placeholder{display:flex;align-items:center;justify-content:center;min-height:280px;color:rgba(255,255,255,0.3);}
  .whatsapp-fab{
    position:fixed;right:24px;bottom:24px;z-index:50;
    display:flex;align-items:center;gap:10px;
    background:#FF7A1A;color:#0c0c0c;
    padding:14px 20px 14px 14px;border-radius:999px;
    box-shadow:0 8px 20px rgba(0,0,0,0.35);
    text-decoration:none;font-size:14px;font-weight:700;
    transition:transform .2s;
  }
  .whatsapp-fab:hover{transform:translateY(-2px);}
  .whatsapp-fab svg{flex-shrink:0;}
  @media(max-width:600px){.whatsapp-text{display:none;} .whatsapp-fab{padding:14px;}}
  .back-to-top{
    position:fixed;right:24px;bottom:96px;z-index:50;
    width:46px;height:46px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    background:var(--grad);color:var(--white);border:none;cursor:pointer;
    box-shadow:0 8px 20px rgba(0,0,0,0.35);
    opacity:0;visibility:hidden;transform:translateY(8px);
    transition:opacity .2s, transform .2s, visibility .2s;
  }
  .back-to-top.is-visible{opacity:1;visibility:visible;transform:translateY(0);}
  .back-to-top:hover{filter:brightness(1.15);transform:translateY(-2px);}
  @media(max-width:600px){.back-to-top{right:18px;bottom:86px;width:42px;height:42px;}}
  .card.tint{background:var(--black-2);}
  .card .num{font-size:11px;color:var(--gold);letter-spacing:0.08em;margin-bottom:22px;display:block;font-weight:700;}
  .card h3{font-size:19px;font-weight:800;margin-bottom:10px;letter-spacing:-0.01em;}
  .card p{font-size:14px;line-height:1.55;color:rgba(var(--text-rgb),0.55);}
  @media(max-width:820px){.grid-3{grid-template-columns:1fr;}}

  /* histoire */
  .histoire{background:var(--black-2);position:relative;overflow:hidden;padding:70px 0 90px;}
  .histoire .petal{background:linear-gradient(135deg, rgba(23,70,201,0.30), rgba(46,107,255,0.24), rgba(46,107,255,0.03));}
  .histoire .petal.h1{width:300px;height:190px;left:-80px;bottom:-40px;transform:rotate(-24deg);}
  .histoire .wrap{display:grid;grid-template-columns:0.8fr 1.3fr;gap:60px;align-items:center;position:relative;}
  .histoire h2{font-size:clamp(26px,3vw,36px);font-weight:800;line-height:1.3;letter-spacing:-0.01em;}
  .histoire p{font-size:15.5px;line-height:1.75;color:rgba(var(--text-rgb),0.6);margin-top:20px;}
  .histoire .mark{
    font-size:90px;font-weight:800;line-height:1;opacity:0.9;
    background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;
  }
  @media(max-width:820px){.histoire .wrap{grid-template-columns:1fr;gap:20px;}}

  /* realisations */
  .grid-real{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;}
  .real-thumb{
    aspect-ratio:4/3;background:var(--black-2);
    border-radius:10px;margin-bottom:16px;position:relative;overflow:hidden;
    border:1px solid var(--line);
  }
  .real-thumb .browser-bar{
    height:22px;display:flex;align-items:center;gap:5px;padding:0 10px;
    border-bottom:1px solid var(--line);
  }
  .real-thumb .dot{width:6px;height:6px;border-radius:50%;background:rgba(var(--text-rgb),0.18);}
  .real-thumb .placeholder-label{
    position:absolute;inset:22px 0 0 0;display:flex;align-items:center;justify-content:center;
    font-size:10.5px;color:rgba(var(--text-rgb),0.28);letter-spacing:0.06em;text-transform:uppercase;
  }
  .real-thumb-img{
    position:absolute;inset:22px 0 0 0;width:100%;height:calc(100% - 22px);
    max-width:100%;object-fit:cover;display:block;
  }
  .real-card h4{font-size:16px;font-weight:700;margin-bottom:4px;}
  .real-card span{font-size:12.5px;color:rgba(var(--text-rgb),0.45);}
  @media(max-width:820px){.grid-real{grid-template-columns:1fr 1fr;}}
  @media(max-width:520px){.grid-real{grid-template-columns:1fr;}}

  /* cta */
  .cta{background:linear-gradient(180deg, var(--black), var(--black-2));text-align:center;padding:120px 0;position:relative;overflow:hidden;}
  .cta .petal{background:linear-gradient(135deg, rgba(23,70,201,0.16), rgba(46,107,255,0.14), rgba(46,107,255,0.02));}
  .cta .petal.c1{width:380px;height:240px;left:-100px;top:-60px;transform:rotate(18deg);}
  .cta .petal.c2{width:280px;height:180px;right:-80px;bottom:-40px;transform:rotate(-30deg);}
  .cta h2{font-size:clamp(28px,3.6vw,42px);font-weight:800;margin-bottom:16px;max-width:640px;margin-left:auto;margin-right:auto;line-height:1.25;letter-spacing:-0.01em;position:relative;}
  .cta p{font-size:15.5px;color:rgba(var(--text-rgb),0.55);margin-bottom:38px;position:relative;}
  .cta .btn{position:relative;}

  footer{padding:32px 0;border-top:1px solid var(--line);}
  footer .wrap{display:flex;flex-direction:column;gap:18px;font-size:12px;color:rgba(var(--text-rgb),0.4);}
  footer .footer-top{display:flex;justify-content:space-between;}
  footer .footer-bottom{
    display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;
    padding-top:18px;border-top:1px solid var(--line);
  }
  footer .footer-links{display:flex;gap:22px;flex-wrap:wrap;}
  footer .footer-links a:hover{color:var(--white);}
  .code-tag{font-family:'Courier New',monospace;letter-spacing:0.02em;}

  .contact-hero{padding:150px 0 60px;position:relative;overflow:hidden;}
  .contact-grid{display:grid;grid-template-columns:0.8fr 1.2fr;gap:60px;align-items:start;}
  @media(max-width:820px){.contact-grid{grid-template-columns:1fr;}}
  .contact-info h3{font-size:22px;font-weight:800;margin-bottom:18px;}
  .contact-info p{color:rgba(var(--text-rgb),0.62);line-height:1.7;margin-bottom:28px;}
  .contact-list{display:flex;flex-direction:column;gap:20px;margin-bottom:36px;}
  .contact-item{display:flex;gap:14px;align-items:flex-start;}
  .contact-item .ico{width:38px;height:38px;border-radius:10px;background:rgba(var(--gold-rgb),0.12);color:var(--gold);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:19px;line-height:1;}
  .contact-item .label{font-size:11px;text-transform:uppercase;letter-spacing:0.08em;color:rgba(var(--text-rgb),0.45);font-weight:700;margin-bottom:2px;}
  .contact-item .value{font-size:15.5px;font-weight:600;}
  .contact-item .value a{color:inherit;text-decoration:none;}
  .contact-item .value a:hover{color:var(--gold);}
  .contact-form{background:var(--black-2);border:1px solid var(--line);border-radius:24px;padding:44px;}
  @media(max-width:600px){.contact-form{padding:28px;}}
  .form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
  @media(max-width:600px){.form-row{grid-template-columns:1fr;}}
  .field{margin-bottom:20px;}
  .field label{display:block;font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:0.06em;color:rgba(var(--text-rgb),0.55);margin-bottom:8px;}
  .field input,.field select,.field textarea{
    width:100%;background:var(--black);border:1px solid rgba(var(--text-rgb),0.16);border-radius:12px;
    padding:13px 16px;color:var(--white);font-family:inherit;font-size:15px;transition:border-color .2s;
  }
  html[data-theme="light"] .field input,html[data-theme="light"] .field select,html[data-theme="light"] .field textarea{background:#fff;}
  .field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--gold);}
  .field textarea{resize:vertical;min-height:130px;}
  .field-check{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:rgba(var(--text-rgb),0.6);margin-bottom:26px;line-height:1.5;}
  .field-check input{width:16px;height:16px;margin-top:2px;flex-shrink:0;}
  .form-submit{width:100%;justify-content:center;border:none;cursor:pointer;font-family:inherit;}
  .form-note{font-size:12px;color:rgba(var(--text-rgb),0.4);margin-top:14px;text-align:center;}
  .form-note a{color:var(--gold);text-decoration:underline;}
  .form-note a:hover{color:var(--gold-soft);}
  .form-success{display:none;text-align:center;padding:40px 10px;}
  .form-success .ico-big{font-size:40px;margin-bottom:14px;}
  .form-success h3{font-size:20px;font-weight:800;margin-bottom:10px;}
  .form-success p{color:rgba(var(--text-rgb),0.6);}
  .recaptcha-box{
    background:#f9f9f9;border:1px solid #d3d3d3;border-radius:4px;
    width:100%;max-width:304px;padding:14px 16px;display:flex;align-items:center;justify-content:space-between;
    gap:14px;box-shadow:0 0 2px rgba(0,0,0,0.15);
  }
  .recaptcha-check{display:flex;align-items:center;gap:12px;cursor:pointer;user-select:none;}
  .recaptcha-check input{position:absolute;opacity:0;width:24px;height:24px;cursor:pointer;margin:0;}
  .recaptcha-checkmark{
    width:24px;height:24px;border:2px solid #c1c1c1;border-radius:3px;background:#fff;flex-shrink:0;
    display:flex;align-items:center;justify-content:center;transition:background .15s,border-color .15s;
  }
  .recaptcha-check input:checked + .recaptcha-checkmark{background:#4285f4;border-color:#4285f4;}
  .recaptcha-check input:checked + .recaptcha-checkmark::after{
    content:'';width:6px;height:11px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(40deg) translate(-1px,-1px);
  }
  .recaptcha-label{font-size:14px;color:#3c4043;font-family:Roboto,Arial,sans-serif;}
  .recaptcha-badge{text-align:center;flex-shrink:0;}
  .recaptcha-badge svg{display:block;margin:0 auto 2px;}
  .recaptcha-badge small{font-size:8px;color:#9aa0a6;font-family:Roboto,Arial,sans-serif;line-height:1.3;display:block;}
  .recaptcha-note{font-size:11px;color:rgba(var(--text-rgb),0.4);margin-top:8px;}