/* technyrem.com - novembre 2026 */
@font-face { font-family: "Caladea"; src: url("fonts/caladea-bold.woff") format("woff"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Caladea"; src: url("fonts/caladea-italic.woff") format("woff"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/inter-regular.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/inter-semibold.woff") format("woff"); font-weight: 600; font-style: normal; font-display: swap; }

:root {
  --papier: #F2F5F8;
  --blanc: #FFFFFF;
  --encre: #1B2A3A;
  --plan: #2E5B88;
  --trait: #C7D1DB;
  --signal: #E39B00;
  --gris: #5B6B7B;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--papier); color: var(--encre); font: 400 17px/1.6 "Inter", "Segoe UI", Arial, sans-serif; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--plan); }
a:focus-visible, button:focus-visible { outline: 3px solid var(--signal); outline-offset: 3px; }

h1, h2, h3 { font-family: "Caladea", Georgia, serif; font-weight: 700; line-height: 1.12; margin: 0 0 .5em; color: var(--encre); }
h1 { font-size: clamp(2.4rem, 5.2vw, 4rem); letter-spacing: -0.01em; }
h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); }
h3 { font-size: 1.3rem; }
p { margin: 0 0 1em; max-width: 68ch; }

.conteneur { width: min(1120px, 100% - 40px); margin: 0 auto; }

/* En-tête */
.entete { background: var(--blanc); border-bottom: 1px solid var(--trait); position: sticky; top: 0; z-index: 10; }
.entete .conteneur { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 70px; }
.marque { text-decoration: none; color: var(--encre); line-height: 1.1; }
.marque strong { display: block; font-family: "Caladea", Georgia, serif; font-size: 1.7rem; }
.marque span { font-size: .82rem; color: var(--gris); }
.nav { display: flex; gap: 22px; align-items: center; }
.nav a { color: var(--encre); text-decoration: none; font-weight: 600; font-size: .95rem; }
.nav a:hover { color: var(--plan); }
.bouton { display: inline-block; background: var(--plan); color: var(--blanc); text-decoration: none; font-weight: 600; padding: 12px 20px; border-radius: 6px; }
.bouton:hover { background: var(--encre); }
.bouton-signal { background: var(--signal); color: var(--encre); }
.bouton-signal:hover { background: #C98800; color: var(--encre); }
.bouton-clair { background: transparent; color: var(--plan); border: 2px solid var(--plan); padding: 10px 18px; }
.bouton-clair:hover { background: var(--plan); color: var(--blanc); }

/* Ouverture : le plan */
.ouverture { padding: 56px 0 40px; }
.ouverture .conteneur { display: grid; grid-template-columns: 1fr 1.15fr; gap: 48px; align-items: center; }
.ouverture .intro { font-size: 1.15rem; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.plan-maison { margin: 0; background: var(--blanc); border: 1px solid var(--trait); border-radius: 10px; padding: 16px; }
.plan-maison svg { width: 100%; height: auto; display: block; }
.legende { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 16px; font-size: .85rem; color: var(--gris); }
.legende li { display: flex; align-items: center; gap: 8px; }
.legende i { flex: 0 0 auto; width: 16px; height: 12px; border-radius: 2px; }
.leg-ouv { background: var(--plan); }
.leg-zone { background: rgba(46,91,136,.22); border: 1px solid var(--plan); }
.leg-ext { background: rgba(227,155,0,.28); border: 1px solid var(--signal); }
.leg-barr { border-top: 3px dashed var(--signal); height: 0 !important; }
.leg-cent { background: var(--signal); }
.leg-sir { background: var(--encre); }

/* Animation unique : les zones de détection apparaissent une à une */
.zone { opacity: 0; animation: apparition .7s ease-out forwards; }
.z1 { animation-delay: .3s; } .z2 { animation-delay: .7s; } .z3 { animation-delay: 1.1s; } .z4 { animation-delay: 1.5s; } .z5 { animation-delay: 1.9s; }
@keyframes apparition { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .zone { animation: none; opacity: 1; } html { scroll-behavior: auto; } }

/* Sections */
.section { padding: 72px 0; }
.section-blanche { background: var(--blanc); border-top: 1px solid var(--trait); border-bottom: 1px solid var(--trait); }
.deux-colonnes { display: grid; grid-template-columns: 1.2fr 1fr; gap: 56px; align-items: start; }

.faits { margin: 0; display: grid; gap: 18px; }
.faits div { border-left: 4px solid var(--plan); padding: 4px 0 4px 16px; }
.faits dt { font-family: "Caladea", Georgia, serif; font-weight: 700; font-size: 1.6rem; line-height: 1.1; }
.faits dd { margin: 2px 0 0; color: var(--gris); }

.citation { font-family: "Caladea", Georgia, serif; font-style: italic; font-size: 1.25rem; color: var(--plan); border-top: 1px solid var(--trait); padding-top: 18px; margin-top: 28px; }

.raisons { list-style: none; margin: 32px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(185px, 1fr)); gap: 28px 32px; }
.raisons li { padding-top: 14px; border-top: 3px solid var(--encre); }
.raisons strong { display: block; font-family: "Caladea", Georgia, serif; font-size: 1.25rem; margin-bottom: 4px; }

.elements { margin-top: 40px; display: grid; gap: 0; }
.element { display: grid; grid-template-columns: 170px 1fr; gap: 28px; align-items: center; padding: 24px 0; border-top: 1px solid var(--trait); }
.element:last-child { border-bottom: 1px solid var(--trait); }
.element figure { margin: 0; background: var(--blanc); border-radius: 8px; padding: 10px; display: flex; justify-content: center; align-items: center; min-height: 120px; }
.element figure img { max-height: 150px; width: auto; }
.element h3 { display: flex; align-items: center; gap: 10px; }
.element h3 i { width: 14px; height: 14px; border-radius: 3px; flex: 0 0 auto; }
.element p { margin: 0; }

.etapes { list-style: none; counter-reset: etape; margin: 32px 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; }
.etapes li { counter-increment: etape; position: relative; padding-top: 52px; }
.etapes li::before { content: counter(etape); position: absolute; top: 0; left: 0; width: 38px; height: 38px; border-radius: 50%; border: 2px solid var(--plan); color: var(--plan); font-weight: 600; display: flex; align-items: center; justify-content: center; background: var(--blanc); }
.etapes li:not(:last-child)::after { content: ""; position: absolute; top: 19px; left: 46px; right: -12px; border-top: 2px dotted var(--trait); }
.etapes strong { display: block; margin-bottom: 4px; }
.etapes span { color: var(--gris); font-size: .95rem; }

.telesurveillance { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.prix { font-family: "Caladea", Georgia, serif; font-size: 3rem; font-weight: 700; line-height: 1; color: var(--plan); }
.prix small { font-family: "Inter", Arial, sans-serif; font-size: 1rem; font-weight: 400; color: var(--gris); }
.offre { margin-top: 20px; background: var(--blanc); border: 2px solid var(--signal); border-radius: 8px; padding: 18px 20px; }
.offre h3 { margin-bottom: 6px; }
.offre p { margin-bottom: .5em; }
.note { font-size: .82rem; color: var(--gris); }

/* Contact */
.contact { background: var(--encre); color: var(--blanc); }
.contact h2, .contact h3 { color: var(--blanc); }
.contact a { color: var(--blanc); }
.contact .conteneur { display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px; }
.telephone { display: inline-block; font-family: "Caladea", Georgia, serif; font-size: clamp(2rem, 4vw, 2.8rem); font-weight: 700; text-decoration: none; margin: 8px 0 16px; }
.coordonnees { list-style: none; padding: 0; margin: 0; line-height: 1.9; }
.contact .bouton-clair { color: var(--blanc); border-color: var(--blanc); }
.contact .bouton-clair:hover { background: var(--blanc); color: var(--encre); }

.pied { background: #142130; color: #AFC0D0; font-size: .82rem; padding: 28px 0; }
.pied a { color: #DCE6F0; }
.pied p { max-width: none; margin: 0 0 .6em; }

/* Téléphone et tablette */
@media (max-width: 900px) {
  .nav a:not(.bouton) { display: none; }
  .ouverture .conteneur, .deux-colonnes, .telesurveillance, .contact .conteneur { grid-template-columns: 1fr; gap: 32px; }
  .etapes { grid-template-columns: 1fr; }
  .etapes li { padding: 0 0 0 54px; min-height: 40px; }
  .etapes li::after { display: none; }
  .element { grid-template-columns: 1fr; gap: 12px; }
  .element figure { justify-content: flex-start; }
  .section { padding: 52px 0; }
}
@media (max-width: 520px) {
  .marque span { display: none; }
  .legende { grid-template-columns: 1fr; }
  body { font-size: 16px; }
}
.nav a.bouton { color: var(--blanc); }
.nav a.bouton:hover { color: var(--blanc); }