/* =====================================================================
   PANNEAU DE RÉGLAGES — modifie ici, tout le site suit
   ===================================================================== */
:root{
  /* --- TAILLES --- */
  --taille-texte:18px;                          /* paragraphes */
  --taille-kheira:clamp(76px,9vw,132px);        /* "Kheira" sur l'accueil (ordinateur) */
  --taille-kheira-mobile:clamp(68px,21vw,96px); /* "Kheira" sur l'accueil (mobile) */
  --taille-titre:clamp(56px,7vw,96px);          /* titres des sections (ordinateur) */
  --taille-titre-mobile:clamp(50px,15vw,68px);  /* titres des sections (mobile) */
  --taille-petit-titre:12px;                    /* À PROPOS, SÉLECTION, GET IN TOUCH… */
  /* --- COULEURS --- */
  --espresso:#3b2a20;
  --brown:#6b5244;
  --cocoa:#432f26;      /* fond des pois */
  --taupe:#9a8676;
  --beige:#e8dccd;
  --cream:#f7efe4;
  --ink:#3b2a20;
  --muted:#8a7666;
  --gold:#b08a68;       /* petits titres */
  /* Textes en Futura Book : "futura-pt" via ton kit Adobe Fonts, sinon Futura du Mac/iPhone, sinon Jost */
  --sans:"futura-pt", Futura, "Futura PT", "Jost", "Century Gothic", sans-serif;
  /* Titres : Sloop Script via ton kit Adobe Fonts. Great Vibes s'affiche tant que le kit n'est pas branché */
  --script:"sloop-script-one", "Sloop Script One", "Sloop Script", "Great Vibes", cursive;
  --radius:22px;
  --gutter:clamp(16px,4vw,48px);
}

/* ========= POLICES (hébergées dans assets/fonts) ========= */
@font-face{font-family:"Great Vibes";src:url("assets/fonts/great-vibes-latin-400-normal.woff2") format("woff2");font-weight:400;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Great Vibes";src:url("assets/fonts/great-vibes-latin-ext-400-normal.woff2") format("woff2");font-weight:400;font-display:swap;unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Jost";src:url("assets/fonts/jost-latin-300-normal.woff2") format("woff2");font-weight:300;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Jost";src:url("assets/fonts/jost-latin-400-normal.woff2") format("woff2");font-weight:400;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Jost";src:url("assets/fonts/jost-latin-500-normal.woff2") format("woff2");font-weight:500;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Jost";src:url("assets/fonts/jost-latin-600-normal.woff2") format("woff2");font-weight:600;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Jost";src:url("assets/fonts/jost-latin-ext-300-normal.woff2") format("woff2");font-weight:300;font-display:swap;unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Jost";src:url("assets/fonts/jost-latin-ext-400-normal.woff2") format("woff2");font-weight:400;font-display:swap;unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Jost";src:url("assets/fonts/jost-latin-ext-500-normal.woff2") format("woff2");font-weight:500;font-display:swap;unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Jost";src:url("assets/fonts/jost-latin-ext-600-normal.woff2") format("woff2");font-weight:600;font-display:swap;unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:90px}
body{background:var(--espresso);color:var(--ink);font-family:var(--sans);font-weight:400;font-size:var(--taille-texte);line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video{display:block;width:100%;height:100%;object-fit:cover}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
ul{list-style:none}
svg{width:18px;height:18px}
.wrap{max-width:1180px;margin:0 auto}

/* ========= FONDS (tes images dans assets/images/bg) ========= */
.bg{position:relative;background-color:var(--brown);background-size:cover;background-position:center;padding:clamp(80px,10vw,130px) var(--gutter)}
/* fonds utilisés */
.bg--beige{background:var(--beige)}
.bg--cream{background:linear-gradient(180deg,#fbf6ef 0%,var(--cream) 100%)}
.bg--taupe{background:var(--taupe)}
.bg--espresso{background:var(--espresso)}
/* fonds en réserve (tes images) : remplace la classe d'une section pour les essayer */
.bg--gradient{background-image:url("assets/images/bg/gradient.jpg")}
.bg--satin{background-image:url("assets/images/bg/satin.jpg")}
.bg--cow{background-image:url("assets/images/bg/cow-heart.jpg");background-color:var(--cream)}
.bg--tortoise{background-image:url("assets/images/bg/tortoise.jpg");background-color:#2a1a10}
.bg--spots{background-image:linear-gradient(rgba(59,42,32,.28),rgba(59,42,32,.28)),url("assets/images/bg/fawn-spots.jpg");background-size:cover}
.bg--fawn{background-image:url("assets/images/bg/fawn.jpg");background-position:center bottom}
.bg--zebra{background-image:url("assets/images/bg/zebra.jpg")}
.bg--dots{background-color:var(--cocoa);
  background-image:radial-gradient(circle,#fdf9f0 2.6px,transparent 3.1px),radial-gradient(circle,#fdf9f0 2.6px,transparent 3.1px);
  background-size:77px 77px;background-position:0 0,38.5px 38.5px}

/* ========= CARTES & TYPO ========= */
.card{border-radius:var(--radius);overflow:hidden}
.card--cream{background:linear-gradient(160deg,#fbf6ef 0%,var(--cream) 55%,#efe2d1 100%);box-shadow:0 20px 60px rgba(30,18,10,.28)}
.card--glass{background:rgba(251,246,239,.9);backdrop-filter:blur(6px)}
.eyebrow{font-size:var(--taille-petit-titre);font-weight:400;letter-spacing:.32em;text-transform:uppercase;color:var(--gold)}
.eyebrow--light{color:var(--beige)}
.portfolio .eyebrow{color:var(--espresso)}
.title{font-family:var(--script);font-weight:400;font-size:var(--taille-titre);line-height:1.08;color:var(--ink);padding-right:.1em}
.title--light{color:var(--cream)}
.title--center{text-align:center}
.head{text-align:center;margin-bottom:28px}

/* ========= NAV (pilule flottante) ========= */
.nav{position:fixed;top:12px;left:12px;right:12px;z-index:50;max-width:1180px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:10px 14px 10px 22px;border-radius:18px;background:rgba(251,246,239,.92);backdrop-filter:blur(12px);box-shadow:0 10px 30px rgba(30,18,10,.18);color:var(--ink)}
.nav__logo{font-family:var(--script);font-size:34px;line-height:1.1}
.nav__links{display:flex;gap:30px;font-size:11px;font-weight:400;letter-spacing:.26em;text-transform:uppercase;padding-right:10px}
.nav__links a{position:relative;padding:6px 0}
.nav__links a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1px;background:currentColor;transition:width .3s}
.nav__links a:hover::after{width:100%}
.nav__burger{display:none;width:42px;height:42px;position:relative}
.nav__burger span{position:absolute;left:10px;right:10px;height:2px;border-radius:2px;background:var(--ink);transition:transform .3s,opacity .3s,top .3s}
.nav__burger span:nth-child(1){top:13px}.nav__burger span:nth-child(2){top:20px}.nav__burger span:nth-child(3){top:27px}
.nav.is-open .nav__burger span:nth-child(1){top:20px;transform:rotate(45deg)}
.nav.is-open .nav__burger span:nth-child(2){opacity:0}
.nav.is-open .nav__burger span:nth-child(3){top:20px;transform:rotate(-45deg)}

/* ========= ACCUEIL ========= */
.hero{min-height:100svh;display:flex;align-items:stretch;padding:84px 12px 12px}
.hero__card{position:relative;flex:1;max-width:1180px;margin:0 auto;border-radius:var(--radius);overflow:hidden;display:flex;align-items:flex-end;justify-content:center;min-height:560px;box-shadow:0 20px 60px rgba(30,18,10,.3)}
.hero__img{position:absolute;inset:0;object-position:50% 66%}
.hero__card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(59,42,32,0) 35%,rgba(59,42,32,.35) 60%,rgba(59,42,32,.82) 100%)}
.hero__content{position:relative;z-index:1;text-align:center;color:var(--cream);padding:0 20px clamp(26px,4vw,48px);width:100%}
.hero__name{font-family:var(--script);font-weight:400;font-size:var(--taille-kheira);line-height:1;padding:0 .1em}
.hero__sub{font-size:clamp(18px,2.4vw,28px);font-weight:400;letter-spacing:.24em;text-transform:uppercase;margin-top:-.2em}
.hero__lead{max-width:600px;margin:14px auto 26px;font-size:var(--taille-texte);opacity:.92}
.pills{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.pill{display:inline-flex;align-items:center;justify-content:flex-start;gap:14px;padding:7px 24px 7px 7px;border:1px solid rgba(247,239,228,.6);border-radius:999px;font-size:16px;font-weight:400;letter-spacing:.02em;transition:background .3s,color .3s}
.pill:hover{background:var(--cream);color:var(--ink)}
.pill__icon{flex:0 0 auto;width:42px;height:42px;border-radius:50%;background:var(--cream);color:var(--ink);display:grid;place-items:center}
.pill__icon svg{width:21px;height:21px}
.hero__scroll{display:none}

/* ========= À PROPOS ========= */
.about__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:24px;align-items:stretch}
.about__img{min-height:420px;border:1px solid rgba(247,239,228,.3);box-shadow:0 20px 60px rgba(30,18,10,.28)}
.about__card{padding:clamp(28px,4vw,56px)}
.about__card .title{margin:2px 0 18px -.05em}
.bullets li{position:relative;padding-left:22px;margin-bottom:16px;color:#4f3f34;font-size:var(--taille-texte)}
.bullets li::before{content:"";position:absolute;left:2px;top:.75em;width:6px;height:6px;border-radius:50%;background:var(--brown)}
.signature{font-family:var(--script);font-size:56px;line-height:1;margin-top:10px;color:var(--brown)}

/* ========= MARQUES ========= */
.brands__card{text-align:center;max-width:980px;margin:0 auto}
.brands__card .title{margin:4px 0 32px}
.brandlist{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.brandlist li{display:flex;align-items:center;justify-content:center;min-height:52px;padding:12px 24px;border-radius:999px;background:var(--beige);color:var(--ink);border:1px solid rgba(107,82,68,.25);box-shadow:0 3px 0 rgba(107,82,68,.12);font-size:16px;font-weight:400;text-align:center;line-height:1.4}

/* ========= PORTFOLIO ========= */
.tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-bottom:34px}
.tab{padding:9px 20px;border-radius:999px;background:transparent;border:1px solid var(--espresso);color:var(--espresso);font-size:11px;font-weight:400;letter-spacing:.24em;text-transform:uppercase;transition:all .25s}
.tab:hover{background:rgba(59,42,32,.08)}
.tab.is-active{background:var(--espresso);color:var(--cream);border-color:var(--espresso)}
.carousel{display:flex;justify-content:safe center;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:4px 2px 10px;scrollbar-width:none}
.carousel::-webkit-scrollbar{display:none}
.vcard{flex:0 0 calc((100% - 54px)/4);scroll-snap-align:start;text-align:center;color:var(--espresso)}
.vcard.is-hidden{display:none}
.vcard__media{position:relative;aspect-ratio:9/16;border-radius:18px;overflow:hidden;background:#2a1a10;cursor:pointer;margin-bottom:14px;box-shadow:0 14px 40px rgba(0,0,0,.35)}
.play{position:absolute;left:50%;bottom:18px;width:46px;height:46px;margin-left:-23px;border-radius:50%;background:rgba(59,42,32,.75);backdrop-filter:blur(4px);transition:opacity .3s}
.play::after{content:"";position:absolute;left:18px;top:14px;border-left:13px solid var(--cream);border-top:9px solid transparent;border-bottom:9px solid transparent}
.vcard.is-playing .play{opacity:0}
.vcard h3{font-weight:400;font-size:13px;letter-spacing:.16em;text-transform:uppercase;line-height:1.4}
.vcard p{font-size:10.5px;font-weight:400;letter-spacing:.24em;text-transform:uppercase;color:var(--espresso);opacity:.7;margin-top:4px}
.carousel__nav{display:flex;justify-content:center;gap:14px;margin-top:22px}
.round{width:44px;height:44px;border-radius:50%;display:inline-grid;place-items:center;flex:0 0 auto;background:var(--espresso);color:var(--cream);transition:transform .25s,opacity .25s}
.round:hover{transform:scale(1.06)}
.round[disabled]{opacity:.35;pointer-events:none}
.round--dark{background:var(--espresso);color:var(--cream)}
.chev{width:10px;height:10px;border-top:1.6px solid currentColor;border-right:1.6px solid currentColor}
.chev--l{transform:translateX(2px) rotate(-135deg)}
.chev--r{transform:translateX(-2px) rotate(45deg)}

/* ========= PHOTOGRAPHIE & PHOTOS UGC ========= */
.photos .title{margin-bottom:36px}
.pgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.pgrid figure{aspect-ratio:4/5;border-radius:18px;overflow:hidden;box-shadow:0 14px 40px rgba(0,0,0,.3)}
.pgrid img{transition:transform .8s ease}
.pgrid figure:hover img{transform:scale(1.04)}
.photos--ugc .pgrid{grid-template-columns:repeat(4,minmax(0,1fr))}
.photos--grid9 .pgrid{max-width:760px;margin:0 auto;gap:12px}
.photos--grid9 .pgrid figure{border-radius:14px}

/* ========= CONTACT ========= */
.contact{padding-top:clamp(90px,12vw,150px);padding-bottom:clamp(90px,12vw,150px)}
.contact__card{max-width:720px;margin:0 auto;padding:clamp(26px,4vw,48px) clamp(20px,5vw,60px) clamp(34px,5vw,56px);text-align:center}
.contact__img{width:min(300px,72%);aspect-ratio:4/5;margin:0 auto 26px;border-radius:18px;overflow:hidden;box-shadow:0 14px 40px rgba(30,18,10,.25)}
.contact__card .title{font-size:clamp(42px,5.4vw,66px);margin:6px 0 26px}
.contact__links{display:grid;justify-content:center;gap:14px}
.contact__links a{display:inline-flex;align-items:center;gap:14px;font-size:18px;font-weight:400;letter-spacing:.04em;overflow-wrap:anywhere;text-align:left}
.contact__links a:hover{opacity:.75}

/* ========= PIED DE PAGE ========= */
.footer{padding:34px var(--gutter);display:flex;justify-content:center}
.footer__pill{padding:10px 22px;border-radius:999px;background:rgba(251,246,239,.92);font-size:11px;font-weight:400;letter-spacing:.24em;text-transform:uppercase;text-align:center}

/* ========= APPARITION AU SCROLL ========= */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .9s ease,transform .9s ease}
.reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}html,.carousel{scroll-behavior:auto}}

/* ========= TABLETTE ========= */
@media (max-width:1000px){
  .vcard{flex-basis:calc((100% - 36px)/3)}
  .photos--ugc .pgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ========= MOBILE ========= */
@media (max-width:760px){
  html{scroll-padding-top:80px}
  .nav{top:8px;left:8px;right:8px;padding:6px 6px 6px 18px}
  .nav__logo{font-size:30px}
  .nav__burger{display:block}
  .nav__links{position:absolute;top:calc(100% + 8px);left:0;right:0;flex-direction:column;gap:0;padding:8px 0;border-radius:18px;background:#fbf6ef;box-shadow:0 14px 40px rgba(30,18,10,.25);font-size:12px;opacity:0;transform:translateY(-8px);pointer-events:none;transition:opacity .3s,transform .3s}
  .nav__links a{padding:14px 22px}
  .nav__links a::after{display:none}
  .nav.is-open .nav__links{opacity:1;transform:none;pointer-events:auto}
  .hero{padding:72px 8px 8px}
  .hero__card{min-height:calc(100svh - 80px)}
  .hero__name{font-size:var(--taille-kheira-mobile)}
  .hero__sub{font-size:19px}
  .hero__lead{font-size:var(--taille-texte);margin:10px auto 20px}
  .pills{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .pills .pill:first-child{grid-column:1 / -1}
  .hero__lead{display:none}
  .pill{justify-content:flex-start;font-size:16px}
  .bg{padding:72px 16px}
  .about__grid{grid-template-columns:1fr}
  .about__img{min-height:0;aspect-ratio:4/5}
  .bullets li{font-size:var(--taille-texte)}
  .title{font-size:var(--taille-titre-mobile)}
  .vcard{flex-basis:calc((100% - 18px)/2)}
  .carousel{gap:12px}
  .vcard{flex-basis:calc((100% - 12px)/2)}
  .brandlist{gap:10px}
  .brandlist li{font-size:15px;padding:11px 20px}
  .vcard h3{font-size:11px}.vcard p{font-size:9.5px}
  .play{width:40px;height:40px;margin-left:-20px;bottom:12px}
  .play::after{left:15px;top:12px;border-left-width:12px;border-top-width:8px;border-bottom-width:8px}
  .pgrid,.photos--ugc .pgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .pgrid figure{border-radius:14px}
  .contact__card .title{font-size:clamp(38px,11vw,52px)}
  .contact__links a{font-size:18px}
  .photos--grid9 .pgrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .photos--grid9 .pgrid figure{border-radius:10px}
}