/* =================================================================
   ATELIER DE PORTRAITS D'ANIMAUX — Landing page
   Ambiance douce & artisanale : crème chaud, sauge et terracotta
   désaturés, titres en Fraunces (serif souple), texte en Nunito.
   Mobile-first, bordures fines, beaucoup d'air, animations discrètes.
   ================================================================= */

/* ---------- Variables ---------- */
:root{
  --cream:      #FAF7F1;   /* fond principal */
  --cream-2:    #F3EEE4;   /* fond alterné */
  --card:       #FFFFFF;   /* cartes */
  --sage:       #7E9080;   /* vert sauge désaturé */
  --sage-dark:  #59695C;
  --sage-soft:  #ECF0E8;
  --terra:      #C4795B;   /* terracotta adouci */
  --terra-dark: #A9613F;
  --terra-soft: #F7EBE3;
  --ink:        #37332C;   /* texte principal */
  --muted:      #8B8376;   /* texte secondaire */
  --line:       #E9E2D5;   /* bordures fines */
  --shadow:     0 12px 32px -20px rgba(55,51,44,0.22);
  --radius:     18px;
  --font-display:'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body:  'Nunito', system-ui, -apple-system, sans-serif;
}

/* ---------- Reset léger ---------- */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--cream);
  color:var(--ink);
  font-family:var(--font-body);
  font-weight:400;
  font-size:16.5px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
h1,h2,h3{
  font-family:var(--font-display);
  font-weight:520;
  line-height:1.18;
  color:var(--ink);
  letter-spacing:-0.01em;
  text-wrap:balance;
}

.container{width:100%;max-width:1200px;margin:0 auto;padding:0 24px}

/* ---------- Icônes SVG (traits fins) ---------- */
.ico{
  width:24px;height:24px;
  fill:none;stroke:currentColor;
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
  flex:0 0 auto;
}
.ico-s{width:17px;height:17px;vertical-align:-3px}
.ico-paw{width:16px;height:16px;stroke:none}

/* ---------- Typo utilitaires ---------- */
.eyebrow{
  display:inline-block;
  font-size:12.5px;font-weight:700;
  letter-spacing:1.8px;text-transform:uppercase;
  color:var(--sage-dark);
  margin-bottom:14px;
}
.section-title{font-size:clamp(27px,4vw,38px);margin-bottom:16px}
.section-sub{color:var(--muted);max-width:520px;font-size:17px;margin-bottom:8px}

/* ---------- Boutons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 28px;
  border-radius:999px;
  font-family:var(--font-body);
  font-weight:700;font-size:15px;
  border:1.5px solid transparent;
  cursor:pointer;
  transition:background .2s ease, border-color .2s ease, transform .2s ease;
}
.btn-lg{padding:16px 34px;font-size:16px}
.btn.full{width:100%}
.btn-primary{
  background:var(--terra);
  color:#fff;
}
.btn-primary:hover{background:var(--terra-dark);transform:translateY(-1px)}
.btn-outline{
  background:transparent;
  color:var(--sage-dark);
  border-color:#CBD5C6;
}
.btn-outline:hover{background:var(--sage-soft);border-color:var(--sage)}
.btn:focus-visible{outline:2.5px solid var(--sage);outline-offset:3px}

/* ---------- Animations reveal (fade-in discret) ----------
   --reveal-delay est pose par script.js sur les elements d'une meme
   grille, pour qu'ils apparaissent en cascade plutot que d'un bloc.
   On n'anime que opacity et transform : ce sont les deux seules
   proprietes que le navigateur sait animer sans recalculer la mise
   en page, donc sans faire saccader le defilement. */
.reveal{
  opacity:0;
  transform:translateY(16px);
  transition:
    opacity .65s cubic-bezier(.22,.61,.36,1) var(--reveal-delay,0ms),
    transform .65s cubic-bezier(.22,.61,.36,1) var(--reveal-delay,0ms);
  will-change:opacity, transform;
}
.reveal.is-visible{opacity:1;transform:none;will-change:auto}
/* Variantes de direction, pour que la page ne monte pas toujours
   dans le meme sens. Posees en HTML ou par script.js. */
.reveal-left{transform:translateX(-22px)}
.reveal-right{transform:translateX(22px)}
.reveal-zoom{transform:scale(.95)}

@media (prefers-reduced-motion: reduce){
  .reveal,
  .reveal-left,
  .reveal-right,
  .reveal-zoom{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
  /* Neutralise aussi toutes les animations ajoutees plus bas
     (hero, cartes, boutons) pour les personnes sensibles au mouvement. */
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}

/* =================================================================
   1. HÉRO
   ================================================================= */
.hero{
  padding:72px 0 84px;
  background:
    radial-gradient(ellipse 900px 480px at 85% -10%, rgba(126,144,128,0.07), transparent 65%),
    var(--cream);
}
.hero-grid{
  display:grid;grid-template-columns:1fr;gap:44px;align-items:center;
}
.pill{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--card);
  border:1px solid var(--line);
  color:var(--muted);
  font-size:13px;font-weight:400;
  padding:8px 18px 8px 15px;border-radius:999px;
  margin-bottom:22px;
}
.pill strong{
  font-family:var(--font-display);font-weight:600;
  font-size:16.5px;color:var(--sage-dark);
}
.pill .ico-paw{fill:var(--sage);color:var(--sage)}
.hero-text h1{
  font-size:clamp(32px,5.4vw,52px);
  margin-bottom:20px;
}
.hero-text h1 em{
  font-style:italic;font-weight:420;
  color:var(--terra);
}
.h1-paw{
  width:.62em;height:.62em;
  stroke:none;fill:var(--terra);color:var(--terra);
  margin-left:.22em;vertical-align:-2px;
  transform:rotate(14deg);
}
.hero-sub{
  font-size:clamp(16.5px,2vw,19px);
  color:var(--muted);
  max-width:480px;
  margin-bottom:30px;
}
.hero-microcopy{
  margin-top:18px;font-size:14.5px;color:var(--muted);
  display:flex;align-items:center;gap:8px;
}
.hero-microcopy .ico-s{color:var(--sage-dark)}

/* Avant / Après */
.beforeafter{
  display:flex;align-items:center;justify-content:center;gap:10px;
}
.ba-card{
  flex:1;min-width:0;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:10px 10px 6px;
  box-shadow:var(--shadow);
  text-align:center;
}
.ba-card img{border-radius:12px;width:100%;height:auto}
.ba-card figcaption{
  padding:9px 0 7px;font-size:12px;font-weight:700;
  color:var(--muted);text-transform:uppercase;letter-spacing:1.4px;
}
.ba-card-result{border-color:#DECDBF}
.ba-card-result figcaption{color:var(--terra)}
.ba-arrow{
  flex:0 0 auto;width:44px;color:var(--terra);
}
.ba-arrow svg{width:100%;height:auto;display:block}

@media(min-width:900px){
  /* Moins de hauteur = moins de vide vertical autour du contenu. */
  .hero{padding:76px 0 84px}
  /* Colonne image nettement plus large + moins d'ecart = avant/apres
     bien plus grands, et le hero remplit mieux l'ecran. */
  .hero-grid{grid-template-columns:0.92fr 1.5fr;gap:40px}
  .beforeafter{gap:20px}
  .ba-arrow{width:58px}
}

/* =================================================================
   2. BANDEAU DE RÉASSURANCE
   ================================================================= */
.trustbar{
  background:var(--cream-2);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:34px 0;
}
.trustbar-grid{
  display:grid;grid-template-columns:1fr;gap:20px;
}
.trust-item{
  display:flex;align-items:center;gap:14px;
}
.trust-ico{
  display:flex;align-items:center;justify-content:center;
  width:46px;height:46px;border-radius:50%;
  background:var(--card);
  border:1px solid var(--line);
  color:var(--sage-dark);
}
.trust-item p{font-size:15px;color:var(--ink);font-weight:600;line-height:1.4}
@media(min-width:760px){
  .trustbar-grid{grid-template-columns:repeat(4,1fr);gap:26px}
  .trust-item{flex-direction:column;text-align:center;gap:12px}
  .trust-item p{font-size:14.5px}
}

/* =================================================================
   3. COMMENT ÇA MARCHE
   ================================================================= */
.how{padding:92px 0;text-align:center}
.how .section-title{margin-bottom:52px}
.steps{
  display:grid;grid-template-columns:1fr;gap:20px;
  text-align:left;
}
.step{
  position:relative;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:32px 28px;
}
.step-top{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:18px;
}
.step-num{
  font-family:var(--font-display);
  font-size:15px;font-weight:520;font-style:italic;
  color:var(--muted);
}
.step-num::before{content:'étape '}
.step-ico{color:var(--sage-dark)}
.step h3{font-size:21px;margin-bottom:10px}
.step p{color:var(--muted);font-size:15.5px}
.step p strong{color:var(--ink);font-weight:700}

/* Étape mise en avant, sobrement */
.step-highlight{
  border:1.5px solid var(--terra);
}
.step-highlight .step-ico{color:var(--terra)}
.step-badge{
  position:absolute;top:-11px;left:26px;
  background:var(--terra);color:#fff;
  font-size:11.5px;font-weight:700;letter-spacing:1px;text-transform:uppercase;
  padding:4px 14px;border-radius:999px;white-space:nowrap;
}

.how-reassure{
  display:flex;align-items:flex-start;gap:14px;text-align:left;
  max-width:720px;margin:40px auto 0;
  background:var(--sage-soft);
  border-radius:var(--radius);
  padding:24px 28px;
  color:var(--sage-dark);
}
.how-reassure .ico{margin-top:2px}
.how-reassure p{font-size:15.5px;line-height:1.65}
.how-reassure em{
  font-family:var(--font-display);
  font-style:italic;font-size:17px;
}

@media(min-width:820px){
  .steps{grid-template-columns:repeat(3,1fr);align-items:stretch}
}

/* =================================================================
   4. GALERIE DE STYLES
   ================================================================= */
.styles{padding:92px 0;background:var(--cream-2);text-align:center}
.styles .section-sub{margin:0 auto 44px}
/* Flex plutôt que grid : avec 7 styles, la dernière rangée est
   incomplète — le flex la centre, ce qui a l'air voulu. */
.style-grid{
  display:flex;flex-wrap:wrap;justify-content:center;gap:20px;
}
.style-card{
  flex:0 1 100%;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  transition:transform .25s ease, box-shadow .25s ease;
}
.style-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.style-card img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover}
.style-card figcaption{
  padding:16px;
  font-family:var(--font-display);font-style:italic;font-weight:420;
  font-size:18px;color:var(--ink);
}
/* 2 par rangée dès 380px : la quasi-totalité des mobiles actuels (390px+)
   voit donc 2 styles côte à côte — 7 images empilées seraient trop longues. */
@media(min-width:380px){
  .style-card{flex:0 1 calc(50% - 10px)}
}
@media(min-width:760px){
  .style-card{flex:0 1 calc(33.333% - 14px)}
}
@media(min-width:1040px){
  .style-card{flex:0 1 calc(25% - 15px)}
}

/* =================================================================
   5. PRODUITS ET PRIX
   ================================================================= */
.products{padding:92px 0;text-align:center}
.products .section-title{margin-bottom:48px}
.product-grid{
  display:grid;grid-template-columns:1fr;gap:20px;align-items:stretch;
}
.product-card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:36px 28px 30px;
  display:flex;flex-direction:column;align-items:center;
  position:relative;
  transition:transform .25s ease, box-shadow .25s ease;
}
.product-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.product-ico{width:34px;height:34px;color:var(--sage-dark);margin-bottom:16px}
.product-card h3{font-size:22px;margin-bottom:10px}
.product-desc{color:var(--muted);font-size:15px;margin-bottom:22px;flex:1;max-width:270px}
.product-price{
  font-family:var(--font-display);font-weight:520;
  font-size:32px;color:var(--ink);
  font-variant-numeric:tabular-nums;
  margin-bottom:22px;
  display:flex;align-items:baseline;gap:10px;justify-content:center;flex-wrap:wrap;
}
.product-old{
  font-size:17px;color:var(--muted);text-decoration:line-through;font-weight:420;
}
.product-featured{
  border:1.5px solid var(--terra);
}
.product-featured .product-ico{color:var(--terra)}
.product-featured .product-price{color:var(--terra-dark)}
.product-ribbon{
  position:absolute;top:-12px;left:50%;transform:translateX(-50%);
  background:var(--terra);color:#fff;
  font-size:12px;font-weight:700;letter-spacing:.4px;
  padding:5px 16px;border-radius:999px;white-space:nowrap;
}
@media(min-width:840px){
  .product-grid{grid-template-columns:repeat(3,1fr)}
}

/* Bandeau code promo — carte douce, pas de dégradé criard */
.promo-banner{
  margin-top:44px;
  background:var(--terra-soft);
  border:1px solid #EBD8CB;
  border-radius:var(--radius);
  padding:28px 30px;
  display:flex;flex-direction:column;gap:20px;
  align-items:center;justify-content:space-between;
  text-align:left;
}
.promo-text strong{
  font-family:var(--font-display);font-weight:520;
  font-size:21px;color:var(--terra-dark);display:block;margin-bottom:4px;
}
.promo-text p{font-size:14.5px;color:var(--muted)}
.promo-field{display:flex;gap:10px;width:100%;flex-wrap:wrap}
.promo-field input{
  flex:1;min-width:150px;
  border:1.5px solid #E4D2C4;border-radius:999px;
  padding:13px 20px;font-family:var(--font-body);font-size:15px;font-weight:600;
  color:var(--ink);background:var(--card);
  transition:border-color .2s ease;
}
.promo-field input:focus{outline:none;border-color:var(--terra)}
@media(min-width:760px){
  .promo-banner{flex-direction:row}
  .promo-field{width:auto}
}

/* =================================================================
   5bis. BOUCLE SONDAGE → CODE PROMO
   Carte sauge distincte, comme une offre spéciale, cohérente avec
   la charte (icône au trait, serif Fraunces, bouton terracotta).
   ================================================================= */
.survey{padding:0 0 92px;text-align:center}
.survey-card{
  max-width:680px;margin:0 auto;
  background:var(--sage-soft);
  border:1px solid #D8E0D3;
  border-radius:24px;
  padding:48px 36px 42px;
}
.survey-ico{
  display:inline-flex;align-items:center;justify-content:center;
  width:58px;height:58px;border-radius:50%;
  background:var(--card);
  border:1px solid #D8E0D3;
  color:var(--terra);
  margin-bottom:20px;
}
.survey-ico .ico{width:27px;height:27px;stroke-width:1.4}
.survey-card .section-title{font-size:clamp(24px,3.6vw,32px);margin-bottom:12px}
.survey-sub{color:var(--muted);font-size:16px;max-width:480px;margin:0 auto 16px}
.survey-reassure{
  display:inline-flex;align-items:flex-start;gap:8px;
  font-size:14.5px;font-weight:600;color:var(--sage-dark);
  margin-bottom:26px;text-align:left;
}
.survey-reassure .ico-s{margin-top:2px}
.survey-note{
  margin-top:18px;font-size:13.5px;color:var(--muted);font-style:italic;
}
@media(max-width:420px){.survey-card{padding:36px 22px 32px}}

/* =================================================================
   6. POUR TOI OU EN CADEAU
   ================================================================= */
.gift{padding:92px 0;background:var(--cream-2)}
.gift-wrap{
  display:grid;grid-template-columns:1fr;gap:32px;align-items:center;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:24px;
  padding:40px 32px;
}
.gift-visual{
  display:flex;align-items:center;justify-content:center;
  background:var(--sage-soft);
  border-radius:var(--radius);
  padding:44px;
}
.gift-ico{width:74px;height:74px;stroke-width:1.2;color:var(--sage-dark)}
.gift-content h2{margin-bottom:14px}
.gift-content > p{color:var(--muted);font-size:16px;margin-bottom:26px;max-width:480px}

.gift-option{
  display:flex;align-items:flex-start;gap:14px;
  background:var(--cream);
  border:1.5px solid var(--line);
  border-radius:14px;
  padding:16px 18px;cursor:pointer;
  transition:border-color .2s ease, background .2s ease;
  max-width:440px;
}
.gift-option:hover{border-color:var(--sage)}
.gift-option input{position:absolute;opacity:0;width:0;height:0}
.gift-check{
  flex:0 0 auto;
  width:24px;height:24px;border-radius:7px;
  border:1.5px solid var(--sage);
  background:var(--card);position:relative;margin-top:2px;
  transition:background .2s ease;
}
.gift-check::after{
  content:'';position:absolute;left:7px;top:3px;
  width:6px;height:11px;
  border:solid #fff;border-width:0 2px 2px 0;
  transform:rotate(42deg);
  opacity:0;transition:opacity .15s ease;
}
.gift-option input:checked ~ .gift-check{background:var(--sage);border-color:var(--sage)}
.gift-option input:checked ~ .gift-check::after{opacity:1}
.gift-option:has(input:checked){border-color:var(--sage);background:var(--sage-soft)}
.gift-option input:focus-visible ~ .gift-check{outline:2.5px solid rgba(126,144,128,.5);outline-offset:2px}
.gift-label{display:flex;flex-direction:column;gap:2px}
.gift-label strong{font-size:15.5px;font-weight:700}
.gift-label small{color:var(--muted);font-size:13.5px}

@media(min-width:820px){
  .gift-wrap{grid-template-columns:0.72fr 1.28fr;padding:48px 44px}
}

/* =================================================================
   7. PREUVE SOCIALE
   ================================================================= */
.proof{padding:92px 0;text-align:center}
.proof-stat{
  max-width:620px;margin:0 auto 56px;
}
.proof-stat strong{
  font-family:var(--font-display);font-weight:420;
  font-size:clamp(58px,11vw,88px);line-height:1;
  color:var(--sage-dark);
  display:block;margin-bottom:14px;
}
.proof-stat p{
  font-family:var(--font-display);font-style:italic;font-weight:420;
  font-size:clamp(18px,2.6vw,22px);color:var(--ink);
  max-width:440px;margin:0 auto 10px;
}
.proof-src{display:block;font-size:13px;color:var(--muted)}

.testi-grid{
  display:grid;grid-template-columns:1fr;gap:20px;
}
.testi{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:30px 28px 26px;text-align:left;
  position:relative;
}
.testi::before{
  content:'“';
  font-family:var(--font-display);
  font-size:52px;line-height:1;
  color:var(--terra);
  display:block;margin-bottom:6px;
}
.testi blockquote{font-size:16px;color:var(--ink);margin-bottom:16px;line-height:1.6}
.testi figcaption{font-size:14px;font-weight:700;color:var(--muted)}
.testi figcaption::before{content:'— '}
@media(min-width:820px){
  .testi-grid{grid-template-columns:repeat(3,1fr)}
}

/* =================================================================
   8. FAQ
   ================================================================= */
.faq{padding:92px 0;background:var(--cream-2)}
.faq .eyebrow,.faq .section-title{display:block;text-align:center}
.faq .section-title{margin-bottom:40px}
.faq-list{max-width:720px;margin:0 auto}
.faq details{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:14px;
  padding:4px 24px;
  margin-bottom:12px;
  transition:border-color .2s ease;
}
.faq details[open]{border-color:#CBD5C6}
.faq summary{
  cursor:pointer;list-style:none;
  padding:18px 0;
  font-family:var(--font-display);font-weight:520;font-size:17.5px;color:var(--ink);
  display:flex;justify-content:space-between;align-items:center;gap:16px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:'+';color:var(--terra);font-size:24px;font-weight:300;
  font-family:var(--font-body);
  transition:transform .25s ease;flex:0 0 auto;line-height:1;
}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{color:var(--muted);font-size:15.5px;padding:0 0 20px;line-height:1.7}
.faq details p strong{color:var(--ink);font-weight:700}

/* =================================================================
   9. FORMULAIRE FINAL DE CAPTURE
   ================================================================= */
.reserve{padding:96px 0}
.reserve-card{
  max-width:520px;margin:0 auto;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:24px;
  padding:46px 36px;
  text-align:center;
  box-shadow:var(--shadow);
}
.reserve-card h2{font-size:clamp(27px,4.6vw,34px);margin-bottom:12px}
.reserve-sub{color:var(--muted);font-size:15.5px;margin-bottom:30px}
.reserve-form{text-align:left;display:flex;flex-direction:column;gap:18px}
.field{display:flex;flex-direction:column;gap:7px}
.field label{
  font-size:13px;font-weight:700;color:var(--ink);
  letter-spacing:.3px;
}
.field .opt{color:var(--muted);font-weight:400}
.field input{
  border:1.5px solid var(--line);
  border-radius:12px;
  padding:14px 16px;
  font-family:var(--font-body);font-size:16px;font-weight:600;
  color:var(--ink);background:var(--cream);
  transition:border-color .2s ease, background .2s ease;
}
.field input:focus{outline:none;border-color:var(--sage);background:var(--card)}
.reserve-form .btn{margin-top:6px}

/* -------- Choix du produit dans le formulaire -------- */
.product-choice{border:none;padding:0;margin:0}
.product-choice legend{
  font-size:13px;font-weight:700;color:var(--ink);
  letter-spacing:.3px;margin-bottom:7px;
}
.choice{
  display:flex;align-items:center;
  border:1.5px solid var(--line);
  border-radius:12px;
  padding:12px 16px;margin-bottom:8px;
  background:var(--cream);cursor:pointer;
  transition:border-color .2s ease, background .2s ease;
}
.choice:hover{border-color:var(--sage)}
.choice input{accent-color:var(--sage);width:18px;height:18px;flex:0 0 auto;margin-right:12px}
.choice span{display:flex;justify-content:space-between;align-items:center;flex:1;font-size:15px;font-weight:600;color:var(--ink)}
.choice span em{font-style:normal;font-weight:700;color:var(--sage-dark)}
.choice:has(input:checked){border-color:var(--sage);background:var(--sage-soft)}
.choice-featured span::before{content:'⭐ ';font-size:13px}

/* -------- Emballage cadeau (version formulaire) -------- */
.gift-option-form{max-width:none}

/* -------- Coloris du cadre -------- */
.frame-colors{border:none;padding:0;margin:0}
.frame-colors legend{
  font-size:13px;font-weight:700;color:var(--ink);
  letter-spacing:.3px;margin-bottom:7px;
}
.swatch-row{display:flex;gap:8px;flex-wrap:wrap}
.swatch{
  display:flex;align-items:center;gap:8px;
  border:1.5px solid var(--line);
  border-radius:999px;
  padding:8px 14px;
  background:var(--cream);cursor:pointer;
  transition:border-color .2s ease, background .2s ease;
}
.swatch:hover{border-color:var(--sage)}
.swatch input{position:absolute;opacity:0;width:0;height:0}
.swatch-dot{
  width:20px;height:20px;border-radius:50%;
  flex:0 0 auto;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);
}
.swatch-light{border:1px solid var(--line)}
.swatch-name{font-size:13.5px;font-weight:600;color:var(--ink)}
.swatch:has(input:checked){border-color:var(--sage);background:var(--sage-soft)}
.swatch:has(input:focus-visible){outline:2.5px solid rgba(126,144,128,.5);outline-offset:2px}

/* -------- Feedback code promo -------- */
.promo-feedback{font-size:13.5px;font-weight:600;margin:0}
.promo-feedback.is-valid{color:var(--sage-dark)}
.promo-feedback.is-invalid{color:#C4795B}

/* -------- Récap prix -------- */
.reserve-recap{
  background:var(--cream);
  border:1.5px dashed var(--line);
  border-radius:12px;
  padding:12px 16px;
  font-size:14.5px;font-weight:700;color:var(--ink);
  text-align:center;margin:0;
}
.reserve-confirm{
  background:var(--sage-soft);
  color:var(--sage-dark);
  font-weight:700;font-size:15.5px;
  text-align:center;padding:16px;border-radius:12px;margin-top:4px;
}
.reserve-legal{font-size:13px;color:var(--muted);text-align:center;margin-top:4px}

/* =================================================================
   FOOTER
   ================================================================= */
.footer{
  padding:44px 0;
  background:var(--cream-2);
  border-top:1px solid var(--line);
}
.footer-inner{text-align:center;display:flex;flex-direction:column;gap:8px;align-items:center}
.footer-brand{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-display);font-weight:520;font-size:21px;color:var(--ink);
}
.footer-brand .ico-paw{fill:var(--sage);color:var(--sage)}
.footer-tagline{
  font-family:var(--font-display);font-style:italic;font-weight:420;
  font-size:14.5px;color:var(--muted);
}
.footer-mini{font-size:13.5px;color:var(--muted)}

/* =================================================================
   Petits ajustements mobile
   ================================================================= */
@media(max-width:420px){
  .ba-arrow{width:30px}
  .reserve-card{padding:36px 24px}
  .gift-visual{padding:32px}
}

/* =================================================================
   MICRO-INTERACTIONS
   Le survol n'existe pas sur mobile : chaque effet a donc son
   equivalent au toucher (:active), sinon la moitie des visiteurs
   n'aurait aucun retour visuel en tapant.
   ================================================================= */

/* -- Boutons : petit enfoncement au clic, ressenti "physique" -- */
.btn:active{transform:translateY(1px) scale(.985)}
.btn-primary{
  transition:background .2s ease, border-color .2s ease,
             transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .2s ease;
}
.btn-primary:hover{box-shadow:0 8px 18px -8px rgba(193,110,80,.55)}

/* -- Cartes de style : l'image respire au survol, dans son cadre -- */
.style-card img{
  transition:transform .5s cubic-bezier(.22,.61,.36,1);
  will-change:transform;
}
.style-card:hover img,
.style-card:focus-within img{transform:scale(1.06)}
.style-card figcaption{transition:color .25s ease}
.style-card:hover figcaption{color:var(--terra-dark)}
.style-card:active{transform:translateY(-2px) scale(.995)}

/* -- Cartes produit : legere elevation, deja amorcee plus haut -- */
.product-card:active{transform:translateY(-2px) scale(.995)}
.product-card .product-ico{transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.product-card:hover .product-ico{transform:scale(1.12) rotate(-4deg)}

/* -- FAQ : la reponse se deplie au lieu d'apparaitre sec -- */
.faq details[open] p{animation:faq-ouvre .32s cubic-bezier(.22,.61,.36,1)}
@keyframes faq-ouvre{
  from{opacity:0;transform:translateY(-6px)}
  to{opacity:1;transform:none}
}
.faq summary:hover{color:var(--terra-dark)}
.faq summary:focus-visible{outline:2.5px solid var(--sage);outline-offset:3px;border-radius:8px}

/* -- Bandeau de reassurance : les icones s'animent a l'arrivee -- */
.trust-item .trust-ico{transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.trust-item:hover .trust-ico{transform:translateY(-3px)}

/* =================================================================
   HERO — la transformation photo -> portrait, racontee
   La fleche avance et les deux cartes respirent en alternance :
   le visiteur comprend le principe du produit sans lire une ligne.
   ================================================================= */
.beforeafter.is-visible .ba-card{animation:carte-entre .7s cubic-bezier(.22,.61,.36,1) both}
.beforeafter.is-visible .ba-card-result{animation-delay:.26s}
@keyframes carte-entre{
  from{opacity:0;transform:translateY(18px) scale(.97)}
  to{opacity:1;transform:none}
}
.beforeafter.is-visible .ba-arrow{
  animation:fleche-avance 2.4s ease-in-out .9s infinite;
}
@keyframes fleche-avance{
  0%,100%{transform:translateX(0);opacity:.75}
  50%{transform:translateX(5px);opacity:1}
}
/* La carte resultat garde une legere mise en avant au survol. */
.ba-card{transition:transform .3s cubic-bezier(.22,.61,.36,1), box-shadow .3s ease}
.beforeafter:hover .ba-card-result{transform:translateY(-4px);box-shadow:var(--shadow)}

/* =================================================================
   CONFORT TACTILE (mobile)
   Cible : 44x44px minimum sur tout ce qui se tape, recommandation
   d'accessibilite (WCAG 2.5.5) et d'Apple/Google.
   ================================================================= */
.faq summary{min-height:44px}
.choice{min-height:44px}
.swatch{min-height:44px}
.field input{min-height:44px}
.gift-option{min-height:44px}
.nav a{display:inline-flex;align-items:center;min-height:44px}
.promo-field .btn{min-height:44px}
/* Les cases a cocher/radios natives sont trop petites au doigt :
   on agrandit la zone sensible sans grossir le dessin. */
.choice input,
.gift-option input{min-width:22px;min-height:22px}

/* =================================================================
   TRES PETITS ECRANS (320 - 400px)
   Un iPhone SE fait 375px, certains Android 360px, et le plus petit
   parc encore actif descend a 320px. On verifie que rien ne deborde.
   ================================================================= */
@media(max-width:360px){
  .container{padding:0 16px}
  .hero-text h1{font-size:28px}
  .product-card{padding:30px 18px 26px}
  .product-price{font-size:27px}
  .faq details{padding:2px 16px}
  .faq summary{font-size:16px}
  .reserve-card{padding:30px 18px}
  .promo-banner{padding:22px 18px}
  .swatch-row{gap:6px}
  .btn{padding:13px 20px;font-size:14.5px}
  .btn-lg{padding:15px 22px;font-size:15px}
}

/* =================================================================
   BARRE D'ACTION COLLANTE
   Toujours atteignable sur une page longue. Masquee quand le
   formulaire est visible (gere par script.js) pour ne pas le couvrir.
   ================================================================= */
.barre-collante{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:12px 18px;
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(10px);
  border-top:1px solid var(--line);
  box-shadow:0 -6px 22px -12px rgba(60,50,38,.28);
  transform:translateY(100%);
  transition:transform .32s cubic-bezier(.22,.61,.36,1);
  /* Evite que la barre passe sous la zone gestuelle des iPhone. */
  padding-bottom:calc(12px + env(safe-area-inset-bottom));
}
.barre-collante.is-on{transform:translateY(0)}
.barre-collante-texte{display:flex;flex-direction:column;min-width:0}
.barre-collante-texte strong{
  font-size:14.5px;font-weight:800;color:var(--ink);line-height:1.25;
}
.barre-collante-texte span{
  font-size:12.5px;color:var(--muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.barre-collante .btn{flex:0 0 auto;padding:13px 22px;font-size:14.5px;min-height:44px}

@media(max-width:400px){
  .barre-collante{padding:10px 12px;gap:10px}
  .barre-collante-texte strong{font-size:13.5px}
  .barre-collante-texte span{font-size:11.5px}
  .barre-collante .btn{padding:12px 16px;font-size:13.5px}
}
@media (prefers-reduced-motion: reduce){
  .barre-collante{transition:none}
}

/* Filet de securite : aucune largeur ne doit provoquer de defilement
   horizontal. Une seule ligne trop large casse toute la page mobile. */
html,body{overflow-x:hidden}
img,svg,video{max-width:100%}