/* Fiche produit — écrans Figma « 03 - Fiche produit » (1440), « 03 - Fiche produit - Mobile » (375),
   « Pop-In Accessoires » (1020 et 375) */

.page-fiche main { display: flex; flex-direction: column; gap: 64px; padding-bottom: 64px; }

/* ——— Descriptif produit ——— */
.produit { display: grid; grid-template-columns: minmax(0, 628px) minmax(0, 519px); justify-content: space-between; align-items: start; column-gap: 40px; }

.galerie { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; min-width: 0; }
.produit__infos { min-width: 0; }
.galerie__piste {
  display: flex;
  aspect-ratio: 1;
  border-radius: var(--r-carte);
  background: rgba(217, 217, 217, .4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.galerie__piste::-webkit-scrollbar { display: none; }
.galerie__diapo { position: relative; flex: 0 0 100%; margin: 0; overflow: hidden; scroll-snap-align: start; }
/* Une photo qui n'est pas carrée (photo en situation, au format paysage) remplit le cadre comme les autres. */
/* WooCommerce impose « height: auto » aux images : on rétablit le remplissage du cadre. */
.galerie .galerie__diapo > .photo { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Packshot détouré : entier, jamais rogné par le cadre carré. */
.galerie .photo.photo--entiere { object-fit: contain; }
.galerie__points { display: none; }

/* Flèches précédent / suivant, posées sur la photo (bureau et téléphone). */
.galerie__scene { position: relative; min-width: 0; }
.galerie__fleche {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-top: -22px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  color: var(--titre);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .12);
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, transform .2s ease;
}
.galerie__fleche:hover { background: var(--violet); color: var(--blanc); }
.galerie__fleche:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; }
/* À cheval sur le bord de la photo : elles ne masquent plus le produit. */
.galerie__fleche--precedente { left: -22px; }
.galerie__fleche--suivante { right: -22px; }
.galerie__vignettes { display: flex; justify-content: space-between; gap: 16px; }
.galerie__vignettes > li { flex: 0 1 140px; }
.galerie__vignette { display: block; width: 100%; border-radius: var(--r-bloc); }
.galerie__cadre { position: relative; display: block; aspect-ratio: 1; border-radius: var(--r-bloc); overflow: hidden; }
.galerie__cadre--gris { background: var(--gris-bordure); }
/* Liseré par-dessus la photo (un box-shadow inset passerait dessous) */
.galerie__cadre::after { content: ""; position: absolute; inset: 0; border: 2px solid transparent; border-radius: inherit; transition: border-color .15s ease; }
.galerie__vignette:hover .galerie__cadre::after { border-color: var(--lavande); }
.galerie__vignette[aria-current="true"] .galerie__cadre::after { border-color: var(--violet); }

.produit__infos { display: flex; flex-direction: column; gap: 30px; }
.produit__achat { display: flex; flex-direction: column; gap: 16px; padding-bottom: 30px; border-bottom: 1px solid var(--gris-bordure); }
.produit__entete { display: grid; gap: 5px; }
.produit__titre { font: 600 40px/48px var(--police-titre); color: var(--titre); min-height: 43px; }
.produit__sous-titre { font: 400 16px/24px var(--police-texte); color: var(--titre); }
.produit__avis { display: inline-flex; align-items: center; gap: 17px; align-self: flex-start; font: 400 14px/20px var(--police-texte); }
.produit__avis .icone { width: 76px; height: 11px; }
.produit__avis:hover span { text-decoration: underline; text-underline-offset: 3px; }

.liste-check li { position: relative; padding-left: 26px; font: 400 18px/26px var(--police-texte); color: var(--noir); }
.liste-check li::before { content: "✓"; position: absolute; left: 0; color: var(--corail); }

.produit__prix { padding-block: 12px; font: 600 30px/37.8px var(--police-texte); color: var(--titre); }
.alma { display: flex; align-items: center; min-height: 80px; padding: 30px 10px; border: 1px solid var(--gris-bordure); border-radius: 6px; font: 500 16px/20.2px var(--police-texte); color: #000; }

.achat { display: flex; flex-direction: column; gap: 16px; }
.choix-taille { display: flex; align-items: center; gap: 12px; margin: 0; padding: 12px 0; border: 0; min-width: 0; }
.choix-taille__legende { float: left; width: 53px; margin-right: 1px; padding: 0; font: 400 18px/26px var(--police-texte); color: #000; }
.choix-taille__options { display: flex; flex-wrap: wrap; gap: 12.6px; }
.choix-taille__guide { margin-left: auto; font: 400 16px/22px var(--police-texte); color: #1592D0; text-decoration: underline; text-underline-offset: 2px; }
.pastille-choix { position: relative; cursor: pointer; }
.pastille-choix input { position: absolute; inset: 0; opacity: 0; cursor: pointer; margin: 0; }
.pastille-choix span {
  display: grid;
  place-items: center;
  min-width: 50px;
  height: 50px;
  padding: 10px;
  border: 1px solid var(--gris-bordure);
  border-radius: 10px;
  font: 600 20px/26px var(--police-texte);
  color: var(--titre);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.pastille-choix:hover span { border-color: var(--lavande); }
.pastille-choix input:checked + span { border-color: var(--violet); box-shadow: inset 0 0 0 1px var(--violet); color: var(--violet); }
.pastille-choix input:focus-visible + span { outline: 2px solid var(--violet); outline-offset: 2px; }
.achat__bouton { align-self: flex-start; gap: 16px; padding: 20px 40px; font-size: 20px; line-height: 25.2px; }
.achat__icone { width: 23px; height: 26px; }

/* Extensions & accessoires */
.accessoires { display: flex; flex-direction: column; gap: 21px; }
.accessoires__titre { font: 600 24px/28.8px var(--police-titre); color: var(--titre); min-height: 30.5px; }
.accessoires__liste { display: grid; gap: 14px; }
.accessoire {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 24px 12px 12px;
  border-radius: 10px;
  background: rgba(217, 217, 217, .4);
}
.accessoire__visuel { position: relative; flex: none; width: 100px; height: 100px; border-radius: 10px; overflow: hidden; }
.accessoire__texte { flex: 1; display: grid; gap: 8px; min-width: 0; padding-left: 8.5px; }
.accessoire__nom { font: 600 18px/22.7px var(--police-texte); color: #000; }
.accessoire__desc { font: 300 18px/26px var(--police-texte); color: #000; }
.accessoire__prix { font: 600 22px/27.7px var(--police-texte); color: var(--titre); }
.accessoire__ajout {
  flex: none;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--corail);
  color: var(--blanc);
  font: 500 24px/1 var(--police-texte);
  padding-bottom: 2px;
  transition: background-color .2s ease;
}
.accessoire__ajout:hover { background: var(--corail-survol); }

/* Conseiller */
.conseiller { display: flex; align-items: flex-start; gap: 4px; padding: 24px 30px; border-radius: 10px; background: var(--lavande); color: var(--blanc); }
.conseiller__texte { flex: 0 1 349px; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.conseiller__titre { font: 600 28px/33.6px var(--police-titre); min-height: 38.7px; }
.conseiller__desc { max-width: 337px; min-height: 78px; font: 400 16px/20px var(--police-texte); }
.conseiller__cta { gap: 10px; padding: 14px 30px; }
.conseiller__cta .icone { width: 24px; height: 24px; }
.conseiller__portrait { position: relative; flex: none; width: 100px; height: 100px; border-radius: 50%; overflow: hidden; }

/* ——— Onglets ——— */
.onglets__liste { display: flex; height: 50px; }
.onglets__onglet { padding: 15px 30px; font: 400 18px/22.7px var(--police-texte); color: #000; border-bottom: 2px solid transparent; margin-top: -1.5px; }
.onglets__onglet[aria-selected="true"] { font-weight: 600; border-bottom-color: var(--corail); }
.onglets__onglet:hover { border-bottom-color: rgba(200, 105, 84, .35); }
.onglets__onglet[aria-selected="true"]:hover { border-bottom-color: var(--corail); }
.onglets__panneau { margin-top: 36px; }
.onglets__panneau:not(.est-actif) { display: none; }
.onglets__entete { display: none; }
.bienfaits { display: grid; grid-template-columns: repeat(2, minmax(0, 620px)); justify-content: space-between; gap: 16px 40px; }
/* align-items: center : sans lui, un texte court reste collé en haut du bloc de 150 px.
   Sur un texte long (cas de la maquette) le rendu est identique. */
.bienfait { display: flex; align-items: center; gap: 30px; min-height: 150px; padding: 20px; border-radius: 10px; background: rgba(217, 217, 217, .4); }
.bienfait .icone,
/* Icône venant d'un champ produit : WordPress sort width="1" height="1" sur un SVG sans métadonnées,
   d'où une image écrasée si le thème ne fixe pas la taille. */
.bienfait .bienfait__icone { flex: none; width: 50px; height: 50px; object-fit: contain; }
.bienfait p { font: 400 16px/20px var(--police-texte); color: #000; }
.bienfait strong { display: block; font-weight: 700; }
.texte-riche { font: 400 18px/26px var(--police-texte); color: var(--noir); max-width: 820px; }
.texte-riche p + p { margin-top: 1em; }

/* ——— Notice d'utilisation ——— */
.notice { width: 100%; max-width: calc(var(--contenu) + 2 * var(--gouttiere)); margin-inline: auto; padding: 12px var(--gouttiere); }
.notice__titre { text-align: center; min-height: 50px; }
.notice__liste { display: flex; justify-content: space-between; gap: 24px; margin-top: 24px; }
.notice__etape { position: relative; flex: 0 1 302px; display: flex; flex-direction: column; align-items: center; }
.notice__photo { position: relative; display: block; width: 100%; height: 200px; border-radius: var(--r-bloc); overflow: hidden; }
.notice__nom { margin-top: 24px; padding: 10px 0 0; font: 600 22px/22px var(--police-texte); color: var(--noir); text-align: center; }
.notice__numero {
  position: absolute;
  top: 165px;
  left: calc(50% - 25px);
  display: grid;
  place-items: center;
  width: 50.2px;
  height: 50.2px;
  border-radius: 50%;
  background: var(--violet);
  color: var(--blanc);
  font: 500 20px/20px var(--police-texte);
}
.notice__texte { margin-top: 12px; padding: 0 10px 10px; font: 400 18px/26px var(--police-texte); text-align: center; }
.carrousel-points { display: none; }

/* ——— Caution médicale (variante fiche) ——— */
.caution--fiche { border-color: var(--violet); }
.caution--fiche .caution__visuel { width: 356px; }
.caution--fiche .caution__photo { width: 351px; }
.caution__photo { position: relative; }
.caution--fiche .caution__macaron { right: -43px; top: -25px; }
.caution__appuye { font-weight: 500 !important; }

/* ——— Argumentaire (bloc vidéo) ——— */
.argumentaire { display: flex; align-items: center; gap: 92px; }
.argumentaire__texte { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.argumentaire__texte .titre-section { margin-bottom: -14px; }
.argumentaire__desc { font: 300 20px/26px var(--police-texte); color: var(--noir); }
.argumentaire__cta { padding: 14px 40px; min-height: 47.1px; }
.argumentaire__visuel { position: relative; isolation: isolate; flex: none; display: grid; place-items: center; width: 628px; height: 437px; border-radius: var(--r-carte); overflow: hidden; }
.argumentaire__visuel > .photo { position: absolute; inset: 0; z-index: -2; }
.argumentaire__visuel::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(12, 8, 6, .2); }
.lecture-video { display: grid; place-items: center; width: 100px; height: 100px; border-radius: 50%; transition: transform .2s ease; }
.lecture-video .icone { width: 100px; height: 100px; }
.lecture-video:hover { transform: scale(1.06); }

/* ——— La technologie Fitem ——— */
.technologie__titre { text-align: center; min-height: 56px; }
.technologie__grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 60px 24px; margin-top: 24px; }
.techno { display: flex; flex-direction: column; gap: 12px; }
.techno__visuel { position: relative; isolation: isolate; display: grid; place-items: center; height: 400px; border-radius: var(--r-carte); overflow: hidden; background: var(--bleu-pale, #E3E8F4); }
.techno__visuel > .photo:not(.photo--cadre) { position: absolute; inset: 0; }
.techno__visuel > .photo { z-index: -2; }
/* Visuel entier et centré dans son cadre : la règle « .woocommerce img { height: auto } » de WooCommerce
   écrasait la hauteur et collait l'image en haut ; « contain » évite de rogner les schémas et vidéos. */
.techno__visuel > .photo:not(.photo--cadre) { height: 100%; object-fit: contain; }
.techno--video .techno__visuel::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(0, 0, 0, .3); }
.techno__nom { font: 600 18px/22px var(--police-texte); color: #000; }
.techno__texte { font: 400 16px/22px var(--police-texte); color: #000; }

/* ——— Ventes croisées ——— */
/* ——— Engagements et guides ——— */
.fiche__engagements { padding-block: 9.5px; }
.fiche__engagements .engagements { margin-top: 0; }
.fiche__engagements .engagements br { display: none; }
.page-fiche .guides { padding-bottom: 64px; }
.page-fiche main { padding-bottom: 0; }

/* ——— Pop-in accessoire ——— */
.popin-accessoire {
  width: min(1020px, calc(100% - 32px));
  max-width: none;
  min-height: 628px;
  padding: 98px 40px 40px;
  border: 0;
  border-radius: 0;
  background: var(--blanc);
  box-shadow: var(--ombre-popin);
  color: var(--noir);
}
.popin-accessoire::backdrop { background: rgba(35, 35, 35, .5); }
.popin-accessoire[open] { animation: popin-apparition .28s cubic-bezier(0, 0, .6, 1); }
.popin-accessoire[open]::backdrop { animation: voile-apparition .28s ease; }
@keyframes popin-apparition { from { opacity: 0; transform: translateY(16px) scale(.98); } }
@keyframes voile-apparition { from { opacity: 0; } }
.popin-accessoire__fermer { position: absolute; top: 20px; right: 23px; display: grid; place-items: center; width: 32px; height: 32px; }
.popin-accessoire__fermer .icone { width: 22px; height: 22px; }
.popin-accessoire__contenu { display: flex; gap: 32px; align-items: flex-start; }
.popin-accessoire__visuel { flex: none; width: 411px; height: 337px; border-radius: var(--r-carte); background: rgba(217, 217, 217, .4); overflow: hidden; }
.popin-accessoire__descriptif { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.popin-accessoire__titre { font: 600 32px/38.4px var(--police-titre); color: var(--titre); }
.popin-accessoire__prix { font: 700 30px/37.8px var(--police-texte); color: #000; }
.achat--popin { gap: 24px; }
.choix-taille--modele { padding: 0; gap: 12.7px; }
.choix-taille--modele .choix-taille__legende { width: 76px; }
.choix-taille--modele .pastille-choix span { font-size: 18px; }

/* La colonne visuels suit le défilement tant que la colonne d'achat est plus haute.
   Uniquement quand la fiche est réellement sur deux colonnes (à partir de 1024 px) : en dessous,
   les blocs sont empilés et une galerie collée recouvrirait le texte. Désactivé aussi sur les
   écrans peu hauts, où elle masquerait le reste. */
@media (min-width: 1024px) and (min-height: 700px) {
  .galerie { position: sticky; top: 24px; align-self: start; }
}

/* ——— Tablette ——— */
@media (max-width: 1279px) and (min-width: 768px) {
  .produit { grid-template-columns: minmax(0, 1fr) minmax(0, 440px); }
  .argumentaire { gap: 48px; }
  .argumentaire__visuel { width: 50%; height: auto; aspect-ratio: 628 / 437; }
  .notice__nom { font-size: 20px; line-height: 24px; }
  .notice__texte { font-size: 16px; line-height: 22px; }
  .bienfaits { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .caution--fiche .caution__visuel, .caution--fiche .caution__photo { width: 100%; }
  .caution--fiche .caution__visuel { flex: 0 1 36%; }
  .popin-accessoire__visuel { width: 40%; height: auto; aspect-ratio: 411 / 337; }
}
@media (max-width: 1023px) and (min-width: 768px) {
  .onglets__onglet { padding: 15px 12px; font-size: 16px; }
  .bienfaits { grid-template-columns: 1fr; }
  .bienfait { min-height: 0; }
  .produit { grid-template-columns: 1fr; row-gap: 40px; }
  .galerie { max-width: 628px; }
  .notice__liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; }
  .notice__etape { flex: none; }
  .technologie__grille { gap: 40px 24px; }
  .techno__visuel { height: auto; aspect-ratio: 628 / 400; }
  .argumentaire { flex-direction: column-reverse; align-items: stretch; }
  .argumentaire__visuel { width: 100%; }
  .popin-accessoire__contenu { flex-direction: column; }
  .popin-accessoire__visuel { width: 100%; }
}

/* ——— Mobile ——— */
@media (max-width: 767px) {
  .page-fiche main { gap: 24px; }
  .fil-ariane { min-height: 64px; padding-block: 12px; color: var(--noir); }
  .fil-ariane + .produit { margin-top: -24px; }

  .produit { grid-template-columns: 1fr; row-gap: 0; padding-inline: 16px; }
  .galerie { gap: 16px; }
  /* Téléphone : pas de flèches, la photo suivante dépasse sur la droite pour inviter à glisser. */
  .galerie__piste { aspect-ratio: auto; gap: 10px; border-radius: 0; background: none; }
  .galerie__diapo { flex-basis: 86%; aspect-ratio: 1; border-radius: var(--r-bloc); background: rgba(217, 217, 217, .4); }
  .galerie__diapo:only-child { flex-basis: 100%; }
  .galerie__fleche { display: none; }
  .galerie__vignettes { display: none; }
  .galerie__points { display: flex; justify-content: center; gap: 6px; }
  .galerie__points span { width: 8px; height: 8px; border-radius: 10px; background: var(--gris-bordure); transition: width .2s ease, background-color .2s ease; }
  .galerie__points span.est-actif { width: 16px; background: var(--corail); }

  .produit__infos { gap: 24px; margin-top: 16px; }
  .produit__achat { gap: 24px; padding-bottom: 0; border-bottom: 0; }
  .produit__entete { gap: 4px; }
  .produit__titre { font-size: 28px; line-height: 33.6px; min-height: 0; }
  .produit__sous-titre { color: var(--noir); }
  .produit__avis { gap: 8px; }
  .produit__avis .icone { width: 68px; height: 12px; }
  .produit__atouts { display: grid; gap: 4px; }
  .liste-check li { padding-left: 22px; }
  .produit__prix { padding: 0; margin-bottom: -16px; font-size: 32px; line-height: 40.3px; }
  .alma { min-height: 44px; padding: 12px; border-radius: 8px; background: var(--blanc); }
  .achat { gap: 24px; }
  .choix-taille { position: relative; display: block; padding: 0; }
  .choix-taille__legende { float: left; width: auto; margin: 0; }
  .choix-taille__guide { position: absolute; top: 4px; right: 0; font-size: 14px; line-height: 17.6px; }
  .choix-taille__options { clear: both; gap: 12px; padding-top: 10px; }
  .pastille-choix span { min-width: 48px; height: 48px; padding: 12px; border-radius: 8px; background: var(--blanc); font-size: 18px; line-height: 22.7px; }
  .achat__bouton { align-self: stretch; gap: 10px; padding: 16px 30px; font-size: 16px; line-height: 20.2px; }
  .achat__icone { width: 17.4px; height: 20px; }

  .accessoires { gap: 16px; padding-block: 12px; }
  .accessoires__titre { font-size: 22px; line-height: 26.4px; min-height: 0; }
  .accessoires__liste { gap: 12px; }
  .accessoire { gap: 17px; padding: 12px 8px; }
  .accessoire__visuel { width: 70px; height: 70px; }
  .accessoire__texte { gap: 2px; padding-left: 0; }
  .accessoire__nom { font-size: 16px; line-height: 20.2px; }
  .accessoire__desc { font-size: 14px; line-height: 26px; }
  .accessoire__ajout { width: 34px; height: 34px; }

  .conseiller { gap: 4px; padding: 16px; }
  .conseiller__texte { flex: 1; gap: 10px; }
  .conseiller__titre { font: 700 20px/24px var(--police-titre); min-height: 0; }
  .conseiller__desc { font-size: 14px; line-height: 20px; }
  .conseiller__portrait { width: 70px; height: 70px; }

  .onglets { padding-inline: 16px; }
  .onglets__liste { display: none; }
  .onglets__panneau, .onglets__panneau:not(.est-actif) { display: block; margin-top: 0; }
  .onglets__entete { display: block; }
  .onglets__accordeon {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 56px;
    padding: 16px 4px;
    border-bottom: 1px solid #E5E7EB;
    font: 600 16px/20.2px var(--police-texte);
    color: var(--noir);
  }
  .onglets__accordeon[aria-expanded="true"] { color: var(--corail); border-bottom-color: var(--corail); }
  .onglets__accordeon .icone { width: 24px; height: 24px; transition: transform .2s ease; }
  .onglets__accordeon[aria-expanded="true"] .icone { transform: rotate(45deg); }
  .onglets__contenu:not(.est-ouvert) { display: none; }
  .onglets__contenu { padding: 16px 0; }
  .bienfaits { grid-template-columns: 1fr; gap: 12px; }
  .bienfait { display: grid; grid-template-columns: 50px 1fr; align-items: center; gap: 12px; min-height: 0; padding: 16px; border-radius: var(--r-bloc); }
  .bienfait p { display: contents; }
  .bienfait strong { font: 600 16px/20.2px var(--police-texte); color: var(--noir); }
  .bienfait p span { grid-column: 1 / -1; font: 400 14px/20px var(--police-texte); color: var(--titre); }
  .texte-riche { font-size: 16px; line-height: 24px; }

  .notice { padding: 32px 0 40px; background: var(--fond-mobile); }
  .notice__titre { padding-inline: 16px; font-size: 24px; line-height: 30px; min-height: 0; }
  .notice__liste {
    justify-content: flex-start;
    gap: 16px;
    margin-top: 24px;
    padding: 0 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 16px;
    scrollbar-width: none;
  }
  .notice__liste::-webkit-scrollbar { display: none; }
  .notice__etape { flex: 0 0 280px; align-items: stretch; gap: 16px; padding: 12px; border: 1px solid #E8E8E8; border-radius: var(--r-bloc); background: var(--blanc); scroll-snap-align: start; }
  .notice__photo { height: 160px; border-radius: 10px; }
  .notice__nom { display: flex; align-items: center; gap: 8px; margin: 0; padding: 0; font: 600 18px/22.7px var(--police-texte); text-align: left; }
  .notice__numero { position: static; flex: none; width: 30px; height: 30px; font: 700 12px/15.1px var(--police-texte); }
  .notice__texte { margin: 0; padding: 0; font: 400 14px/17.6px var(--police-texte); color: var(--titre); text-align: left; }
  .carrousel-points { display: flex; justify-content: center; gap: 6px; margin-top: 24px; }
  .carrousel-points span { width: 8px; height: 8px; border-radius: 10px; background: var(--gris-bordure); transition: width .2s ease, background-color .2s ease; }
  .carrousel-points span.est-actif { width: 16px; background: var(--corail); }

  .caution--fiche { border-color: var(--lavande); }
  .caution--fiche .caution__visuel, .caution--fiche .caution__photo { width: auto; }
  .caution--fiche .caution__macaron { top: -27px; right: 5px; }

  .argumentaire { flex-direction: column-reverse; align-items: stretch; gap: 20px; padding-block: 32px; }
  .argumentaire__texte { gap: 20px; }
  .argumentaire__texte .titre-section { margin: 0; }
  .argumentaire__desc { font: 400 18px/26px var(--police-texte); }
  .argumentaire__cta { align-self: stretch; padding: 16px 30px; }
  .argumentaire__visuel { width: 100%; height: 240px; border-radius: var(--r-bloc); }
  .argumentaire__visuel::before { background: rgba(0, 0, 0, .2); }
  .lecture-video, .lecture-video .icone { width: 70px; height: 70px; }

  .technologie__titre { font-size: 24px; line-height: 28.8px; min-height: 0; }
  .technologie__grille { grid-template-columns: 1fr; gap: 24px; padding-bottom: 24px; }
  .techno__visuel { height: 218px; }
  .techno--video .lecture-video { display: none; }
  .techno__nom, .techno__texte { color: var(--noir); }


  .ventes-croisees__titre { font-size: 26px; line-height: 30px; min-height: 0; }
  /* Ventes croisées non dessinées en mobile : cartes compactes empilées, les 3 produits restent visibles */
  .ventes-croisees__liste { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 20px; }
  .ventes-croisees .carte-produit { flex-direction: row; min-height: 0; height: auto; padding: 0; }
  .ventes-croisees .carte-produit__visuel { flex: none; display: grid; place-items: center; width: 120px; height: auto; aspect-ratio: auto; min-height: 140px; padding: 0; border-radius: 16px 0 0 16px; }
  .ventes-croisees .carte-produit__cadre { width: 100px; height: 106px; aspect-ratio: auto; }
  .ventes-croisees .carte-produit__etiquette { position: absolute; top: 12px; left: 132px; margin: 0; height: 24px; padding: 2px 10px; font-size: 12px; line-height: 20px; }
  .ventes-croisees .carte-produit__texte { flex: 1; justify-content: center; gap: 4px; padding: 12px 14px 12px 12px; }
  .ventes-croisees .carte-produit:has(.carte-produit__etiquette) .carte-produit__texte { padding-top: 44px; }
  .ventes-croisees .carte-produit__nom { font-size: 18px; line-height: 22px; }
  .ventes-croisees .carte-produit__nom br { display: none; }
  .ventes-croisees .carte-produit__specs { font-size: 13px; line-height: 18px; }
  .ventes-croisees .carte-produit__desc { display: none; }
  .ventes-croisees .carte-produit__prix { font-size: 20px; line-height: 25px; }

  .fiche__engagements { padding-block: 0; }
  .fiche__engagements .engagements { margin-top: 0; padding-top: 12px; }
  .page-fiche .guides { padding-bottom: 32px; }

  .popin-accessoire { width: 100%; height: 100%; max-height: none; min-height: 0; margin: 0; padding: 70px 16px 24px; box-shadow: none; overflow-y: auto; }
  .popin-accessoire[open] { animation-name: popin-montee; }
  @keyframes popin-montee { from { transform: translateY(100%); } }
  .popin-accessoire__fermer { top: 19px; right: 11px; }
  .popin-accessoire__contenu { flex-direction: column; gap: 24px; }
  .popin-accessoire__visuel { width: 100%; height: 281px; border-radius: var(--r-bloc); }
  .popin-accessoire__descriptif { gap: 16px; align-self: stretch; }
  .popin-accessoire__titre { font-size: 28px; line-height: 33.6px; }
  .achat--popin { gap: 24px; align-self: stretch; }
  .choix-taille--modele .choix-taille__options { padding-top: 6px; }
  .choix-taille--modele .choix-taille__options { gap: 13px; }
  .choix-taille--modele .pastille-choix span { height: 50px; padding: 10px; border-radius: 10px; }
}

/* Très petits écrans (320 px) : le bouton « Contacter Sofian » et le portrait ne tiennent pas côte à côte */
@media (max-width: 359px) {
  .conseiller__portrait { width: 56px; height: 56px; }
  .conseiller__cta { padding-inline: 18px; }
}

/* ——— Avis clients de la fiche ——— */
.avis-produit { margin-top: 48px; }
.avis-produit__entete { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px 24px; }
.avis-produit__synthese { display: flex; align-items: center; gap: 10px; font: 400 15px/22px var(--police-texte); color: #6B6B6B; }
.avis-produit__synthese strong { font: 600 20px/26px var(--police-titre); color: var(--titre); }
.avis-produit__synthese strong span { font-size: 14px; color: #6B6B6B; }
.avis-produit__liste { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 24px; }
.avis-produit__tous { display: inline-block; margin-top: 20px; font: 500 15px/22px var(--police-texte); color: var(--violet); }
.avis-produit__tous:hover { text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 1023px) and (min-width: 768px) {
  .avis-produit__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .avis-produit { margin-top: 32px; }
  .avis-produit__liste { grid-template-columns: 1fr; gap: 16px; margin-top: 16px; }
  .avis-carte { padding: 18px; }
}