/* Deep Beauty — Grand bandeau, sections, pied de page, panier flottant, apparition. */
/* ---------- Grand bandeau (diaporama) ---------- */
.heros { position: relative; height: 100vh; height: 100svh; min-height: 640px; overflow: hidden; background: var(--fond-sombre); color: #fff; }
.heros-diapo { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity var(--duree-fondu) ease, visibility 0s linear var(--duree-fondu); }
.heros-diapo.est-active { opacity: 1; visibility: visible; transition: opacity var(--duree-fondu) ease; }
.heros-fond { position: absolute; inset: 0; background: center / cover no-repeat; will-change: transform; transform: translate3d(0, calc(var(--defil, 0) * 14%), 0) scale(calc(1 + var(--defil, 0) * 0.06)); } /* --defil : 0 en haut de page, 1 quand le bandeau est sorti (posé par le JavaScript) */
.heros-fond video { width: 100%; height: 100%; object-fit: cover; }
.heros-voile { position: absolute; inset: 0; background: linear-gradient(46deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.1) 29%, rgba(0, 0, 0, 0) 100%); }
.heros-texte { position: absolute; left: 0; right: 0; top: 33%; width: min(900px, calc(100% - 40px)); margin-inline: auto; text-align: center; opacity: calc(1 - var(--defil, 0) * 1.5); transform: translate3d(0, calc(var(--defil, 0) * -60px), 0); } /* hero centré du site Deep Beauty */
.heros-titre { padding: 0 0 15px; font-family: var(--police-titre); font-weight: 700; font-size: clamp(40px, 6.5vw, 66px); line-height: 1.1; letter-spacing: 0; }
/* Titre en logo (EDNA, ONA) : même hauteur de boîte que le titre en texte, pour que l'accroche ne bouge pas d'une diapositive à l'autre. */
.heros-titre-logo { display: flex; align-items: center; justify-content: center; min-height: 100px; }
.heros-logo { display: block; height: 100px; width: auto; max-width: 100%; object-fit: contain; object-position: center; }
.heros-accroche { font-family: var(--police-titre); font-weight: 300; font-size: 18px; line-height: 1.6; }
.heros-paragraphe { margin-top: 24px; font-family: var(--police-titre); font-weight: 300; font-size: 18px; line-height: 1.6; }
.heros-diapo.est-active .heros-texte > * { animation: monter 1s ease both; }
.heros-diapo.est-active .heros-accroche { animation-delay: 0.15s; }
.heros-diapo.est-active .heros-paragraphe { animation-delay: 0.3s; }
.heros-bouton { position: absolute; left: 50%; bottom: 68px; z-index: 2; display: inline-flex; align-items: center; gap: 10px; height: 46px; padding: 0 30px; border: 2px solid #fff; border-radius: var(--rayon-pilule); background: transparent; font-family: var(--police-titre); font-weight: 700; font-size: 12px; letter-spacing: 0.04em; opacity: calc(1 - var(--defil, 0) * 1.6); transform: translateX(-50%); transition: background 0.25s, color 0.25s, transform 0.25s var(--ease-sortie); }
.heros-bouton .icone { width: 17px; height: 17px; }
.heros-bouton:hover { background: #fff; color: var(--encre); }
.heros-compteur { display: none; } /* le hero Deep Beauty n'a pas de compteur de diapositives */
.heros-compteur strong { font-size: 25px; line-height: 35px; }
.heros-compteur span { padding-left: 5px; vertical-align: top; font-size: 15px; line-height: 25px; color: rgba(255, 255, 255, 0.5); }
/* Navigation : flèche précédente, vignettes, flèche suivante, centrées en bas du bandeau. */
.heros-navigation { display: none; } /* ni de navigation : un seul hero centré */
.heros-vignettes { display: flex; gap: 35px; }
.heros-vignette { position: relative; width: 100px; height: 70px; overflow: hidden; border: 2px solid transparent; border-radius: 4px; opacity: 0.75; transition: opacity 0.25s, border-color 0.25s; }
.heros-vignette img { width: 100%; height: 100%; object-fit: cover; }
.heros-vignette:hover, .heros-vignette.est-active { opacity: 1; border-color: rgba(255, 255, 255, 0.8); }
.heros-fleche { display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid rgba(250, 242, 250, 0.45); border-radius: 50%; background: rgba(0, 0, 0, 0.25); color: #fff; transition: background 0.25s, color 0.25s; }
.heros-fleche .icone { width: 20px; height: 20px; }
.heros-fleche:hover { background: #fff; color: #000; }
.heros-fleche-texte, .heros-separateur { display: none; }

/* ---------- Sections ---------- */
main { background: var(--fond-sombre); }
.titre-section { margin: 0 auto 20px; max-width: var(--largeur-texte); text-align: center; font-family: var(--police-titre); font-weight: 500; font-size: 36px; line-height: 46px; color: var(--encre); }
.conteneur { max-width: var(--largeur-texte); margin: 0 auto; }
.conteneur-texte { margin-bottom: 70px; text-align: center; font-family: var(--police-titre); font-weight: 300; font-size: 17px; line-height: 1.7; color: var(--texte); }
.conteneur-texte p + p { margin-top: 14px; }
/* Pages légales : texte long, lu de gauche à droite et plus serré (mentions légales, vie privée, CGV). */
.conteneur-legal { text-align: left; font-size: 16px; line-height: 1.65; }
.conteneur-legal p + p { margin-top: 10px; }
.conteneur-texte strong { font-weight: 500; color: var(--encre); }
.bouton { display: inline-block; padding: 14px 28px; border: 2px solid var(--encre); border-radius: var(--rayon-pilule); background: transparent; font-family: var(--police-titre); font-weight: 700; font-size: 12px; line-height: 15px; letter-spacing: 0.04em; color: var(--encre); transition: background 0.25s, color 0.25s, transform 0.25s var(--ease-sortie); }
.bouton:hover { background: var(--encre); color: #fff; }
.bouton-clair { border-color: #fff; color: #fff; }
.bouton-clair:hover { background: #fff; color: var(--encre); }

/* Introduction et produits */
.intro { position: relative; padding: 80px 20px calc(80px + var(--recouvrement)); border-radius: var(--rayon-section) var(--rayon-section) 0 0; background: var(--gris-fond); } /* le motif de points est la couche en dérive .intro::before (15-effets.css) */
.titre-produits { margin-bottom: 24px; }
.cartes-produits { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: var(--largeur-texte); margin: 0 auto; }
.carte-produit { display: flex; flex-direction: column; align-items: center; padding-bottom: 20px; overflow: hidden; border: 1px solid var(--bordure-carte); border-radius: var(--rayon-carte); background: #fff; text-align: center; }
.carte-visuel { display: flex; align-items: flex-end; justify-content: center; width: 100%; height: 279px; overflow: hidden; background: var(--points-sombres) 0 0 / var(--pas-points) var(--pas-points), var(--emplacement-clair); }
/* Visuel entier, sans déformation, sur le fond à pois : les trois cartes ont désormais la même largeur. */
.carte-visuel img { width: 100%; height: 279px; object-fit: contain; object-position: center bottom; }
/* Images en 16:9 (EDNA, ONA) : l'appareil occupe le centre d'un grand cadre transparent. Réduite à la largeur de la carte,
   l'image flottait à 38 px du bord bas. On la pose donc sur le bord bas, à une hauteur qui donne à l'appareil la taille de celui de ONA
   (environ 217 px) ; ses marges transparentes latérales dépassent de la carte et sont coupées. */
.carte-visuel-paysage img { flex: none; width: auto; max-width: none; height: 240px; }
/* Code couleur des machines (identique aux vignettes du bandeau) : fond dégradé à pois derrière l'appareil. */
.carte-visuel-teinte-noir, .tr-machine.tr-machine-teinte-noir img { background: radial-gradient(rgba(255, 255, 255, 0.14) 1.2px, transparent 1.7px) 0 0 / 14px 14px, radial-gradient(circle at 50% 65%, #34343a, var(--fond-sombre) 80%); }
.carte-visuel-teinte-bleu, .tr-machine.tr-machine-teinte-bleu img { background: radial-gradient(rgba(255, 255, 255, 0.16) 1.2px, transparent 1.7px) 0 0 / 14px 14px, radial-gradient(circle at 50% 65%, #0b4ad8, #000a50 85%); }
.carte-visuel-teinte-blanc, .tr-machine.tr-machine-teinte-blanc img { background: radial-gradient(rgba(0, 40, 120, 0.08) 1.2px, transparent 1.7px) 0 0 / 14px 14px, radial-gradient(circle at 50% 65%, #fff, #e4e8ee 85%); }
.carte-produit h3 { margin: 12px 0; font-family: var(--police-titre); font-weight: 600; font-size: 20px; line-height: 28px; color: var(--encre); }
.carte-produit p { flex: 1; margin-bottom: 12px; padding: 0 20px; font-family: var(--police-titre); font-weight: 300; font-size: 14px; line-height: 1.6; color: var(--texte); }

/* Sections rédactionnelles : repères, technologie, comparatif, domaines, accompagnement.
 * Fond blanc ou gris clair en alternance ; mêmes cartes à bord arrondi que les produits. */
.bloc { padding: calc(80px + var(--recouvrement)) 20px; background: #fff; }
.bloc-gris { background: var(--gris-fond); }
.bloc > .titre-section { margin-bottom: 28px; }
.conteneur-etroit { max-width: 860px; }
.bloc .conteneur-texte { margin-bottom: 40px; }
.bloc .conteneur-texte:last-child { margin-bottom: 0; }
.pastille-numero { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--encre); font-family: var(--police-ui); font-weight: 700; font-size: 16px; line-height: 1; color: #fff; }
.certifications { font-weight: 500; color: var(--encre); }

.chiffres { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-bottom: 40px; }
.chiffre { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 28px 16px; border: 1px solid var(--bordure-carte); border-radius: var(--rayon-carte); background: var(--gris-fond); text-align: center; }
.chiffre strong { font-family: var(--police-titre); font-weight: 600; font-size: 40px; line-height: 1.1; color: var(--encre); }
.chiffre span { font-family: var(--police-titre); font-weight: 300; font-size: 14px; line-height: 1.5; color: var(--texte); }

.modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: 900px; margin: 0 auto 40px; }
.mode { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 26px 16px; border: 1px solid var(--bordure-carte); border-radius: var(--rayon-carte); background: #fff; text-align: center; }
.mode h3 { font-family: var(--police-titre); font-weight: 600; font-size: 18px; line-height: 26px; color: var(--encre); }
.mode p { font-family: var(--police-titre); font-weight: 300; font-size: 14px; color: var(--texte); }

.comparatif-cadre { overflow: hidden; border: 1px solid var(--bordure-carte); border-radius: var(--rayon-carte); background: #fff; }
.comparatif { width: 100%; table-layout: fixed; border-collapse: collapse; font-family: var(--police-titre); font-size: 15px; line-height: 1.55; color: var(--texte); text-align: left; }
/* Largeurs fixées sur la ligne d'en-tête : libellés 16 %, un appareil par colonne de 28 %. */
.comparatif thead th { width: 28%; padding: 22px 24px; background: var(--gris-fond); font-weight: 600; font-size: 20px; line-height: 28px; color: var(--encre); }
.comparatif-coin { width: 16%; background: var(--gris-fond); }
.comparatif tbody th { padding: 18px 24px; vertical-align: top; font-weight: 600; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: #6b6b6b; }
.comparatif td { padding: 18px 24px; vertical-align: top; font-weight: 300; }
.comparatif tbody tr { border-top: 1px solid #e8e8e8; }
.encart { max-width: 860px; margin: 30px auto 0; padding: 18px 22px; border-left: 4px solid var(--encre); background: var(--gris-fond); font-family: var(--police-titre); font-weight: 400; font-size: 15px; line-height: 1.65; color: var(--encre); }

.domaines { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; max-width: var(--largeur-texte); margin: 0 auto; }
.domaine { flex: 0 1 calc((100% - 48px) / 3); padding: 28px 24px; border: 1px solid var(--bordure-carte); border-radius: var(--rayon-carte); background: #fff; }
.domaine h3 { margin-bottom: 10px; font-family: var(--police-titre); font-weight: 600; font-size: 20px; line-height: 28px; color: var(--encre); }
.domaine p { font-family: var(--police-titre); font-weight: 300; font-size: 15px; line-height: 1.65; color: var(--texte); }
.domaine a { text-decoration: underline; text-underline-offset: 3px; }

.etapes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; max-width: var(--largeur-texte); margin: 0 auto; }
.etape { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 28px 22px; border: 1px solid var(--bordure-carte); border-radius: var(--rayon-carte); background: #fff; }
.etape h3 { font-family: var(--police-titre); font-weight: 600; font-size: 20px; line-height: 28px; color: var(--encre); }
.etape p { font-family: var(--police-titre); font-weight: 300; font-size: 15px; line-height: 1.65; color: var(--texte); }

/* Partenaires : carrousel en perspective */

/* Contact */
.contact { padding: calc(64px + var(--recouvrement)) 20px; background: var(--gris-contact); color: #fff; font-family: var(--police-titre); }
.contact .conteneur { max-width: var(--largeur-contact); }
.contact h2 { font-weight: 500; font-size: 30px; line-height: 40px; }
.contact p { margin: 16px 0 22px; font-weight: 300; font-size: 16px; line-height: 1.6; }
.contact strong { font-weight: 500; }

/* FAQ */
.faq { padding: calc(80px + var(--recouvrement)) 20px calc(80px + var(--recouvrement)); background: var(--gris-fond); }
.titre-faq { font-size: 30px; line-height: 40px; }
.faq-liste { margin-bottom: 24px; }
.faq-item { border: 1px solid #e8e8e8; background: var(--gris-fond); }
.faq-item + .faq-item { border-top: 0; }
.faq-item summary { display: flex; align-items: center; gap: 10px; padding: 15px 20px; cursor: pointer; list-style: none; font-family: var(--police-titre); font-weight: 500; font-size: 16px; color: #333; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .icone { width: 13px; height: 13px; }
.faq-item .icone-moins, .faq-item[open] .icone-plus { display: none; }
.faq-item[open] .icone-moins { display: block; }
.faq-reponse { padding: 15px 20px; border-top: 1px solid #e8e8e8; font-family: var(--police-titre); font-weight: 300; font-size: 16px; line-height: 1.6; color: var(--texte-faq); }
.faq-reponse ul { padding-left: 20px; list-style: disc; }


/* ---------- Pied de page ----------
 * Clair (#f0f0f0), logo noir, texte en Roboto, comme le pied du site Deep Beauty d'origine.
 * Même recouvrement arrondi que les autres sections, motif de points en dérive lente en fond.
 * Une ligne : la marque (logo, réseaux) puis quatre colonnes de liens de même gabarit ;
 * dessous, une seule ligne de bas de page (droits à gauche, mentions à droite). */
.pied { position: relative; overflow: hidden; margin-top: calc(var(--recouvrement) * -1); padding: calc(70px + var(--recouvrement)) 40px 0; border-radius: var(--rayon-section) var(--rayon-section) 0 0; background: var(--pied-clair); box-shadow: 0 -22px 44px -18px rgba(15, 18, 28, 0.18); font-family: var(--police-pied); color: var(--gris-lien-pied); }
.pied::before, .pied::after { content: ""; position: absolute; z-index: 0; pointer-events: none; }
.pied::before { inset: -12% -6%; background: var(--points-sombres) 0 0 / var(--pas-points) var(--pas-points); opacity: 0.55; transform: translate3d(calc(var(--p, 0) * -60px * var(--amp)), calc(var(--p, 0) * -30px * var(--amp)), 0); }
.pied::after { inset: 0; background: radial-gradient(60% 130% at 100% 0%, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0) 62%), linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 35%); }
.pied > * { position: relative; z-index: 1; }
.pied-haut { display: grid; grid-template-columns: 1.2fr 1.4fr repeat(3, 1fr); /* colonne contact plus large : adresse e-mail entière */ gap: 40px; max-width: var(--largeur-pied); margin: 0 auto; padding-bottom: 50px; }
.pied-logo { width: 220px; height: auto; } /* logo noir sur le pied clair : aucun filtre */
.pied-reseaux-titre { margin: 28px 0 12px; font-weight: 600; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--encre); }
.pied-reseaux { display: flex; gap: 10px; }
.pied-reseaux a { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid rgba(31, 34, 43, 0.32); border-radius: 50%; color: var(--encre); transition: background 0.25s, color 0.25s, border-color 0.25s, transform 0.25s var(--ease-sortie); }
.pied-reseaux a:hover { background: var(--encre); border-color: var(--encre); color: #fff; transform: translateY(-3px); }
.pied-reseaux .icone { width: 16px; height: 16px; }
.pied-colonne h2 { margin-bottom: 18px; font-weight: 600; font-size: 13px; line-height: 18px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--encre); }
.pied-colonne li + li { margin-top: 11px; }
.pied-colonne a { overflow-wrap: anywhere; display: flex; align-items: flex-start; gap: 8px; font-weight: 400; font-size: 14px; line-height: 21px; color: var(--gris-lien-pied); transition: color 0.2s; }
.pied-colonne a .icone { width: 13px; height: 21px; color: rgba(31, 34, 43, 0.55); }
.pied-colonne a:hover, .pied-colonne a:hover .icone { color: var(--encre); }
.pied-bas { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 30px; max-width: var(--largeur-pied); margin: 0 auto; padding: 22px 90px 26px 0; /* à droite : place du panier flottant */ border-top: 1px solid rgba(31, 34, 43, 0.14); font-size: 12px; color: #6f6f6f; }
.pied-droits a { color: var(--encre); text-decoration: underline; text-underline-offset: 3px; } /* souligné : le lien ne dépend pas de la seule couleur */
.pied-legal { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.pied-legal a { color: #6f6f6f; transition: color 0.2s; }
.pied-legal a:hover { color: var(--encre); }

/* Panier flottant */
.panier-flottant { position: fixed; right: 15px; bottom: 15px; z-index: 40; display: grid; place-items: center; width: 60px; height: 60px; border-radius: 10px; background: #111; color: #fff; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.55), 0 6px 18px rgba(0, 0, 0, 0.3); } /* liseré blanc : visible aussi sur un fond sombre */
.panier-flottant .icone { width: 28px; height: 28px; margin-top: 8px; }
.panier-nombre { position: absolute; left: 6px; top: 2px; font-family: var(--police-systeme); font-weight: 700; font-size: 12px; }

/* ---------- Apparition au défilement ---------- */
@keyframes monter { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } }