/* =========================================================
   Artiz'Anna — système responsive à 3 paliers
   Chargé APRÈS styles-v2.css / styles2.css / styles inline.

   Paliers :
     • Téléphone  : jusqu'à 767px
     • Tablette   : 768px  →  1099px
     • Ordinateur : 1100px et plus

   Avant : un seul point de rupture à 900px, donc la tablette
   recevait la mise en page téléphone (ou celle de l'ordi en
   paysage). Ce fichier crée un vrai palier tablette et affine
   le palier téléphone.
   ========================================================= */


/* =========================================================
   1. ORDINATEUR — 1100px et plus
   ========================================================= */
@media (min-width: 1100px) {

  /* Pas de barre de réservation flottante : le bouton du menu suffit */
  .mcta, .mobile-cta { display: none !important; }
  body { padding-bottom: 0; }

  /* Confort de lecture sur très grands écrans */
  header nav { gap: 30px; }
}

@media (min-width: 1500px) {
  .wrap { max-width: 1320px; }
  .gal  { grid-template-columns: repeat(4, 1fr); }
}


/* =========================================================
   2. TABLETTE — 768px → 1099px
   Objectif : 2 colonnes partout, jamais la mise en page
   téléphone empilée, et un bouton de réservation flottant
   discret plutôt qu'une grosse barre pleine largeur.
   ========================================================= */
@media (min-width: 768px) and (max-width: 1099px) {

  :root { --pad: clamp(28px, 4.5vw, 52px); }

  .section { padding: 84px 0; }
  section  { padding: 76px 0; }

  /* --- Hero --- */
  .hero            { min-height: 92svh; }
  .hero.compact    { min-height: 68svh; }
  .hero .inner     { padding-top: 124px; padding-bottom: 64px; }
  .hero h1         { font-size: clamp(2.6rem, 5.4vw, 3.6rem); max-width: 20ch; }
  .hero p          { font-size: 1.06rem; max-width: 52ch; }

  /* --- Barre de navigation --- */
  /* En dessous de 900px le menu hamburger reste (5 entrées ne
     tiennent pas). Entre 900 et 1099 on garde le menu déployé
     mais resserré pour éviter le débordement. */
  header nav        { gap: 18px; }
  header nav a      { font-size: .84rem; }
  header .btn       { padding: 10px 18px; font-size: .86rem; }
  header .logo img  { height: 42px; }

  /* --- Grilles : 2 colonnes (système v2) --- */
  .addr-grid  { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .addr       { min-height: clamp(320px, 40vw, 420px); }
  .addr.premium { grid-column: 1 / -1; min-height: clamp(280px, 32vw, 360px); }

  .uni-grid   { grid-template-columns: repeat(2, 1fr); gap: 32px; }
  .uni        { grid-template-columns: 128px 1fr; gap: 18px; }
  .uni .ph    { width: 128px; height: 162px; }

  .mini-grid  { grid-template-columns: repeat(2, 1fr); }

  .steps      { grid-template-columns: repeat(2, 1fr); }

  .gal        { grid-template-columns: repeat(3, 1fr); }

  .stats .wrap { grid-template-columns: repeat(4, 1fr); gap: 24px; }

  .quotes            { grid-template-columns: repeat(2, 1fr); }
  .quotes .quote:last-child:nth-child(odd) { grid-column: 1 / -1; }

  /* Éditorial image + texte : on retrouve 2 colonnes */
  .split      { grid-template-columns: 1fr 1fr; gap: 36px; }
  .split .ph  { aspect-ratio: 3 / 4; }
  .duo        { grid-template-columns: 1fr; gap: 26px; }

  .spread     { min-height: clamp(420px, 52vw, 520px); }
  .spread .col{ max-width: 46ch; }

  /* --- Grilles : 2 colonnes (système styles2 : Anna Marini,
         privatisation, réserver) --- */
  .grid, .sgrid, .agrid, .cgrid { grid-template-columns: repeat(2, 1fr); }
  .feature   { grid-template-columns: 1fr 1fr; gap: 32px; }
  .feature .visual { min-height: 300px; }
  .am .wrap  { grid-template-columns: 1fr 1fr; gap: 34px; }
  .pgal      { grid-template-columns: repeat(3, 1fr); gap: 12px; }
  .team-grid { grid-template-columns: repeat(3, 1fr); gap: 14px; }

  /* --- Réservation : pastille flottante, pas de barre --- */
  body { padding-bottom: 0; }

  .mcta, .mobile-cta {
    display: block;
    position: fixed;
    left: auto;
    right: 24px;
    bottom: 24px;
    width: auto;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
    backdrop-filter: none;
    text-align: left;
    z-index: 60;
  }
  .mcta a, .mobile-cta a {
    display: inline-flex;
    align-items: center;
    width: auto;
    padding: 14px 26px;
    border-radius: 40px;
    background: var(--gold, #C6A053);
    color: #2a2114;
    font-weight: 600;
    font-size: .95rem;
    box-shadow: 0 14px 34px rgba(46, 42, 38, .28);
    transition: transform .3s ease, box-shadow .3s ease;
  }
  .mcta a:hover, .mobile-cta a:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 42px rgba(46, 42, 38, .34);
  }

  /* --- Pied de page --- */
  footer .cols { gap: 34px; }
}


/* =========================================================
   3. TÉLÉPHONE — jusqu'à 767px
   Objectif : une seule colonne, tout au pouce, et la
   réservation toujours accessible en bas d'écran.
   ========================================================= */
@media (max-width: 767px) {

  :root { --pad: 20px; }

  .section { padding: 56px 0; }
  section  { padding: 52px 0; }

  /* --- Hero : plus court, titre lisible, boutons pleine largeur --- */
  .hero          { min-height: 86svh; }
  .hero.compact  { min-height: 62svh; }
  .hero .inner   { padding-top: 104px; padding-bottom: 40px; }
  .hero h1       { font-size: clamp(2rem, 8.6vw, 2.75rem); max-width: none; margin: .3em 0 .35em; }
  .hero p        { font-size: 1rem; max-width: none; }
  .hero .cta     { flex-direction: column; align-items: stretch; gap: 10px; margin-top: 24px; }
  .hero .cta .btn{ width: 100%; justify-content: center; }
  .scrollcue     { display: none; }

  /* --- Barre de navigation --- */
  header            { padding: 14px 0; }
  header .logo img  { height: 38px; }
  header.solid .logo img { height: 34px; }
  header nav.open   { left: var(--pad); right: var(--pad); }
  header nav.open a { padding: 4px 0; font-size: 1rem; }

  /* --- Typographie --- */
  h1, h2, h3   { letter-spacing: -.01em; }
  .shead h2    { font-size: clamp(1.7rem, 7.2vw, 2.2rem); }
  .lead        { font-size: 1rem; }
  .eyebrow     { font-size: .66rem; letter-spacing: .26em; }
  .btn         { padding: 13px 22px; font-size: .9rem; }

  /* --- Bandeau défilant --- */
  .marquee .track { font-size: .92rem; animation-duration: 26s; }

  /* --- Cartes adresses --- */
  .addr-grid   { grid-template-columns: 1fr; gap: 14px; }
  .addr        { min-height: clamp(300px, 76vw, 400px); }
  .addr.premium{ min-height: clamp(280px, 66vw, 340px); }
  .addr h3     { font-size: 1.6rem; }
  .addr p      { font-size: .9rem; max-width: none; }
  .addr .row   { flex-wrap: wrap; gap: 8px 14px; font-size: .8rem; }
  .addr .go    { margin-left: 0; }

  /* --- Univers / prestations : vignette plus petite --- */
  .uni-grid { grid-template-columns: 1fr; gap: 26px; }
  .uni      { grid-template-columns: 104px 1fr; gap: 16px; align-items: start; }
  .uni .ph  { width: 104px; height: 132px; }
  .uni h3   { font-size: 1.2rem; }
  .uni p    { font-size: .88rem; }

  /* --- Éditorial --- */
  .split, .duo { grid-template-columns: 1fr; gap: 22px; }
  .split .ph   { aspect-ratio: 4 / 5; }
  .spread      { min-height: clamp(360px, 86vw, 460px); }
  /* Voile renforcé : le texte blanc reste lisible sur petit écran */
  .spread::after { background: linear-gradient(180deg, rgba(26,20,14,.52), rgba(26,20,14,.74)); }
  .spread .col   { max-width: none; }

  /* --- Fiches d'info : libellé au-dessus de la valeur --- */
  .info li   { flex-direction: column; gap: 2px; padding: 11px 0; }
  .info li b { min-width: 0; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-deep, #A9873F); }

  /* --- Galeries --- */
  .gal        { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .pgal       { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .team-grid  { grid-template-columns: repeat(2, 1fr); gap: 8px; }

  /* --- Chiffres clés --- */
  .stats .wrap { grid-template-columns: repeat(2, 1fr); gap: 26px 14px; }
  .stats       { gap: 24px; }

  /* --- Étapes --- */
  .steps      { grid-template-columns: 1fr 1fr; gap: 18px; }
  .steps .n   { width: 46px; height: 46px; font-size: 1.25rem; margin-bottom: 12px; }
  .steps h3   { font-size: 1.05rem; }

  /* --- Avis --- */
  .quotes     { grid-template-columns: 1fr; gap: 14px; }
  .quote      { padding: 20px 18px; }
  .quote p    { font-size: 1rem; }
  .avis .links a { font-size: .8rem; padding: 8px 13px; }

  /* --- Cartes de maillage --- */
  .mini-grid  { grid-template-columns: 1fr; gap: 12px; }
  .mini       { padding: 22px 20px; }

  /* --- Système styles2 (Anna Marini, privatisation, réserver) --- */
  .grid, .sgrid, .agrid, .cgrid { grid-template-columns: 1fr; }
  .feature   { grid-template-columns: 1fr; gap: 24px; }
  .feature .visual { min-height: 220px; }
  .am .wrap  { grid-template-columns: 1fr; gap: 26px; }

  /* --- FAQ --- */
  .faq details { padding: 18px 0; }
  .faq summary { font-size: 1.02rem; gap: 14px; }

  /* --- CTA final --- */
  .final .adr { flex-direction: column; gap: 14px; margin-top: 28px; }

  /* --- Pied de page --- */
  footer          { padding: 44px 0 24px; }
  footer .top     { flex-direction: column; gap: 26px; }
  footer .cols    { gap: 26px 40px; }
  footer .fine    { margin-top: 26px; font-size: .74rem; }

  /* --- Réservation : barre fixe pleine largeur, encoche iPhone gérée --- */
  .mcta, .mobile-cta {
    display: block;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 60;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  }
  .mcta a, .mobile-cta a {
    display: block;
    width: 100%;
    text-align: center;
    padding: 15px;
    font-weight: 600;
    font-size: 1rem;
  }
  body { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
}


/* Très petits téléphones (iPhone SE, etc.) */
@media (max-width: 380px) {
  .steps      { grid-template-columns: 1fr; }
  .stats .wrap{ grid-template-columns: 1fr; gap: 22px; }
  .uni        { grid-template-columns: 1fr; }
  .uni .ph    { width: 100%; height: 200px; }
  .hero h1    { font-size: 1.95rem; }
}


/* Tablette en paysage basse (iPad classique 1024x768) :
   on garde 2 colonnes plutôt que de basculer en mise en page ordi */
@media (min-width: 1000px) and (max-width: 1099px) and (orientation: landscape) {
  .gal { grid-template-columns: repeat(3, 1fr); }
}


/* =========================================================
   4. CORRECTIFS ORDINATEUR — blocs trop aérés sur grand écran
      (repérés sur la page Anna Marini, mais écrits pour
      s'appliquer partout où ces blocs existent)

   Note de spécificité : ces pages définissent leurs propres
   règles dans un <style> placé APRÈS ce fichier. On préfixe
   donc chaque sélecteur par son parent pour passer devant,
   plutôt que d'employer !important.
   ========================================================= */

@media (min-width: 1100px) {

  /* --- Section vidéo ---------------------------------------
     Le format 9/16 imposait 660 px de haut : en face, le texte
     ne faisait que 189 px, soit ~470 px de vide dans la colonne
     de gauche. On cale la colonne média sur sa largeur naturelle
     et on ramène la vidéo à une hauteur tenable. */
  .am-video { padding: 68px 0; }

  .am-video .am-vwrap {
    grid-template-columns: minmax(0, 560px) auto;
    gap: clamp(48px, 5vw, 80px);
    align-items: center;
    justify-items: stretch;
    justify-content: center;
    max-width: 1040px;
    margin: 0 auto;
  }
  .am-video .am-vtext { max-width: none; width: 100%; }

  .am-vwrap .ytshort {
    height: min(58vh, 520px);
    width: auto;
    aspect-ratio: 9 / 16;
    justify-self: start;
  }

  /* --- FAQ : 760-820 px perdus au milieu d'un écran large.
     On élargit sans casser le confort de lecture. */
  .wrap .am-faq { max-width: 1000px; }
  .wrap .faq    { max-width: 1000px; }

  /* --- Pied de page : colonnes resserrées, libellés qui
     passaient à la ligne. */
  footer .fcols { gap: clamp(48px, 6vw, 90px); }
  footer .fcols a { white-space: nowrap; }
}

@media (min-width: 1600px) {
  .am-video { padding: 76px 0; }
  .am-vwrap .ytshort { height: min(60vh, 560px); }
  .wrap .am-faq, .wrap .faq { max-width: 1080px; }
}

/* ── Bandeau recrutement (annonce esthéticienne / onglerie) ──
   Fixé en haut de page, le header se décale d'autant.
   Masquable par le visiteur, mémorisé le temps de la visite. */
.recrut-bar{position:fixed;top:0;left:0;right:0;z-index:59;background:#F7F2ED;color:#2E2A26;
  font-family:'Outfit','Montserrat',system-ui,sans-serif;font-size:.92rem;padding:11px 0;
  border-bottom:1px solid rgba(46,42,38,.14);box-shadow:0 2px 10px rgba(0,0,0,.07)}
.recrut-bar[hidden]{display:none}
.recrut-bar .wrap{display:flex;align-items:center;justify-content:center;gap:12px;
  text-align:center;position:relative}
.recrut-bar p{margin:0}
.recrut-bar strong{font-weight:600}
.recrut-tag{flex:0 0 auto;background:#2E2A26;color:#C6A053;font-size:.68rem;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;padding:5px 11px;border-radius:999px}
.recrut-lien{margin-left:10px;color:#A9873F;font-weight:600;border-bottom:1px solid #C6A053;
  padding-bottom:1px;cursor:pointer;transition:color .25s}
.recrut-lien:hover{color:#2E2A26}
.recrut-x{position:absolute;right:0;top:50%;transform:translateY(-50%);background:none;border:0;
  cursor:pointer;font-size:1.35rem;line-height:1;color:#9a8f82;padding:2px 6px;transition:color .25s}
.recrut-x:hover{color:#2E2A26}

/* Le header fixe se decale de la hauteur exacte du bandeau. */
body.has-recrut header{top:var(--recrut-h,50px)}

@media (max-width:900px){
  .recrut-bar{font-size:.84rem;padding:10px 0}
  .recrut-bar .wrap{flex-wrap:wrap;gap:7px;padding-right:34px}
  .recrut-lien{margin-left:0}
}
@media (max-width:480px){
  .recrut-bar{font-size:.79rem}
  .recrut-tag{font-size:.62rem;padding:4px 9px}
}

/* Fiche de poste */
.recrut-pop{position:fixed;inset:0;z-index:9100;display:flex;align-items:center;
  justify-content:center;padding:20px;opacity:0;transition:opacity .3s ease}
/* Si le bandeau cookies est encore la, la fiche se compacte et remonte
   pour rester entierement lisible au-dessus de lui. */
body:has(.az-cbox) .recrut-pop{align-items:flex-start;padding-top:2.5vh;padding-bottom:0}
body:has(.az-cbox) .recrut-carte{max-height:64vh;padding:30px 34px 24px}
body:has(.az-cbox) .recrut-carte h2{font-size:clamp(1.4rem,3.6vw,1.7rem);margin-bottom:10px}
body:has(.az-cbox) .recrut-intro,body:has(.az-cbox) .recrut-txt{font-size:.92rem;margin-bottom:14px}
body:has(.az-cbox) .recrut-liste{gap:6px;margin-bottom:16px}
body:has(.az-cbox) .recrut-liste li{padding:8px 13px;font-size:.9rem}
body:has(.az-cbox) .recrut-pied{margin-top:12px}
.recrut-pop.ouvert{opacity:1}
.recrut-voile{position:absolute;inset:0;background:rgba(28,24,20,.66);backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px)}
.recrut-carte{position:relative;z-index:1;background:#F7F2ED;color:#2E2A26;border-radius:20px;
  max-width:560px;width:100%;padding:44px 40px 34px;border-top:5px solid #C6A053;
  box-shadow:0 30px 80px rgba(0,0,0,.42);transform:translateY(18px) scale(.97);
  transition:transform .36s cubic-bezier(.2,.8,.3,1);max-height:calc(100vh - 40px);overflow-y:auto}
.recrut-pop.ouvert .recrut-carte{transform:none}
.recrut-pop-x{position:absolute;top:12px;right:16px;background:none;border:0;cursor:pointer;
  font-size:1.7rem;line-height:1;color:#8a7f72;padding:6px;transition:color .25s}
.recrut-pop-x:hover{color:#2E2A26}
.recrut-eyebrow{font-family:'Outfit','Montserrat',system-ui,sans-serif;font-size:.72rem;
  letter-spacing:.3em;text-transform:uppercase;color:#A9873F;font-weight:600;margin:0 0 10px}
.recrut-carte h2{font-family:'Fraunces',Georgia,serif;font-weight:400;
  font-size:clamp(1.6rem,4.4vw,2.05rem);line-height:1.12;margin:0 0 16px;letter-spacing:-.015em}
.recrut-carte h2 em{font-style:italic;color:#A9873F}
.recrut-intro,.recrut-txt{font-family:'Outfit','Montserrat',system-ui,sans-serif;font-size:.98rem;
  line-height:1.6;color:#5a4f44;margin:0 0 20px}
.recrut-liste{list-style:none;margin:0 0 22px;padding:0;display:grid;gap:9px}
.recrut-liste li{font-family:'Outfit','Montserrat',system-ui,sans-serif;font-size:.95rem;
  color:#5a4f44;padding:11px 15px;background:#EFE7DC;border-radius:10px;
  border-left:3px solid #C6A053}
.recrut-liste li span{color:#2E2A26;font-weight:600}
.recrut-cta{display:flex;flex-direction:column;gap:10px}
.recrut-btn{display:block;text-align:center;background:#2E2A26;color:#F7F2ED;border-radius:999px;
  padding:14px 22px;font-family:'Outfit','Montserrat',system-ui,sans-serif;font-weight:600;
  font-size:.96rem;transition:background .3s,transform .3s}
.recrut-btn:hover{background:#453d35;transform:translateY(-1px)}
.recrut-btn-2{background:#C6A053;color:#2a2114}
.recrut-btn-2:hover{background:#D9B972}
.recrut-pied{font-family:'Outfit','Montserrat',system-ui,sans-serif;font-size:.85rem;
  color:#8a7f72;text-align:center;margin:18px 0 0}
@media (max-width:480px){
  .recrut-carte{padding:36px 24px 28px;border-radius:16px}
}
@media (prefers-reduced-motion:reduce){
  .recrut-pop,.recrut-carte{transition:none}
}


/* ── Écran d'accueil (logo AC) ──────────────────────────────────
   Ajouté par splash.js uniquement : si le JS ne passe pas, aucune
   de ces règles ne s'applique et le site s'affiche normalement. */
.az-splash{position:fixed;inset:0;z-index:10000;display:flex;align-items:center;
  justify-content:center;opacity:1;transition:opacity .38s ease;overflow:hidden;
  /* Dégradé bâti sur la palette officielle : ivoire au centre,
     beige et taupe dans les angles, halo rose poudré très dilué.
     Aucune couleur hors charte. */
  background:
    radial-gradient(58% 52% at 50% 46%, #FBF8F5 0%, rgba(251,248,245,.75) 42%, rgba(251,248,245,0) 74%),
    radial-gradient(85% 70% at 50% 118%, rgba(235,169,170,.22) 0%, rgba(235,169,170,0) 60%),
    radial-gradient(80% 70% at 6% 4%,   rgba(211,192,172,.55) 0%, rgba(211,192,172,0) 62%),
    radial-gradient(85% 75% at 96% 98%, rgba(211,192,172,.65) 0%, rgba(211,192,172,0) 66%),
    linear-gradient(155deg, #F3ECE4 0%, #EFE7DC 50%, #E6DBD0 100%)}
/* Voile lumineux qui balaie doucement l'écran. */
.az-splash::after{content:"";position:absolute;inset:-20%;pointer-events:none;
  background:linear-gradient(115deg, rgba(255,255,255,0) 38%, rgba(255,255,255,.42) 50%, rgba(255,255,255,0) 62%);
  transform:translateX(-30%);
  animation:azSplashVoile 1.1s cubic-bezier(.4,0,.2,1) forwards}
@keyframes azSplashVoile{to{transform:translateX(30%)}}
.az-splash.az-splash-out{opacity:0;pointer-events:none}
.az-splash img{position:relative;z-index:1;width:min(440px,72vw);height:auto;
  transform:scale(.94);opacity:0;
  filter:drop-shadow(0 18px 42px rgba(33,30,28,.10));
  animation:azSplashLogo .5s cubic-bezier(.2,.8,.3,1) forwards}
@keyframes azSplashLogo{to{transform:scale(1);opacity:1}}
/* On bloque le defilement le temps de l'ecran, sans decaler la page. */
html.az-splash-on,html.az-splash-on body{overflow:hidden}
@media (max-width:900px){ .az-splash img{width:min(360px,74vw)} }
@media (max-width:480px){ .az-splash img{width:min(280px,78vw)} }
@media (prefers-reduced-motion:reduce){
  .az-splash{transition:none}
  .az-splash::after{animation:none;opacity:0}
  .az-splash img{animation:none;opacity:1;transform:none;filter:none}
}


/* ── Signature Anna Marini sur l'accueil (section brune) ──
   Remplace le titre texte. Le h2 est conservé pour la structure,
   le texte reste accessible via l'alt de l'image. */
.am .am-signature-home{margin:.5em 0 .45em;line-height:0}
.am .am-signature-home img{width:min(360px,64vw);height:auto;display:block;margin-left:auto;margin-right:auto;
  filter:drop-shadow(0 8px 26px rgba(0,0,0,.45))}
@media (max-width:900px){ .am .am-signature-home img{width:min(300px,68vw)} }
@media (max-width:480px){ .am .am-signature-home img{width:min(240px,72vw)} }