/* Le site d'Entrepot360.ca : une page, aux couleurs de l'application (fond d'encre, accent turquoise). */
:root { --fond: #0a1013; --fond-2: #0f181c; --carte: #131e23; --bord: #223239; --encre: #e9f0f2; --doux: #9bb0b8; --accent: #44bfd6; --accent-encre: #04222a; --rayon: 16px; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--fond); color: var(--encre); font: 17px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3 { line-height: 1.15; letter-spacing: -.02em; margin: 0; }
p { margin: 0; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }

.haut { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 1.5rem; padding: .8rem clamp(16px, 5vw, 64px); background: rgb(10 16 19 / .86); backdrop-filter: blur(10px); border-bottom: 1px solid var(--bord); }
.marque { display: inline-flex; align-items: center; gap: .55rem; font-weight: 800; font-size: 1.15rem; text-decoration: none; letter-spacing: -.01em; }
.marque .rond { width: .95rem; height: .95rem; border-radius: 50%; border: 3px solid var(--accent); }
.marque .ca { color: var(--accent); }
.haut nav { display: flex; gap: 1.4rem; margin-left: auto; font-size: .95rem; }
.haut nav a { text-decoration: none; color: var(--doux); }
.haut nav a:hover { color: var(--encre); }
.bouton { display: inline-flex; align-items: center; justify-content: center; padding: .7rem 1.15rem; border-radius: 12px; border: 1px solid var(--bord); background: var(--carte); color: var(--encre); font: inherit; font-weight: 650; text-decoration: none; cursor: pointer; }
.bouton:hover { border-color: var(--accent); }
.bouton.primaire { background: var(--accent); border-color: var(--accent); color: var(--accent-encre); }
.bouton.primaire:hover { filter: brightness(1.07); }
.bouton.discret { padding: .5rem .9rem; font-size: .92rem; }

main > section { padding: clamp(48px, 8vw, 104px) clamp(16px, 5vw, 64px); max-width: 1240px; margin: 0 auto; }
.titre { font-size: clamp(1.7rem, 3.4vw, 2.5rem); margin-bottom: 1.6rem; }

.hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(24px, 5vw, 64px); align-items: center; padding-top: clamp(40px, 7vw, 88px); }
.surtitre { color: var(--accent); font-size: .85rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 1rem; }
.hero h1 { font-size: clamp(2.3rem, 5.6vw, 4.1rem); }
.chapeau { margin-top: 1.3rem; font-size: clamp(1.05rem, 1.5vw, 1.25rem); color: var(--doux); max-width: 34rem; }
.actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.8rem; }
.gages { list-style: none; padding: 0; margin: 1.8rem 0 0; display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; color: var(--doux); font-size: .92rem; }
.gages li::before { content: "✓"; color: var(--accent); font-weight: 800; margin-right: .45rem; }
.hero-image { position: relative; padding: 0 0 8% 0; }
.hero-image .ecran { border-radius: var(--rayon); border: 1px solid var(--bord); box-shadow: 0 30px 80px rgb(0 0 0 / .55); }
.hero-image .telephone { position: absolute; right: -2%; bottom: 0; width: 27%; border-radius: 18px; border: 5px solid #1b1d21; box-shadow: 0 20px 50px rgb(0 0 0 / .6); }

.promesses { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1rem; padding-top: 0; }
.promesses article, .pour-qui article { background: var(--carte); border: 1px solid var(--bord); border-radius: var(--rayon); padding: 1.5rem; }
.promesses h2, .pour-qui h3 { font-size: 1.22rem; margin-bottom: .6rem; }
.promesses p, .pour-qui p, .rangee p, .aussi span, .demo-texte p { color: var(--doux); }

.fonctions .rangee { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 6vw, 80px); align-items: center; padding: clamp(28px, 4.5vw, 56px) 0; border-top: 1px solid var(--bord); }
.fonctions .rangee.inverse .texte { order: 2; }
.etape { color: var(--accent); font-weight: 700; font-size: .85rem; letter-spacing: .08em; text-transform: uppercase; margin-bottom: .7rem; }
.rangee h3 { font-size: clamp(1.4rem, 2.6vw, 1.95rem); margin-bottom: .8rem; }
.rangee img { justify-self: center; border: 1px solid var(--bord); box-shadow: 0 24px 60px rgb(0 0 0 / .5); }
.rangee img.tel { width: min(300px, 70%); border-radius: 28px; border: 6px solid #1b1d21; }
.rangee img.large { border-radius: var(--rayon); }

.aussi ul { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.6rem 1.4rem; }
.aussi li { display: grid; gap: .3rem; padding-top: .9rem; border-top: 2px solid var(--accent); }
.aussi span { font-size: .95rem; }

.deux { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem; }

.demo { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(24px, 5vw, 64px); align-items: start; }
.demo-texte p { font-size: 1.1rem; max-width: 30rem; }
.demo form { display: grid; gap: .95rem; background: var(--carte); border: 1px solid var(--bord); border-radius: var(--rayon); padding: clamp(1.1rem, 3vw, 1.8rem); }
.demo label { display: grid; gap: .35rem; font-weight: 600; font-size: .95rem; }
.demo .facultatif { font-weight: 400; color: var(--doux); }
.demo input, .demo textarea { width: 100%; padding: .7rem .8rem; border-radius: 10px; border: 1px solid var(--bord); background: var(--fond-2); color: var(--encre); font: inherit; }
.demo input:focus, .demo textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgb(68 191 214 / .22); }
.demo .piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.demo .retour { min-height: 1.5em; font-weight: 600; }
.demo .retour.ok { color: #6fd39a; }
.demo .retour.faute { color: #ff8f8f; }
.demo button[disabled] { opacity: .6; cursor: default; }

footer { display: flex; flex-wrap: wrap; gap: .6rem 1.6rem; justify-content: space-between; padding: 1.6rem clamp(16px, 5vw, 64px); border-top: 1px solid var(--bord); color: var(--doux); font-size: .9rem; }

@media (max-width: 900px) {
  .hero, .demo, .fonctions .rangee, .deux { grid-template-columns: minmax(0, 1fr); }
  .fonctions .rangee.inverse .texte { order: 0; }
  .promesses { grid-template-columns: minmax(0, 1fr); }
  .aussi ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .haut nav { display: none; }
  .haut .bouton { margin-left: auto; }
}
@media (max-width: 480px) { .aussi ul { grid-template-columns: minmax(0, 1fr); } .hero-image .telephone { width: 30%; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Les tarifs : un carton par forfait, puis les options en lignes. */
.sous-titre { color: var(--doux); margin: -1rem 0 1.6rem; max-width: 44rem; }
.forfaits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1rem; }
.forfait { background: var(--carte); border: 1px solid var(--bord); border-radius: var(--rayon); padding: 1.5rem; display: grid; gap: .5rem; align-content: start; }
.forfait h3 { font-size: 1.2rem; }
.forfait .prix { font-size: 2.3rem; font-weight: 800; letter-spacing: -.03em; }
.forfait .prix small { font-size: .95rem; font-weight: 500; color: var(--doux); letter-spacing: 0; }
.forfait p { color: var(--doux); font-size: .97rem; }
.forfait .comptes { color: var(--encre); font-weight: 600; }
.options { margin-top: 1.6rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem 2.4rem; }
.options h3 { font-size: 1.05rem; margin-bottom: .5rem; }
.options ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.options li { display: flex; justify-content: space-between; gap: 1rem; padding: .4rem 0; border-top: 1px solid var(--bord); color: var(--doux); }
.options li b { color: var(--encre); font-weight: 650; white-space: nowrap; }
.essayer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.2rem 2rem; }
.essayer > div { max-width: 44rem; }
.essayer p { color: var(--doux); font-size: 1.08rem; }
[hidden] { display: none !important; }
@media (max-width: 900px) { .forfaits, .options { grid-template-columns: minmax(0, 1fr); } }

/* ——— La version détaillée du site (2026-10-05) : fenêtres d'écran, journée au téléphone, détails, questions. ——— */
body { background: radial-gradient(1100px 620px at 78% -8%, rgb(68 191 214 / .13), transparent 60%), var(--fond); }
.haut .bouton.primaire.discret { margin-left: -.7rem; }
.hero h1 { font-size: clamp(2.2rem, 4.9vw, 3.7rem); text-wrap: balance; }
.bouton.grand { padding: .95rem 1.5rem; font-size: 1.05rem; }
.titre { text-wrap: balance; }
.sous-titre { font-size: 1.08rem; }

/* Une capture se montre dans sa fenêtre : on comprend d'emblée que c'est un écran du logiciel. */
.fenetre { margin: 0; border-radius: var(--rayon); border: 1px solid var(--bord); background: #0d1518; overflow: hidden; box-shadow: 0 30px 80px rgb(0 0 0 / .55), 0 0 0 1px rgb(68 191 214 / .06); }
.fenetre .barre { display: flex; align-items: center; gap: .38rem; padding: .55rem .8rem; border-bottom: 1px solid var(--bord); background: #101a1e; }
.fenetre .barre i { width: .6rem; height: .6rem; border-radius: 50%; background: #2b3b42; }
.fenetre .barre span { margin: 0 auto; padding: .12rem 1.6rem; border-radius: 6px; background: #0a1114; color: var(--doux); font-size: .74rem; transform: translateX(-1rem); }
.fenetre img, .rangee .fenetre img { border: 0; box-shadow: none; border-radius: 0; width: 100%; }
.hero-image .telephone { width: 24%; right: -1%; border-radius: 20px; }

.faits { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; padding-top: 0; padding-bottom: clamp(32px, 5vw, 56px); }
.faits div { display: grid; gap: .3rem; align-content: start; padding: 1.2rem 1.3rem; border-left: 1px solid var(--bord); }
.faits div:first-child { border-left: 0; padding-left: 0; }
.faits b { font-size: 1.12rem; letter-spacing: -.01em; }
.faits span { color: var(--doux); font-size: .93rem; }

.avant-apres article { border-radius: var(--rayon); padding: 1.6rem; border: 1px solid var(--bord); background: var(--carte); }
.avant-apres h3 { font-size: 1.15rem; margin-bottom: 1rem; }
.avant-apres ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.avant-apres li { position: relative; padding-left: 1.7rem; color: var(--doux); }
.avant-apres li::before { position: absolute; left: 0; top: 0; font-weight: 800; }
.avant-apres .avant li::before { content: "✕"; color: #e0787a; }
.avant-apres .apres { border-color: rgb(68 191 214 / .5); background: linear-gradient(180deg, rgb(68 191 214 / .1), var(--carte) 70%); }
.avant-apres .apres li { color: var(--encre); }
.avant-apres .apres li::before { content: "✓"; color: var(--accent); }

.journee .etapes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 32px); }
.journee li { display: grid; gap: .35rem; align-content: start; }
.journee img { width: 100%; border-radius: 26px; border: 6px solid #1b1d21; box-shadow: 0 22px 54px rgb(0 0 0 / .5); margin-bottom: 1rem; }
.journee h3 { font-size: 1.15rem; }
.journee li p:last-child { color: var(--doux); font-size: .96rem; }
.journee .etape { margin-bottom: .25rem; }

.fonctions .rangee { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); }
.fonctions .rangee.inverse { grid-template-columns: minmax(0, 1.18fr) minmax(0, .82fr); }
.details { list-style: none; margin: 1.1rem 0 0; padding: 0; display: grid; gap: .6rem; }
.details li { position: relative; padding-left: 1.6rem; color: var(--encre); font-size: .98rem; }
.details li::before { content: "✓"; position: absolute; left: 0; color: var(--accent); font-weight: 800; }

.roles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.1rem; }
.roles article { background: var(--carte); border: 1px solid var(--bord); border-radius: var(--rayon); padding: 1.4rem; border-top: 3px solid var(--accent); }
.roles h3 { font-size: 1.15rem; margin-bottom: .55rem; }
.roles p:last-child { color: var(--doux); font-size: .96rem; }

.demarrer ol { list-style: none; counter-reset: pas; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4rem; }
.demarrer li { counter-increment: pas; display: grid; gap: .35rem; align-content: start; }
.demarrer li::before { content: counter(pas); display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--accent); color: var(--accent-encre); font-weight: 800; font-size: 1.1rem; margin-bottom: .5rem; }
.demarrer b { font-size: 1.1rem; }
.demarrer span, .confiance span { color: var(--doux); font-size: .96rem; }

.confiance ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1rem; }
.confiance li { display: grid; gap: .3rem; background: var(--fond-2); border: 1px solid var(--bord); border-radius: var(--rayon); padding: 1.2rem 1.3rem; }

.forfait { padding: 1.7rem; }
.forfait .bouton { margin-top: .7rem; }
.forfait:nth-child(2) { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 24px 60px rgb(68 191 214 / .12); }
.forfait:nth-child(2) .bouton { background: var(--accent); border-color: var(--accent); color: var(--accent-encre); }
.compris { list-style: none; margin: 1.3rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; color: var(--doux); font-size: .95rem; }
.compris li::before { content: "✓"; color: var(--accent); font-weight: 800; margin-right: .45rem; }

.essayer { border: 1px solid rgb(68 191 214 / .45); border-radius: calc(var(--rayon) + 6px); background: linear-gradient(120deg, rgb(68 191 214 / .14), var(--carte) 65%); margin: clamp(24px, 4vw, 48px) auto; padding: clamp(28px, 4vw, 48px) !important; max-width: min(1112px, calc(100% - 2 * clamp(16px, 5vw, 64px))) !important; }
.essayer .titre { margin-bottom: .7rem; }

.questions { max-width: 860px !important; }
.questions details { border-top: 1px solid var(--bord); }
.questions details:last-of-type { border-bottom: 1px solid var(--bord); }
.questions summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 1rem; padding: 1.05rem 0; font-weight: 650; font-size: 1.05rem; }
.questions summary::-webkit-details-marker { display: none; }
.questions summary::after { content: "+"; color: var(--accent); font-weight: 700; font-size: 1.3rem; line-height: 1; }
.questions details[open] summary::after { content: "–"; }
.questions details p { color: var(--doux); padding: 0 2rem 1.15rem 0; }

.gages.colonne { flex-direction: column; gap: .6rem; font-size: 1rem; }
footer { align-items: center; }
footer nav { display: flex; flex-wrap: wrap; gap: .4rem 1.3rem; }
footer nav a { text-decoration: none; }
footer nav a:hover { color: var(--encre); }

@media (max-width: 1100px) { .haut nav { gap: 1rem; font-size: .9rem; } .haut nav a:nth-child(-n+4) { display: none; } }
@media (max-width: 900px) {
  .faits { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 0; }
  .faits div:nth-child(odd) { border-left: 0; padding-left: 0; }
  .journee .etapes, .roles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fonctions .rangee, .fonctions .rangee.inverse, .demarrer ol, .confiance ul { grid-template-columns: minmax(0, 1fr); }
  .fonctions .rangee.inverse .texte { order: 0; }
  .haut .bouton.primaire.discret { margin-left: auto; }
}
@media (max-width: 480px) {
  .faits, .roles { grid-template-columns: minmax(0, 1fr); }
  .faits div { border-left: 0; padding: .2rem 0; }
  .journee .etapes { grid-template-columns: minmax(0, 1fr); }
  .journee img { width: 78%; justify-self: center; }
  .actions .bouton { width: 100%; }
}

.hero { grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr); }
@media (max-width: 900px) { .hero { grid-template-columns: minmax(0, 1fr); } }

.eprouve { display: inline-flex; align-items: center; gap: .55rem; margin-top: 1.6rem; padding: .5rem .95rem; border-radius: 999px; border: 1px solid rgb(68 191 214 / .5); background: rgb(68 191 214 / .1); font-weight: 650; font-size: .95rem; }
.eprouve::before { content: "★"; color: var(--accent); }
.eprouve + .gages { margin-top: 1rem; }
.accroche-prix { font-size: clamp(1.15rem, 2vw, 1.45rem); font-weight: 700; color: var(--accent); margin: -.9rem 0 1.5rem; }
.tarifs .accroche-prix + .sous-titre { margin-top: -1rem; }

/* Le logo, le film de la vue 3D, et le devis en ligne. */
.marque .logo { width: 1.75rem; height: 1.75rem; flex: none; }
.action { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(24px, 5vw, 64px); align-items: center; }
.action .titre { margin-bottom: .9rem; }
.action-texte > p:not(.etape) { color: var(--doux); font-size: 1.08rem; }
.action video { display: block; width: 100%; height: auto; background: #05090b; }
.devis-grille { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(20px, 3vw, 40px); align-items: start; }
.devis form { display: grid; gap: 1.3rem; }
.devis fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.devis legend, .devis label { font-weight: 650; font-size: .95rem; }
.devis legend { padding: 0; margin-bottom: .6rem; }
.devis .facultatif { font-weight: 400; color: var(--doux); }
.devis .choix { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; }
.devis .pastille { display: grid; gap: .15rem; padding: .85rem .9rem; border: 1px solid var(--bord); border-radius: 12px; background: var(--carte); cursor: pointer; position: relative; }
.devis .pastille input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.devis .pastille small { color: var(--doux); font-weight: 500; }
.devis .pastille:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); background: rgb(68 191 214 / .1); }
.devis .pastille:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 3px; }
.deux-champs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem; }
.devis .deux-champs label { display: grid; gap: .35rem; }
.devis input[type="number"], .devis select { width: 100%; padding: .7rem .8rem; border-radius: 10px; border: 1px solid var(--bord); background: var(--fond-2); color: var(--encre); font: inherit; }
.devis .cases { display: grid; gap: .5rem; }
.devis .case { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .7rem; align-items: start; padding: .7rem .85rem; border: 1px solid var(--bord); border-radius: 12px; background: var(--carte); cursor: pointer; }
.devis .case input { width: 1.1rem; height: 1.1rem; margin-top: .2rem; accent-color: var(--accent); }
.devis .case small { display: block; color: var(--doux); font-weight: 400; font-size: .86rem; }
.devis .case b { white-space: nowrap; }
.devis-resultat { position: sticky; top: 5rem; display: grid; gap: .8rem; padding: 1.5rem; border-radius: var(--rayon); border: 1px solid var(--accent); background: linear-gradient(180deg, rgb(68 191 214 / .1), var(--carte) 60%); }
.devis-resultat h3 { font-size: 1.15rem; }
.devis-resultat ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.devis-resultat li { display: flex; justify-content: space-between; gap: 1rem; color: var(--doux); font-size: .95rem; }
.devis-resultat li b { color: var(--encre); font-weight: 600; white-space: nowrap; }
.devis-total { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding-top: .8rem; border-top: 1px solid var(--bord); }
.devis-total b { font-size: 1.9rem; letter-spacing: -.02em; }
.devis-total.second b { font-size: 1.25rem; }
.devis-note { color: var(--doux); font-size: .85rem; }
@media (max-width: 900px) { .action, .devis-grille { grid-template-columns: minmax(0, 1fr); } .devis-resultat { position: static; } }
@media (max-width: 480px) { .devis .choix, .deux-champs { grid-template-columns: minmax(0, 1fr); } }

.devis .case.obligatoire { border-color: rgb(68 191 214 / .5); cursor: default; }
.subventions { padding: .9rem 1rem; border-radius: 12px; border: 1px dashed rgb(68 191 214 / .55); background: rgb(68 191 214 / .07); color: var(--doux); font-size: .95rem; }
.subventions b { color: var(--encre); }

.haut .bouton.primaire.discret { margin-left: 0; }
.fenetre figcaption { padding: .6rem .9rem; border-top: 1px solid var(--bord); color: var(--doux); font-size: .9rem; background: #101a1e; }

.definition { margin: 0 0 1rem; padding: .85rem 1rem; border-left: 3px solid var(--accent); background: var(--fond-2); border-radius: 0 12px 12px 0; color: var(--doux); font-size: .98rem; }
.definition b { color: var(--encre); font-size: 1.05rem; }
.definition span { font-style: italic; }