/* ============================================================
   Swissfix — styles.css — Optimisé performances / SEO
   - Variables CSS pour cohérence
   - font-display: swap activé
   - Animations réduites si prefers-reduced-motion
   ============================================================ */

:root{
  --bg:#ffffff;                 /* fond tout blanc */
  --group-bg:#ffffff;
  --group-border:#e5e5ea;       /* iOS separator/border */
  --separator:#e5e5ea;
  --text:#0b0b0b;
  --muted:rgba(0,0,0,0.62);

  --switch-off:#e5e5ea;         /* iOS off track */
  --switch-on:#34c759;          /* iOS green */
  --knob:#ffffff;
}

*{ box-sizing:border-box; }
html { scroll-behavior: smooth; }
html, body{ height:100%; }

body{
  margin:0;
  font-family: "Trebuchet MS", "Segoe UI", Arial, sans-serif;
  color: var(--text);
  background: var(--bg);
}

.page{
  min-height:100vh;
  display:grid;
  place-items:center;
  padding: clamp(14px, 3vh, 32px) clamp(12px, 3vw, 28px);
}

.hero{
  width: min(1200px, 100%);
  padding: clamp(18px, 3vw, 34px);
border: 1px solid var(--group-border);
  border-radius: 22px;
  box-shadow: 0 28px 88px rgba(0,0,0,0.10);
}

.brand{
  width: 100%;
  text-align: center;
  flex-direction: column;
  display: flex;
  justify-content:center;
  align-items: center;
  padding: 6px 0 38px; /* air dessous pour éviter impression de coupe */
  overflow: visible;
  cursor: pointer;
  transition: transform 160ms ease, filter 160ms ease;
}

/* Logo : même effet lift que les boutons iOS au survol */
@media (hover:hover){
  .brand:hover{
    transform: translateY(-3px);
  }
}

/* Logo : petit rebond au clic */
.brand:active{
  transform: translateY(1px) scale(0.98);
}

/* Le slogan est dans le SVG, on évite le doublon */
.slogan{ display:none; }

/* Layout: nav compacte à gauche, contenu à droite */
.layout{
  margin-top: calc(var(--sf-spacing, 12px) * 1.8);
  display:grid;
  grid-template-columns: auto 1fr;
  gap: calc(var(--sf-spacing, 12px) * 1.5);
  align-items:start;
}

/* Liste style iOS (Settings) — COMPACTE: largeur = contenu */
.ios-list{
  width: max-content;     /* compact: largeur = plus longue ligne */
  display: inline-flex;   /* stack */
  flex-direction: column;
  gap: var(--sf-spacing, 12px);              /* séparation entre boîtes */
  margin: 0;
  text-align: left;
  background: transparent; /* pas de boîte globale */
}

.ios-item{
  display:flex;
  align-items:center;
  gap: calc(var(--sf-spacing, 12px) * 1.2);
  padding: calc(var(--sf-pad, 16px) * 0.88) calc(var(--sf-pad, 16px) * 0.88);
  width: 100%;
  white-space: nowrap;

  background: linear-gradient(180deg, #ffffff 0%, #f5f6ff 100%);
  border: 1px solid rgba(0,0,0,0.10);
  border-radius: 16px;

  box-shadow:
    0 26px 60px rgba(0,0,0,0.18),
    0 8px 18px rgba(0,0,0,0.10),
    0 1px 0 rgba(255,255,255,0.95) inset;
  transform: translateY(-1px);
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.ios-label{
  font-family: \"Trebuchet MS\", \"Segoe UI\", Arial, sans-serif;
  font-size: clamp(14px, calc(1rem * var(--sf-font-scale, 1)), 18px);
  font-weight: 600;
  color: rgba(0,0,0,0.90);
  white-space: nowrap;

  flex: 1;              /* prend l’espace disponible */
  min-width: 0;         /* autorise ellipsis si besoin */
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Mettre en gras uniquement certains libellés (Tarifs, Boutique) */
.label-bold{
  font-weight: 800;
}

/* Switch iOS */
.switch{
  position: relative;
  display: inline-block;
  width: 52px;
  height: 32px;
  flex: 0 0 auto;
  margin-left: auto;    /* IMPORTANT: collé à droite */
}

.switch input{
  opacity: 0;
  width: 0;
  height: 0;
}

.slider{
  position:absolute;
  cursor:pointer;
  inset:0;
  background: var(--switch-off);
  border-radius: 999px;
  transition: background 160ms ease;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.04);
}

.slider:before{
  content:"";
  position:absolute;
  height: 28px;
  width: 28px;
  left: 2px;
  top: 2px;
  background: var(--knob);
  border-radius: 999px;
  transition: transform 160ms ease;
  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
}

.switch input:checked + .slider{
  background: var(--switch-on);
}

.switch input:checked + .slider:before{
  transform: translateX(20px);
}

/* Petit feedback de clic sur la ligne */
.ios-item.tap{
  background: rgba(0,0,0,0.03);
}

/* Zone de contenu à droite (là où tu écris) */
.content{
  border: 1px solid rgba(0,0,0,0.10);
  border-radius: 18px;
  padding: calc(var(--sf-pad, 16px) * 1.1) calc(var(--sf-pad, 16px) * 1.1);

  background: linear-gradient(180deg, #ffffff 0%, #f6f7ff 100%);
  box-shadow:
    0 30px 78px rgba(0,0,0,0.18),
    0 10px 26px rgba(0,0,0,0.10),
    0 1px 0 rgba(255,255,255,0.95) inset;

  font-family: "Trebuchet MS", "Segoe UI", Arial, sans-serif;
}

.content h2{
  margin: 0 0 10px;
  font-size: clamp(15px, calc(1.1rem * var(--sf-font-scale, 1)), 22px);
}

.content p{
  margin: 0;
  line-height: 1.6;
  color: rgba(0,0,0,0.72);
}

/* Mobile: nav au-dessus, contenu dessous */
@media (max-width: 820px){
  .layout{
    display: flex;
    flex-direction: column;
    gap: calc(var(--sf-spacing, 12px) * 1.0);
  }
  .ios-list{
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--sf-spacing, 12px);
    margin: 0;
    text-align: left;
    background: transparent;
  }
  .ios-item{
    display: flex;
    align-items: center;
    gap: calc(var(--sf-spacing, 12px) * 1.2);
    padding: calc(var(--sf-pad, 16px) * 0.88) calc(var(--sf-pad, 16px) * 0.88);
    width: 100%;
    white-space: nowrap;
    background: linear-gradient(180deg, #ffffff 0%, #f5f6ff 100%);
    border: 1px solid rgba(0,0,0,0.10);
    border-radius: 16px;
    box-shadow:
      0 26px 60px rgba(0,0,0,0.18),
      0 8px 18px rgba(0,0,0,0.10),
      0 1px 0 rgba(255,255,255,0.95) inset;
    transition: transform 160ms ease, box-shadow 160ms ease;
  }
  /* contentBox directement sous la nav, pleine largeur */
  #contentBox {
    width: 100%;
  }
}
/* Petit lift au survol (desktop) */

/* Accueil content size */
.content-accueil p{
  font-size: clamp(15px, calc(1.1rem * var(--sf-font-scale, 1)), 22px);
  line-height: 1.85;
}


/* Filigrane Suisse derrière le contenu Accueil (pastel rouge) */
.content-accueil::before{
  content:"";
  position:absolute;
  inset: 0;
  background: url("assets/suisse-watermark.svg") center / 76% no-repeat;
  opacity: 0.07;            filter: grayscale(1) contrast(1.05) brightness(1.08);
/* filigrane pastel rouge */
  pointer-events: none;
}

.content-accueil > *{
  position: relative;
  z-index: 1;             /* texte au-dessus du filigrane */
}




/* Right content tints (même intensité, couleurs différentes) */
.content-services{
  background: linear-gradient(180deg, #f6f9ff 0%, #fbfcff 100%);
  border-color: rgba(0, 64, 140, 0.06);
}

.content-methode{
  background: linear-gradient(180deg, #f6fff8 0%, #fbfffc 100%);
  border-color: rgba(0, 110, 60, 0.06);
}

.content-boutique{
  background: linear-gradient(180deg, #fff6f6 0%, #fffdfd 100%);
  border-color: rgba(160, 0, 0, 0.06);
}

.content-confidentialite{
  background: linear-gradient(180deg, #faf6ff 0%, #fdfbff 100%);
  border-color: rgba(90, 0, 140, 0.06);
}

.content-contact{
  background: linear-gradient(180deg, #fffaf2 0%, #fffdf8 100%);
  border-color: rgba(140, 90, 0, 0.06);
}



/* Accueil: sans couleur (fond neutre) */
.content-accueil{
  background: linear-gradient(180deg, #ffffff 0%, #f8f8fb 100%);
  border-color: rgba(0,0,0,0.10);
}

/* Drapeau suisse en image */
.flag-icon{
  width: 18px;
  height: 18px;
  vertical-align: -3px; /* alignement visuel avec le texte */
  margin-left: 6px;
  display: inline-block;
}

/* Spacing paragraphs */
.content-accueil p{
  margin: 0;
}
.content-accueil p + p{
  margin-top: calc(var(--sf-spacing, 12px) * 1.35); /* plus d'espace entre paragraphes */
}

/* Listes à puces (contenu) */
.bullet-list{
  margin: 8px 0 0;
  padding-left: calc(var(--sf-pad, 16px) * 1.1);
  color: rgba(0,0,0,0.74);
  line-height: 1.75;
  font-size: inherit;     /* même taille que la boîte À propos */
}
.bullet-list li{
  margin: var(--sf-spacing, 12px) 0;
}

/* Confidentialité: police plus grande */
.content-confidentialite{
  font-size: clamp(14px, calc(1.05rem * var(--sf-font-scale, 1)), 20px);
}


/* Tout le contenu au-dessus du filigrane */
.page, .hero{
  position: relative;
  z-index: 1;
}


/* Tout le contenu du panneau au-dessus du filigrane */
/* Logo (coccinelle) : aucune ombre / aucun filtre */
/* Filigrane Cervin (couleurs originales) dans le panneau */
.hero{
  position: relative;
}

.hero::before{
  content:"";
  position:absolute;
  inset: 0;
  background: url("assets/icons/cervin.png") center top / cover no-repeat;
  opacity: 0.16;
  filter: saturate(1.35) contrast(1.12) brightness(1.03);              /* filigrane discret, couleurs d'origine */
  pointer-events: none;
  border-radius: inherit;
  z-index: 0;
}

/* Tout le contenu du panneau au-dessus du filigrane */
.hero > *{
  position: relative;
  z-index: 1;
}

@media (hover:hover){
  .ios-item:hover{
    transform: translateY(-3px);
    box-shadow:
      0 34px 76px rgba(0,0,0,0.20),
      0 10px 24px rgba(0,0,0,0.12),
      0 1px 0 rgba(255,255,255,0.95) inset;
  }
}

@media (hover:hover){
  .content:hover{
    box-shadow:
      0 38px 92px rgba(0,0,0,0.20),
      0 12px 30px rgba(0,0,0,0.12),
      0 1px 0 rgba(255,255,255,0.95) inset;
  }
}


/* Assure le même effet "flottant" sur toutes les variantes de boîtes de droite */
.content-accueil,
.content-services,
.content-methode,
.content-confidentialite,
.content-contact{
  box-shadow: 0 30px 78px rgba(0,0,0,0.18),
    0 10px 26px rgba(0,0,0,0.10),
    0 1px 0 rgba(255,255,255,0.95) inset !important;
  border-radius: 18px; /* cohérent */
}

@media (hover:hover){
  .content-accueil:hover,
  .content-services:hover,
  .content-methode:hover,
  .content-confidentialite:hover,
  .content-contact:hover{
    box-shadow: 0 38px 92px rgba(0,0,0,0.20),
      0 12px 30px rgba(0,0,0,0.12),
      0 1px 0 rgba(255,255,255,0.95) inset !important;
  }
}

/* Arbre sous "Services" */
.nav-group{
  width: 100%;
}

.tree{
  margin-top: var(--sf-spacing, 12px);
  padding-left: calc(var(--sf-pad, 16px) * 0.88); /* indentation */
  display: flex;
  flex-direction: column;
  gap: var(--sf-spacing, 12px);
}

.tree-item{
  cursor: pointer;
  user-select: none;

  padding: calc(var(--sf-pad, 16px) * 0.75) calc(var(--sf-pad, 16px) * 0.88);
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,0.10);
  background: linear-gradient(180deg, #ffffff 0%, #f5f6ff 100%);

  box-shadow:
    0 26px 60px rgba(0,0,0,0.18),
    0 8px 18px rgba(0,0,0,0.10),
    0 1px 0 rgba(255,255,255,0.95) inset;

  font-size: clamp(12px, calc(0.875rem * var(--sf-font-scale, 1)), 16px);
  font-weight: 600;
  color: rgba(0,0,0,0.85);

  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

@media (hover:hover){
  .tree-item:hover{
    transform: translateY(-3px);
    box-shadow:
      0 34px 76px rgba(0,0,0,0.20),
      0 10px 24px rgba(0,0,0,0.12),
      0 1px 0 rgba(255,255,255,0.95) inset;
  }
}


/* IMPORTANT: assure que l'attribut hidden cache bien l'arbre (sinon .tree{display:flex} peut l'écraser) */
.tree[hidden]{
  display: none !important;
}


/* Les commutateurs des autres boutons sont décoratifs (non cliquables). Seul "Services" est interactif. */
.ios-item:not(.ios-parent) .switch{
  pointer-events: none;
}

/* Mais le commutateur "Services" reste cliquable */
.ios-parent .switch{
  pointer-events: auto;
}


/* Espace entre paragraphes */
.spacer{ height: var(--sf-spacing, 12px); }




/* Services : faire descendre la photo pour remplir le bas de la boîte (marges propres) */
.services-content{
  height: 100%;
  display: flex;
  flex-direction: column;
}

.services-photo-wrap{
  margin-top: calc(var(--sf-spacing, 12px) * 1.2);
  flex: 1 1 auto;            /* prend l'espace restant en bas */
  display: flex;
  align-items: stretch;
  padding-bottom: var(--sf-spacing, 12px);      /* marge basse agréable */
}

.services-photo{
  width: 100%;
  height: 100%;              /* allonge l'image vers le bas */
  object-fit: cover;         /* sans déformer */
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,0.10);
  box-shadow:
    0 30px 78px rgba(0,0,0,0.18),
    0 10px 26px rgba(0,0,0,0.10);
  min-height: clamp(140px, 22vh, 260px);         /* sécurité si écran petit */
}


/* Services : police 14pt (pour aligner le bas de la boîte avec le bouton Contact) */
.content-services #contentBody p{
  margin: 0;
}
.content-services #contentBody .spacer{
  height: var(--sf-spacing, 12px);
}




/* Boîte de droite : police 14pt partout (À propos, Services, etc.) */
.content #contentBody,
.content #contentBody *{
  font-size: 18.7px; /* 14pt */
  line-height: 1.35;
}
/* Arbre Services : élément sélectionné (plein vert) */
.tree-item.active{
  background: #34C759;
  border-color: #34C759;
  color: #ffffff;
}

.tree-item.active:focus{
  outline: none;
  box-shadow: 0 0 0 3px rgba(52,199,89,0.28);
}
/* Fiche Services : scaffold (titre + place pour texte + place pour photo) */
.fiche{
  display: flex;
  flex-direction: column;
  gap: calc(var(--sf-spacing, 12px) * 1.2);
}

.fiche-text{
  padding: calc(var(--sf-pad, 16px) * 0.75) calc(var(--sf-pad, 16px) * 0.88);
  border-radius: 14px;
  background: rgba(255,255,255,0.70);
  border: 1px solid rgba(0,0,0,0.08);
}

.placeholder{
  opacity: 0.75;
}

.fiche-photo-slot{
  flex: 1 1 auto;
  min-height: clamp(140px, 22vh, 260px);
  border-radius: 18px;
  border: none;
  background: rgba(255,255,255,0.50);
  display: flex;
  align-items: center;
  justify-content: center;
}

.fiche-photo-label{
  font-weight: 700;
  opacity: 0.75;
}
/* Supprimer le cadre autour du texte (Smartphones & tablettes) */
.fiche-text.no-frame{
  background: transparent;
  border: none;
  padding: 0;
}


/* Services : structure en flex pour coller l'image en bas (alignée avec Contact) */
.content-services{
  display: flex;
  flex-direction: column;
}

.content-services #contentBody{
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* Les fiches Services occupent toute la hauteur disponible */
.content-services .fiche{
  flex: 1 1 auto;
  min-height: 0;
}


/* À propos : police 15pt uniquement */
.content-accueil #contentBody,
.content-accueil #contentBody *{
  font-size: clamp(16px, calc(1.25rem * var(--sf-font-scale, 1)), 24px); /* 15pt */
  line-height: 1.35;
}
/* Footer en bas (sous l'image du Cervin) */
.site-footer{
  font-weight: 700;
  text-align: center;
  font-size: clamp(14px, calc(1rem * var(--sf-font-scale, 1)), 18px); /* 12pt */ /* 11pt */
  opacity: 0.80;
  padding: 50.0px 10px 18px; /* +17pt */
}
/* Centre logo + slogan */
.logo, .logo svg, .logo .slogan{
  text-align: center;
}
/* Confidentialité : emplacement image sous le texte */
.confidentialite-photo-slot{
  margin-top: calc(var(--sf-spacing, 12px) * 1.2);
  min-height: clamp(160px, 26vh, 300px);
}
/* Image fiche (dans les emplacements photo) */
.fiche-photo{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 18px;
  display: block;
}

/* Confidentialité : supprimer le cadre pointillé autour de l'image */

/* Centrage du bloc logo (sans agrandir) */
.brand img{
  width: auto;
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* Règle globale images (ne pas forcer une largeur) */
img{
  max-width: 100%;
  height: auto;
  display: block;
}
/* Tarifs : emplacement image sous le texte */
/* Tarifs : espace entre accroche et paragraphe */
.tarifs-spacer{
  height: 14px;
}
/* Tarifs : lien source OFS */
.tarifs-source{
  margin: 0 0 18px;
  font-size: 0.95em;
}
.tarifs-source a{
  text-decoration: underline;
}
/* Tarifs : ligne vide après la source */
.tarifs-source-spacer{
  height: 16px;
}
/* Tarifs : photo (consolidé) */
.tarifs-photo-slot{
  margin-top: calc(var(--sf-spacing, 12px) * 1.2);
  min-height: clamp(400px, 65vh, 780px);
  height: clamp(660px, 90vh, 840px);
  border: none;
  background: transparent;
  padding: 0;
  overflow: hidden;
}
.tarifs-photo-slot .fiche-photo{
  object-fit: contain;
  background: rgba(255,255,255,0.65);
  transition: transform 220ms ease;
  transform-origin: center;
}
.tarifs-photo-slot:hover .fiche-photo{
  transform: scale(1.18);
}
/* Formulaire Contact (panneau de droite) */
.contact-form{
  margin-top: calc(var(--sf-spacing, 12px) * 1.2);
  display: flex;
  flex-direction: column;
  gap: calc(var(--sf-spacing, 12px) * 1.0);
}

.form-row{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(var(--sf-spacing, 12px) * 1.0);
}

.form-field{
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-field label{
  font-weight: 600;
}

.form-field input,
.form-field textarea,
.form-field select{
  font-family: "Trebuchet MS", Arial, sans-serif;
  font-size: 14px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,0.18);
  background: rgba(255,255,255,0.92);
  outline: none;
}
.form-field select{
  padding-top: 8px;
  padding-bottom: 8px;
}

.form-field textarea{
  resize: vertical;
  min-height: clamp(80px, 12vh, 140px);
}

/* .form-field select : pas de min-height — height fixe géré par .select-compact */

.hint{
  font-size: clamp(11px, calc(0.75rem * var(--sf-font-scale, 1)), 14px);
  opacity: 0.75;
}

.btn-primary{
  align-self: flex-start;
  padding: calc(var(--sf-pad, 16px) * 0.65) var(--sf-pad, 16px);
  border-radius: 14px;
  border: 0;
  cursor: pointer;
  font-weight: 700;
  background: rgba(0,0,0,0.85);
  color: white;
  box-shadow: 0 10px 22px rgba(0,0,0,0.20);
  transition: transform 150ms ease;
}
.btn-primary:hover{
  transform: translateY(-1px);
}

.form-status{
  font-size: clamp(11px, calc(0.82rem * var(--sf-font-scale, 1)), 15px);
  min-height: calc(var(--sf-spacing,12px)*1.5);
  opacity: 0.85;
}

@media (max-width: 860px){
  .form-row{ grid-template-columns: 1fr; }
}
/* Select dropdown caret */
.form-field select{
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, rgba(0,0,0,0.55) 50%),
                    linear-gradient(135deg, rgba(0,0,0,0.55) 50%, transparent 50%),
                    linear-gradient(to right, rgba(0,0,0,0.10), rgba(0,0,0,0.10));
  background-position: calc(100% - 18px) calc(50% - 4px),
                       calc(100% - 12px) calc(50% - 4px),
                       calc(100% - 36px) 50%;
  background-size: 6px 6px, 6px 6px, 1px 60%;
  background-repeat: no-repeat;
  padding-right: calc(var(--sf-pad, 16px) * 2.75);
}
/* Astérisque champs obligatoires */
.req{
  color: #c00000;
  font-weight: 800;
}
.required-note{
  font-size: clamp(11px, calc(0.75rem * var(--sf-font-scale, 1)), 14px);
  opacity: 0.85;
  margin-top: 4px;
}
/* Select compact (même hauteur qu'un input) */
.select-compact{
  min-height: unset !important;
  height: 42px;
  padding-top: 8px;
  padding-bottom: 8px;
  line-height: 1.4;
}
/* Alignement hauteur champs Contact */
.contact-form .form-row input,
.contact-form .form-row select{
  height: 42px;
  line-height: 1.2;
}
.contact-form .form-row select.select-compact{
  min-height: 0 !important;
  height: 42px !important;
  padding-top: 8px;
  padding-bottom: 8px;
  line-height: 1.4;
}
/* Honeypot anti-spam */
.hp{
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}
/* Titres panneau droit +3pt */
#contentTitle{
  font-size: clamp(17px, calc(1.375rem * var(--sf-font-scale, 1)), 26px); /* 18px + ~3pt */
}
/* Contact : ligne d'intro + lien téléphone */
.contact-intro{
  margin: 0 0 12px;
}
.tel-link{
  text-decoration: underline;
  font-weight: 700;
}
/* Switch knob: coccinelle dans le cylindre quand actif */
.switch .slider:before{
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  border-radius: 999px;
  overflow: hidden;
}
.switch input:checked + .slider:before{
  background-image: url("assets/icons/coccinelle-knob.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 150% 150%;
  background-color: transparent;
  box-shadow: none;
  border: 0;
}
/* Confidentialite: image sous le texte, sans cadre pointille */
.confidentialite-photo-slot{
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
  min-height: 0 !important;
}
.confidentialite-photo-slot .fiche-photo{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 16px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.22);
}

/* Mobile: descendre le bloc marque (coccinelle + Swissfix + slogan) sans changer le desktop */
@media (max-width: 520px){
  .brand{
    padding-top: calc(26px + env(safe-area-inset-top));
    padding-bottom: calc(var(--sf-spacing, 12px) * 2.3);
  }
  /* Compense un peu pour éviter de descendre trop le contenu */
  .layout{
    margin-top: 2px;
  }
}

/* === PATCH Swissfix: afficher les images Services en ENTIER (pas de découpe) === */
.services-photo-wrap{
  align-items: center !important;   /* centre verticalement si il reste des marges */
}

.services-photo{
  height: auto !important;          /* empêche l'étirement qui force le recadrage */
  max-height: 100% !important;
  object-fit: contain !important;   /* affiche l'image entière */
  object-position: center center !important;
  background: rgba(255,255,255,0.55) !important;
}
/* ========================================================================== */


/* --- Boutique (TWINT) --- */
.shop-grid{display:grid;grid-template-columns:1fr;gap:14px;margin:14px 0;}
.shop-item{background:rgba(255,255,255,0.65);border-radius:14px;padding:14px;box-shadow:0 8px 18px rgba(0,0,0,0.06);}
.shop-title{font-weight:800;margin-bottom:6px;}
.shop-meta{opacity:0.9;margin-bottom:var(--sf-spacing,12px);}
.shop-qty{display:flex;align-items:center;gap:var(--sf-spacing,12px);}
.shop-qty input{width:90px;padding:8px 10px;border-radius:10px;border:1px solid rgba(0,0,0,0.15);}
.shop-options{margin:10px 0 4px;}
.shop-check{display:flex;align-items:center;gap:var(--sf-spacing,12px);font-weight:600;}
.shop-total{background:rgba(255,255,255,0.75);border-radius:14px;padding:14px;margin-top:var(--sf-spacing,12px);box-shadow:0 8px 18px rgba(0,0,0,0.06);}
.shop-ref{margin-top:6px;font-size:0.95em;opacity:0.9;}
.shop-note{margin-top:var(--sf-spacing,12px);font-size:0.95em;opacity:0.9;}
.shop-radio{display:flex;flex-direction:column;gap:calc(var(--sf-spacing,12px)*0.65);margin-top:8px;}


.blank-line{height:14px; line-height:14px;}


/* Boutique — Album écrans (placeholders) */
.album{ margin: calc(var(--sf-spacing,12px)*1.2) 0 calc(var(--sf-spacing,12px)*0.5); }
.album-title{
  font-weight: 700;
  margin: 6px 0 10px;
}
.album-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(var(--sf-spacing, 12px) * 1.0);
}
@media (min-width: 1100px){
  .album-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.album-card{
  border-radius: 14px;
  background: rgba(255,255,255,.75);
  box-shadow: 0 10px 24px rgba(0,0,0,.10);
  overflow: hidden;
}
.image-placeholder{
  display:flex;
  align-items:center;
  justify-content:center;
  height: clamp(80px, 14vh, 130px);
  font-weight: 700;
  color: rgba(0,0,0,.55);
  background: rgba(0,0,0,.04);
}
.album-caption{
  padding: calc(var(--sf-pad, 16px) * 0.65) calc(var(--sf-pad, 16px) * 0.75);
  font-size: clamp(11px, calc(0.82rem * var(--sf-font-scale, 1)), 15px);
  line-height: 1.25;
}


/* Swissfix - Carousel simple (Écrans iPhones) */
.sf-carousel{margin:calc(var(--sf-spacing,12px)*1.2) 0 calc(var(--sf-spacing,12px)*0.5); max-width:520px;}
.sf-carousel .sf-dot{position:absolute; left:-9999px;}
.sf-slides{position:relative; border-radius:14px; overflow:hidden;}
.sf-slide{display:none; padding:var(--sf-spacing,12px); border:1px solid rgba(0,0,0,.12); border-radius:14px; background:rgba(255,255,255,.85);}
.sf-img-placeholder{
  height:clamp(110px, 18vh, 180px);
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px dashed rgba(0,0,0,.25);
  background:rgba(255,255,255,.7);
  font-weight:600;
}
.sf-price{margin-top:var(--sf-spacing,12px); font-weight:700; font-size:14px;}

#sf_car_13:checked ~ .sf-slides .sf-slide[data-model="13"],
#sf_car_14:checked ~ .sf-slides .sf-slide[data-model="14"],
#sf_car_15:checked ~ .sf-slides .sf-slide[data-model="15"],
#sf_car_16:checked ~ .sf-slides .sf-slide[data-model="16"],
#sf_car_17:checked ~ .sf-slides .sf-slide[data-model="17"]{display:block;}

.sf-dots{display:flex; gap:calc(var(--sf-spacing,12px)*0.65); justify-content:center; margin-top:var(--sf-spacing,12px);}
.sf-dots label{
  width:8px; height:8px; border-radius:50%;
  background:rgba(0,0,0,.25);
  display:inline-block;
  cursor:pointer;
}
#sf_car_13:checked ~ .sf-dots label[for="sf_car_13"],
#sf_car_14:checked ~ .sf-dots label[for="sf_car_14"],
#sf_car_15:checked ~ .sf-dots label[for="sf_car_15"],
#sf_car_16:checked ~ .sf-dots label[for="sf_car_16"],
#sf_car_17:checked ~ .sf-dots label[for="sf_car_17"]{
  background:rgba(0,0,0,.65);
}


/* Boutique – carrousel écrans (images) */
.sf-slide-img{width:100%;height:auto;display:block;border-radius:18px;}


/* Force dropdown iPhone model */
#ecran-model, #ecran-model option { color:#111 !important; -webkit-text-fill-color:#111 !important; }


/* Images : rendu fidèle */
#ecran-carousel img,
.sf-carousel img,
.carousel img {
  width: 100%;
  max-width: clamp(600px, 90%, 960px);
  height: clamp(400px, 55vh, 860px);
  object-fit: contain;
  object-position: center;
  display: block;
  margin: 0 auto;

  filter: none;
  mix-blend-mode: normal;
  image-rendering: auto;
}

/* Mobile */
@media (max-width: 768px) {
  #ecran-carousel img,
  .sf-carousel img,
  .carousel img {
    height: clamp(300px, 42vh, 580px);
  }
}

/* === Carousel iPhone – fond blanc pur, couleurs naturelles === */
#ecran-carousel,
.sf-carousel,
.carousel {
  background: #ffffff;
  border-radius: 16px;
  padding: 0;                 /* IMPORTANT: pas de marge interne autour de l'image */
  box-sizing: border-box;
}

/* Conteneur slide : colle l'image en haut (supprime le blanc au-dessus) */
#ecran-carousel .carousel-item,
.sf-carousel .carousel-item,
.carousel .carousel-item {
  display: flex;
  align-items: flex-start;    /* image en haut */
  justify-content: center;
  height: clamp(400px, 55vh, 860px); /* proportionnel viewport */
}

/* Image : fidèle, non déformée, alignée en haut */
#ecran-carousel img,
.sf-carousel img,
.carousel img {
  width: auto;
  max-width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: top center;
  display: block;
  margin: 0 auto;

  filter: none;
  mix-blend-mode: normal;
  image-rendering: auto;
  background: #ffffff;
}

/* Mobile */
@media (max-width: 768px) {
  #ecran-carousel .carousel-item,
  .sf-carousel .carousel-item,
  .carousel .carousel-item {
    height: clamp(300px, 42vh, 580px);
  }
}

/* === Boutique / Accessoires === */
.acc-image-box{
  width: 100%;
  max-width: clamp(600px, 90%, 960px);
  height: clamp(300px, 42vh, 580px);
  margin: var(--sf-spacing, 12px) auto;
  background: #ffffff;
  border-radius: 16px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  box-sizing: border-box;
  padding: 0;
}
.acc-image{
  width: auto;
  max-width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: top center;
  display: block;
  margin: 0;
}
.acc-qty-field{
  max-width: clamp(600px, 90%, 960px);
  margin: 8px auto 0;
}
@media (max-width: 768px){
  .acc-image-box{ height: clamp(220px, 32vh, 400px); }
}

/* === Accessoires carousel === */
.acc-carousel {
  width: 100%;
  height: clamp(300px, 42vh, 580px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.acc-slide {
  max-width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: top center;
  display: none;
}

.acc-slide.active {
  display: block;
}

.acc-dots {
  display: flex;
  gap: calc(var(--sf-spacing, 12px) * 0.65);
  justify-content: center;
  align-items: center;
  padding: var(--sf-spacing, 12px) 0 0;
}

.acc-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  border: none;
  background: #cfcfcf;
  padding: 0;
  cursor: pointer;
}

.acc-dot.active {
  background: #555;
}

@media (max-width: 768px) {
  .acc-carousel { height: clamp(220px, 32vh, 400px); }
}

/* === Accessoires layout: image à gauche, description à droite === */
.acc-layout{
  display:flex;
  gap:calc(var(--sf-spacing,12px)*1.5);
  align-items:flex-start;
  width:100%;
  max-width: clamp(600px, 90%, 960px);
  margin: var(--sf-spacing, 12px) auto;
}

.acc-left{
  flex: 0 0 52%;
  max-width: clamp(300px, 55%, 560px);   /* réduit la largeur pour laisser la description */
}

.acc-right{
  flex: 1;
  min-width: clamp(180px, 22%, 260px);
}

.acc-image-box{
  margin: 0;          /* la marge est gérée par .acc-layout */
}

.acc-desc-box{
  background:#ffffff;
  border-radius:16px;
  padding:var(--sf-spacing,12px);
  border:1px solid #eee;
}

.acc-desc-title{
  margin:0 0 8px 0;
  font-size: clamp(15px, calc(1.1rem * var(--sf-font-scale, 1)), 22px);
}

.acc-desc-text{
  margin:0;
  line-height: 1.4;
}

/* Mobile: empile */
@media (max-width: 768px){
  .acc-layout{
    flex-direction: column;
  }
  .acc-left{
    max-width: 100%;
    flex: 1 1 auto;
  }
}


/* Patch layout accessoires (force colonne droite) */
.acc-layout{display:flex;flex-wrap:nowrap;align-items:flex-start;gap:calc(var(--sf-spacing,12px)*1.5);}
.acc-left{flex:0 0 52%;max-width:520px;}
.acc-right{flex:1;min-width:240px;}
@media (max-width:820px){
  .acc-layout{flex-direction:column !important;width:100% !important;}
  .acc-left{max-width:100% !important;flex:1 1 auto !important;width:100% !important;}
  .acc-right{min-width:0 !important;width:100% !important;}
}

/* === PATCH: Accessoires - supprimer le blanc sous l'image + points sous l'image === */
.acc-image-box{
  /* IMPORTANT: pas de hauteur fixe, sinon blanc sous l'image */
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: none !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
}

.acc-carousel{
  width: 100% !important;
  height: auto !important;              /* plus de hauteur fixe */
  display: block !important;
}

.acc-slide{
  width: 100% !important;
  height: auto !important;              /* image naturelle */
  max-height: clamp(260px, 38vh, 460px);                    /* limite visuelle */
  object-fit: contain !important;
  object-position: top center !important;
  display: none;
}

.acc-slide.active{ display: block; }

.acc-dots{
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;   /* points centrés */
  align-items: center !important;
  gap: 8px !important;
  padding: var(--sf-spacing,12px) 0 0 !important; /* en bas de l'image */
  margin: 0 !important;
}

/* Mobile */
@media (max-width: 768px){
  .acc-slide{ max-height: clamp(200px, 30vh, 360px); }
}

.iphone-desc-box{
  background:#fff;
  border:1px solid #eee;
  border-radius:16px;
  padding:var(--sf-spacing,12px);
  margin-top:var(--sf-spacing,12px);
}


/* === Ecrans iPhones description === */
.ecran-layout{
  display:flex;
  gap:calc(var(--sf-spacing,12px)*1.5);
  align-items:flex-start;
  width:100%;
  max-width: clamp(600px, 90%, 960px);
  margin: var(--sf-spacing, 12px) auto;
}
.ecran-left{ flex: 0 0 60%; }
.ecran-right{ flex: 1; min-width: clamp(180px, 24%, 280px); }
.ecran-desc-box{
  background:#ffffff;
  border:1px solid #eee;
  border-radius:16px;
  padding:var(--sf-spacing,12px);
}
.ecran-desc-box h3{ margin:0 0 calc(var(--sf-spacing,12px)*0.65) 0; font-size:clamp(15px,calc(1.1rem * var(--sf-font-scale,1)),22px); }
.ecran-desc-text{ margin:0; line-height:1.4; }

@media (max-width: 820px){
  .ecran-layout{ flex-direction:column !important;width:100% !important; }
  .ecran-left{ flex:1 1 auto !important;width:100% !important;max-width:100% !important; }
  .ecran-right{ min-width:0 !important;width:100% !important; }
}


/* Click-to-next carousel */
#acc-carousel img,
#ecran-carousel img,
.sf-carousel img{
  cursor: pointer;
}


/* Boutique highlight line */
.boutique-highlight{
  font-weight: 700;
  font-size: calc(1em + 3px); /* +3 points */
  line-height: 1.35;
  margin: calc(var(--sf-spacing, 12px) * 1.35) 0; /* ligne vide avant et après */
}

/* === PATCH alignements + tel link === */
.ecran-layout{ align-items:flex-start; }
.ecran-right{ padding-top:0 !important; }
.ecran-desc-box{ margin-top:0 !important; }
.ecran-desc-box h3{ margin-top:0 !important; }

.tel-link{
  color: inherit;
  text-decoration: underline;
  font-weight: 700;
}


/* Boutique: ligne vide */
.boutique-spacer{
  height: 14px;
}


/* Boutique: TWINT logo above phone */
.twint-mini{
  display:block;
  width:15%;
  height:auto;
  margin: 0 0 10px 0;
}


/* === Ecrans iPhones description offset === */
.ecran-desc-box{
  margin-top: calc(var(--sf-spacing,12px)*3.8); /* descendre la description pour s'aligner avec le haut de l'image */
}
@media (max-width: 768px){
  .ecran-desc-box{ margin-top: var(--sf-spacing, 12px); }
}

/* === Ecrans iPhones description align with image === */
.ecran-right{ padding-top:calc(var(--sf-spacing,12px)*3.8) !important; }
@media (max-width: 768px){ .ecran-right{ padding-top:var(--sf-spacing,12px) !important; } }


/* Accessoires: meta hidden (required for JS calc/ref) */
.acc-hidden-meta{ display:none; }


/* === Ecrans iPhones: image height 2/3 === */
.ecran-media .carousel-frame,
.ecran-media .carousel-frame img,
#iphoneCarousel .carousel-frame,
#iphoneCarousel img {
  max-height: clamp(180px, 28vh, 340px); /* réduit ~2/3 (ajuste selon ton layout) */
  height: auto;
  object-fit: contain;
}


/* Ecrans iPhones: dot active fallback */
.sf-dots label.active{
  outline: 2px solid rgba(0,0,0,0.25);
}


/* Ecrans iPhones: dots buttons (like Accessoires) */
.sf-dots{ display:flex; gap:calc(var(--sf-spacing,12px)*0.65); justify-content:center; align-items:center; margin-top:var(--sf-spacing,12px); }
.sf-dot-btn{
  width:10px; height:10px; border-radius:999px;
  border:1px solid rgba(0,0,0,0.25);
  background: rgba(0,0,0,0.08);
  padding:0;
  cursor:pointer;
}
.sf-dot-btn.active{
  background: rgba(0,0,0,0.55);
}


/* Ecrans iPhones layout (left image, right description) */
.ecran-layout{
  display:flex;
  gap:calc(var(--sf-spacing,12px)*2);
  align-items:flex-start;
}
.ecran-left{ flex:0 0 62%; }
.ecran-right{ flex:1 1 auto; }
.ecran-desc-box{ margin-top:0; }

.ecran-carousel .sf-dots{ justify-content:center; margin-top:var(--sf-spacing,12px); }


/* Accessoires: prix affiché avant les points */
.acc-price{
  font-weight: 700;
  font-size: clamp(15px, calc(1.1rem * var(--sf-font-scale, 1)), 22px);
  margin-top: var(--sf-spacing, 12px);
  margin-bottom: 6px;
}


/* Panier V1 (silencieux) */
.sf-cart-summary{
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 9999;
  background: rgba(255,255,255,0.96);
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 12px;
  padding: calc(var(--sf-pad, 16px) * 0.65) calc(var(--sf-pad, 16px) * 0.75);
  box-shadow: 0 10px 24px rgba(0,0,0,0.12);
  font-size: clamp(12px, calc(0.875rem * var(--sf-font-scale, 1)), 16px);
}


.sf-add-btn{
  margin-top: var(--sf-spacing, 12px);
  width: 100%;
}


/* Page Panier */
.sf-panier-table{
  width: 100%;
  border-collapse: collapse;
  margin-top: 12px;
}
.sf-panier-table th, .sf-panier-table td{
  padding: 10px 8px;
  border-bottom: 1px solid rgba(0,0,0,0.08);
  font-size: 14px;
}
.sf-panier-table th{
  text-align: left;
}
.sf-panier-table .right{
  text-align: right;
}
.sf-panier-actions{
  margin-top: 12px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
.sf-panier-empty{
  padding: 14px 12px;
  background: rgba(255,255,255,0.7);
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 12px;
  margin-top: 12px;
}


/* Espace pour éviter le double titre (les sections affichent déjà le titre) */
.tpl-title-spacer{ height: 10px; }


.sf-panier-qty{
  width: 70px;
  padding: 6px 6px;
  border: 1px solid rgba(0,0,0,0.25);
  border-radius: 6px;
  text-align: right;
}


/* Panier: bouton envoyer */
#sf-panier-send{ }


/* Panier: bouton supprimer ligne */
.sf-panier-remove{
  width: 34px;
  height: 34px;
  border: 1px solid rgba(0,0,0,0.25);
  background: rgba(255,255,255,0.9);
  border-radius: 8px;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
}
.sf-panier-remove:hover{
  background: rgba(255,255,255,1);
}

/* --- Options de livraison (Panier) --- */
.sf-panier-delivery{
  margin: 16px 0;
  padding: 14px 16px;
  background: rgba(0,0,0,0.03);
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,0.08);
}
.sf-delivery-label{
  font-weight: 600;
  font-size: 0.95em;
  margin: 0 0 10px 0;
}
.sf-delivery-option{
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  margin: 4px 0;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s;
  font-size: 0.95em;
}
.sf-delivery-option:hover{
  background: rgba(0,0,0,0.04);
}
.sf-delivery-option input[type="radio"]{
  accent-color: #34C759;
  width: 18px;
  height: 18px;
  cursor: pointer;
}
.sf-delivery-option span{
  user-select: none;
}
#sf-panier-livraison-row td{
  color: #555;
  font-style: italic;
  padding-top: 4px;
  border-top: 1px dashed rgba(0,0,0,0.1);
}


/* Contact submenu item (under Contact) */
.ios-item.ios-item-sub{
  margin-left: 16px;
  border-left: 3px solid rgba(0,0,0,0.08);
  padding-left: 12px;
}
.ios-item.ios-item-sub .ios-label{
  font-size: 0.95em;
}

/* --- TWINT (Commande) --- */
.twint-box{
  display:flex;
  flex-direction:column;
  gap:12px;
  border:1px solid rgba(0,0,0,.10);
  border-radius:16px;
  padding:14px;
  background:#fff;
}

.twint-head{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
}

.twint-logo{
  width:30%;
  min-width:120px;
  max-width:220px;
  height:auto;
  display:block;
}

.twint-mobile{
  font-weight:700;
  white-space:nowrap;
}

.twint-mobile a{
  color:inherit;
  text-decoration:none;
}

.twint-mobile a:hover{ text-decoration:underline; }

.twint-meta{
  margin-left:auto;
  min-width:190px;
  text-align:right;
  display:flex;
  flex-direction:column;
  gap:4px;
}

@media (max-width: 520px){
  .twint-logo{
    width:70%;
    min-width:180px;
    max-width:280px;
  }
  .twint-meta{
    margin-left:0;
    text-align:left;
    min-width:0;
  }
}

/* ===== Écrans iPhones : bouton compact ===== */
#sf-add-screen.btn-small{
  width: auto !important;
  min-width: 160px;
  height: 38px;
  padding: 0 14px;
  border-radius: 12px;
  font-weight: 800;
  letter-spacing: .2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}


/* --- Bouton Ajouter au panier (Formulaire écrans iPhone) --- */
.btn-add-panier-ecran,
#sf-add-screen{
  font-family: "Trebuchet MS", Trebuchet, Arial, sans-serif;
  font-size: 14px;
  font-weight: 400; /* NON gras */
}

/* Feedback visuel au clic */
@keyframes sfBtnBounce{
  0%   { transform: scale(1); }
  35%  { transform: scale(0.96); }
  70%  { transform: scale(1.03); }
  100% { transform: scale(1); }
}
.btn-add-panier-ecran.is-bouncing,
#sf-add-screen.is-bouncing{
  animation: sfBtnBounce 220ms ease;
}
.btn-add-panier-ecran.is-selected,
#sf-add-screen.is-selected{
  box-shadow: 0 10px 22px rgba(0,0,0,0.12);
}

/* Mobile: bouton confortable */
@media (max-width: 600px){
  .btn-add-panier-ecran,
  #sf-add-screen{
    padding: 10px 12px;
    border-radius: 12px;
  }
}


/* ============================= */
/* ALIGNEMENT LARGEUR (ECRANS)   */
/* ============================= */
.sf-carousel.ecran-carousel{
  max-width: 900px;
  margin: 14px auto 6px;
}

.sf-cta{
  max-width: 900px;
  margin: 14px auto 0;
}

/* Mobile: pleine largeur, cohérent */
@media (max-width: 768px){
  .sf-carousel.ecran-carousel,
  .sf-cta{
    max-width: 100%;
  }
}


/* ============================= */
/* BOUTON ACCESSOIRES – comme Écrans iPhones */
/* ============================= */

/* Police / taille / non gras */
#sf-add-acc{
  font-family: "Trebuchet MS", Trebuchet, Arial, sans-serif;
  font-size: 14px;
  font-weight: 400; /* NON gras */
}

/* Format premium proche du bouton écrans */
#sf-add-acc{
  min-width: 160px;
  height: 38px;
  padding: 0 14px;
  border-radius: 12px;
  letter-spacing: .2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Animation bounce + état sélectionné (réutilise les classes posées par cart-v1.js) */
#sf-add-acc.is-bouncing{
  animation: sfBtnBounce 220ms ease;
}
#sf-add-acc.is-selected{
  box-shadow: 0 10px 22px rgba(0,0,0,0.12);
}

/* Mobile: bouton confortable */
@media (max-width: 600px){
  #sf-add-acc{
    padding: 10px 12px;
    height: auto;
    border-radius: 12px;
  }
}


/* ===== Alignement bouton Accessoires (gauche + même largeur que Écrans) ===== */
#sf-add-acc{
  width: auto !important;     /* pas full width */
  min-width: 240px;           /* même base desktop que #sf-add-screen */
  margin-left: 0 !important;  /* aligné à gauche */
  margin-right: auto !important;
}

/* Si le parent applique un centrage, on force le bloc du bouton à démarrer à gauche */
#sf-add-acc.sf-add-btn{
  justify-content: flex-start;
}


/* ============================= */
/* PANIER – boutons premium comme Écrans iPhones */
/* ============================= */
.sf-panier-actions{
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  align-items: center;
  margin-top: 14px;
}

/* Base commune */
#sf-panier-send,
#sf-panier-clear{
  font-family: "Trebuchet MS", Trebuchet, Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;          /* NON gras */
  min-height: 46px;
  padding: 0 16px;
  border-radius: 14px;
  letter-spacing: .2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/* Bouton principal */
#sf-panier-send{
  border: 0;
  background: rgba(0,0,0,0.85);
  color: #fff;
  box-shadow: 0 14px 34px rgba(0,0,0,0.14);
  transition: transform 150ms ease, box-shadow 150ms ease, opacity 150ms ease;
}
#sf-panier-send:hover{
  transform: translateY(-1px);
  box-shadow: 0 18px 44px rgba(0,0,0,0.16);
}

/* Bouton secondaire */
#sf-panier-clear{
  background: rgba(255,255,255,0.92);
  color: rgba(0,0,0,0.85);
  border: 1px solid rgba(0,0,0,0.14);
  box-shadow: 0 10px 22px rgba(0,0,0,0.08);
  transition: transform 150ms ease, box-shadow 150ms ease, opacity 150ms ease;
}
#sf-panier-clear:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(0,0,0,0.10);
}

/* Mobile: boutons pleine largeur (propre) */
@media (max-width: 700px){
  .sf-panier-actions{
    flex-direction: column;
    align-items: stretch;
  }
  #sf-panier-send,
  #sf-panier-clear{
    width: 100%;
  }
}