/* Page d'accueil (variante B) : haut de page sombre avec l'écran de l'application, chiffres,
   fonctions en alternance, bandeau des partenaires, tarif. Complète styles.css (base commune). */
:root { --nuit: #1d1416; --or: #c9a46a; --or-fonce: #8a6a37; }
.surtitre { color: var(--or-fonce); }
.sur-nuit .surtitre, .haut .surtitre { color: var(--or); }
.chiffre { font-family: var(--texte); font-weight: 700; letter-spacing: -0.03em; }

/* Haut de page */
.haut { background: radial-gradient(1200px 620px at 78% 18%, #3a1a22 0%, var(--nuit) 62%); color: #fff; padding-bottom: 104px; }
.haut .barre { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 80px; }
.haut .marque { color: #fff; }
.haut .marque svg { width: 42px; height: 42px; flex: none; }
.haut nav { display: flex; align-items: center; gap: 26px; font-size: 15px; }
.haut nav a { color: rgb(255 255 255 / 0.82); text-decoration: none; }
.haut nav a:hover { color: #fff; }
.haut nav .bouton { color: #fff !important; }
.bouton.or { background: var(--or); border-color: var(--or); color: var(--nuit) !important; }
.bouton.or:hover { background: #d8b67f; border-color: #d8b67f; }
.bouton.clair { background: transparent; border-color: rgb(255 255 255 / 0.4); color: #fff !important; }
.bouton.clair:hover { background: rgb(255 255 255 / 0.08); }
.accroche { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 56px; align-items: center; padding-top: 48px; }
.accroche h1 { font-size: clamp(46px, 6.2vw, 78px); margin: 16px 0 22px; color: #fff; }
.accroche h1 em { font-style: italic; font-weight: 500; color: var(--or); }
.accroche .chapeau { color: rgb(255 255 255 / 0.8); font-size: 19px; max-width: 31em; }
.accroche .actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.accroche .garanties { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 28px 0 0; padding: 0; list-style: none; font-size: 14px; color: rgb(255 255 255 / 0.72); }
.accroche .garanties li::before { content: '✓'; color: var(--or); font-weight: 700; margin-right: 8px; }
@media (max-width: 960px) {
  .accroche { grid-template-columns: 1fr; gap: 40px; padding-top: 24px; }
  .haut nav .lien { display: none; }
}

/* Maquette de l'écran (données fictives) */
.ecran { background: #fff; border-radius: 14px; box-shadow: 0 40px 80px rgb(0 0 0 / 0.45); overflow: hidden; color: var(--encre); font-size: 12.5px; }
.ecran .fenetre { display: flex; gap: 6px; padding: 10px 14px; background: #efe9e1; }
.ecran .fenetre i { width: 10px; height: 10px; border-radius: 50%; background: #d3c8bb; }
.ecran .corps { display: grid; grid-template-columns: 150px minmax(0, 1fr); }
.ecran aside { background: #faf7f3; border-right: 1px solid var(--trait); padding: 14px 12px; display: flex; flex-direction: column; gap: 9px; color: var(--doux); }
.ecran aside b { color: var(--bordeaux); }
.ecran .contenu { padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.ecran .direct { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--doux); }
.ecran .direct i { width: 8px; height: 8px; border-radius: 50%; background: #3e9b55; box-shadow: 0 0 0 4px #e3f1e5; }
.ecran .tuiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ecran .tuile { border: 1px solid var(--trait); border-radius: 10px; padding: 10px; }
.ecran .tuile span { display: block; color: var(--doux); font-size: 11px; }
.ecran .tuile strong { font-size: 17px; }
.ecran table { width: 100%; border-collapse: collapse; }
.ecran th { text-align: left; color: var(--doux); font-weight: 600; font-size: 11px; padding: 6px; border-bottom: 1px solid var(--trait); }
.ecran td { padding: 7px 6px; border-bottom: 1px solid #f1ece5; white-space: nowrap; }
.ecran .n { text-align: right; font-variant-numeric: tabular-nums; }
.pastille { display: inline-block; white-space: nowrap; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; }
.pastille.vert { background: #e3f1e5; color: #2f6b3a; }
.pastille.ambre { background: #fbeed8; color: #7f5210; }
@media (max-width: 620px) {
  .ecran .corps { grid-template-columns: minmax(0, 1fr); }
  .ecran aside, .ecran .masque-tel { display: none; }
  .ecran .tuiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ecran .tuiles .tuile:last-child { display: none; }
}

/* Chiffres */
.chiffres { margin-top: -52px; position: relative; }
.chiffres .conteneur { background: var(--carte); border-radius: 18px; box-shadow: 0 20px 50px rgb(29 20 22 / 0.12); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.chiffres .conteneur > div { padding: 28px 26px; border-right: 1px solid var(--trait); }
.chiffres .conteneur > div:last-child { border-right: 0; }
.chiffres strong { display: block; font-size: 38px; line-height: 1.1; color: var(--bordeaux); }
.chiffres span { color: var(--doux); font-size: 15px; }
@media (max-width: 760px) {
  .chiffres .conteneur { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chiffres .conteneur > div:nth-child(2) { border-right: 0; }
  .chiffres .conteneur > div:nth-child(-n + 2) { border-bottom: 1px solid var(--trait); }
  .chiffres strong { font-size: 30px; }
}

.titre-centre { text-align: center; max-width: 780px; margin: 0 auto 56px; }
.titre-centre p { margin-top: 14px; color: var(--doux); font-size: 18px; }

/* Fonctions en alternance */
.rangee { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px; align-items: center; }
.rangee + .rangee { margin-top: 80px; }
.rangee.inverse .texte { order: 2; }
.rangee h3 { font-size: 38px; margin: 8px 0 14px; }
.rangee .texte > p { color: var(--doux); }
.rangee ul { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 8px; }
.rangee li::before { content: '—'; color: var(--or-fonce); margin-right: 10px; }
.visuel { background: linear-gradient(160deg, #fff, #f0e9df); border: 1px solid var(--trait); border-radius: 18px; padding: 26px; display: flex; flex-direction: column; gap: 10px; }
.ligne { display: flex; justify-content: space-between; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--trait); border-radius: 10px; padding: 12px 14px; font-size: 15px; }
.ligne small { display: block; color: var(--doux); font-size: 12.5px; }
.jauge { height: 10px; border-radius: 999px; background: var(--bordeaux); margin-top: 8px; }
@media (max-width: 860px) {
  .rangee { grid-template-columns: 1fr; gap: 28px; }
  .rangee.inverse .texte { order: 0; }
  .rangee + .rangee { margin-top: 56px; }
}

/* Bandeau sombre des partenaires */
section.bloc.sur-nuit { background: var(--nuit); color: #fff; }
.sur-nuit .titre-centre p { color: rgb(255 255 255 / 0.72); }
.partenaires { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.partenaires article { border: 1px solid rgb(255 255 255 / 0.14); border-radius: 14px; padding: 26px 22px; }
.partenaires h3 { font-size: 26px; color: var(--or); margin-bottom: 8px; }
.partenaires p { color: rgb(255 255 255 / 0.74); font-size: 15px; }
@media (max-width: 960px) { .partenaires { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .partenaires { grid-template-columns: 1fr; } }

/* Tarif */
.tarif { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 48px; align-items: center; }
.tarif .intro { margin-bottom: 0; }
@media (max-width: 860px) { .tarif { grid-template-columns: 1fr; gap: 28px; } }
.carte-prix { background: var(--carte); border: 1px solid var(--trait); border-radius: 20px; padding: 36px; box-shadow: 0 20px 50px rgb(28 26 23 / 0.08); }
@media (max-width: 620px) { .carte-prix { padding: 24px; } }
.ruban { display: inline-block; background: #f3e6d0; color: #6e4c1a; font-size: 13px; font-weight: 700; padding: 4px 12px; border-radius: 999px; margin-bottom: 16px; }
.prix { display: flex; align-items: baseline; gap: 12px; color: var(--bordeaux); margin-bottom: 8px; }
.prix b { font: 700 clamp(64px, 9vw, 92px)/1 var(--texte); letter-spacing: -0.04em; }
.prix span { font: 700 22px/1.25 var(--texte); }
.prix span small { display: block; font-weight: 500; font-size: 16px; color: var(--doux); }
.carte-prix ul { list-style: none; padding: 0; margin: 22px 0 26px; display: grid; gap: 10px; }
.carte-prix li::before { content: '✓'; color: var(--bordeaux); font-weight: 700; margin-right: 10px; }
.carte-prix .bouton { width: 100%; }

/* Pastille du prix, inclinée sur le coin de l'aperçu de l'écran */
.vitrine { position: relative; }
.pastille-prix { position: absolute; z-index: 2; top: -46px; left: -46px; width: 138px; height: 138px; border-radius: 50%; background: var(--or); color: var(--nuit) !important; text-decoration: none; display: flex; flex-direction: column; align-items: center; justify-content: center; transform: rotate(-12deg); box-shadow: 0 14px 30px rgb(0 0 0 / 0.35), inset 0 0 0 4px rgb(255 255 255 / 0.35), inset 0 0 0 6px var(--or); line-height: 1.1; text-align: center; }
.pastille-prix:hover { transform: rotate(-12deg) scale(1.04); }
.pastille-prix b { font: 700 38px/1 var(--texte); letter-spacing: -0.03em; }
.pastille-prix span { font: 700 14px/1.2 var(--texte); margin-top: 2px; }
.pastille-prix small { font: 500 12px/1.2 var(--texte); }
@media (max-width: 960px) { .vitrine { margin-top: 36px; } .pastille-prix { left: auto; right: 6px; top: -60px; width: 112px; height: 112px; } .pastille-prix b { font-size: 30px; } }
.haut { overflow-x: clip; }

/* Tarif : boutons et cartes acceptées */
.actions-prix { display: grid; gap: 10px; }
.carte-prix .paiement { margin-top: 18px; }
.haut nav .bouton.or { min-height: 42px; }
@media (max-width: 620px) {
  .haut nav { gap: 8px; }
  .haut nav .bouton { min-height: 38px; padding: 0 14px; font-size: 13px; }
  .haut .marque span { display: none; }
}

/* RED75, le logiciel présenté par le site */
.marque-red75 { display: inline-flex; align-items: center; gap: 10px; }
.marque-red75 img { width: 28px; height: 28px; }
.ecran .logo-ecran { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--encre); margin-bottom: 6px; }
.haut nav .bouton.or { color: var(--nuit) !important; }

/* Tampon « PRA ≤ 2 h » : à l'opposé de la pastille du prix, sur le coin bas de l'aperçu, posé de biais
   comme un coup de tampon (encre bordeaux sur papier crème). */
.tampon-pra { position: absolute; z-index: 2; right: -46px; bottom: -50px; width: 150px; height: 150px; border-radius: 50%; background: var(--fond); color: var(--bordeaux); transform: rotate(9deg); box-shadow: 0 14px 30px rgb(0 0 0 / 0.35); padding: 3px; transition: transform 0.2s; }
.tampon-pra:hover { transform: rotate(9deg) scale(1.04); }
.tampon-pra svg { display: block; width: 100%; height: 100%; }
@media (max-width: 960px) { .tampon-pra { right: 6px; bottom: -46px; width: 112px; height: 112px; } .vitrine { margin-bottom: 40px; } }

/* Technologies employées (section Sécurité). */
.technos { margin-top: 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.technos p { margin: 0; color: var(--doux); }
.technos ul { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
/* « Relié à » sous l'accroche : les services reliés, en pastilles (noms, sans logos). */
.relie { margin-top: 18px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.relie p { margin: 0; color: #fff; font-size: 15px; font-weight: 700; letter-spacing: 0.02em; }
.relie ul { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
.relie li { background: rgb(255 255 255 / 0.12); border: 1px solid rgb(255 255 255 / 0.4); border-radius: 999px; padding: 4px 12px; font-size: 13.5px; font-weight: 600; color: #fff; }
.technos li { background: var(--carte); border: 1px solid var(--trait); border-radius: 999px; padding: 6px 14px; font-size: 14px; font-weight: 600; }

/* Plan de chai (rubrique Stock et chai) : deux racks, une case par travée et niveau. */
.plan-chai .rack { background: #fff; border: 1px solid var(--trait); border-radius: 10px; padding: 12px 14px; }
.rack-titre { display: flex; align-items: baseline; gap: 8px; font-size: 14px; margin-bottom: 8px; }
.rack-titre b { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; background: var(--bordeaux); color: #fff; font-size: 12px; }
.rack-titre small { margin-left: auto; color: var(--doux); font-size: 12px; }
.cases { display: grid; grid-template-columns: repeat(var(--travees), minmax(0, 1fr)); gap: 3px; }
.cases i, .legende-chai i { display: block; height: 14px; border-radius: 3px; }
.pleine { background: #2f8f4e; }
.vide { background: #ece6dd; }
.cherchee { background: #e0a526; box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px #b07a12; }
.legende-chai { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12.5px; color: var(--doux); }
.legende-chai span { display: inline-flex; align-items: center; gap: 6px; }
.legende-chai i { width: 12px; height: 12px; }
.legende-chai .charge { margin-left: auto; }

/* Annonce « Développement en cours » en haut de l'accroche : une pastille dorée, un point qui pulse. */
.annonce { display: inline-block; line-height: 1.6; margin: 0 0 18px; padding: 6px 16px; border: 1px solid rgb(201 164 106 / 0.45); border-radius: 999px; background: rgb(201 164 106 / 0.12); color: rgb(255 255 255 / 0.88); font-size: 14px; }
.annonce i { display: inline-block; vertical-align: 1px; margin-right: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--or); box-shadow: 0 0 0 0 rgb(201 164 106 / 0.6); animation: annonce 2s infinite; }
.annonce a { color: var(--or); font-weight: 600; text-decoration: none; }
.annonce a:hover { text-decoration: underline; }
@keyframes annonce { 70% { box-shadow: 0 0 0 8px rgb(201 164 106 / 0); } 100% { box-shadow: 0 0 0 0 rgb(201 164 106 / 0); } }
@media (prefers-reduced-motion: reduce) { .annonce i { animation: none; } }
#cuverie, #courtage, #reception { scroll-margin-top: 96px; }