/* Identité Trigone Sécurité Privée : bleu marine du logo, cuivre, blanc. Chargé après site.css / pages.css / wp.css. */
:root{
  --bg:#0a1324;          /* marine profond */
  --bg-2:#0e1a31;
  --surface:#122242;
  --line:#22365c;
  --text:#f3f5f9;
  --muted:#9ba8c0;
  --accent:#d0742f;      /* cuivre du logo, éclairci pour le contraste */
  --accent-ink:#0a1324;
  --accent-soft:rgba(208,116,47,.14);
  --glow:0 0 0 1px rgba(208,116,47,.35),0 8px 30px rgba(208,116,47,.18);
  --radius:6px;          /* angles nets : rigueur, pas de pilule */
  --pill:6px;
}
body{font-family:"Barlow",system-ui,sans-serif;font-variation-settings:normal;background:var(--bg)}
.display{font-family:"Barlow Condensed","Barlow",sans-serif;font-variation-settings:normal;font-weight:700;letter-spacing:0;line-height:.98}
.it{font-style:normal}
.script{font-family:"Barlow Condensed",sans-serif;font-weight:600;font-style:italic;color:var(--accent);text-transform:none;letter-spacing:.01em}

/* Boutons : rectangles nets, texte en capitales espacées */
.btn{border-radius:var(--radius);text-transform:uppercase;letter-spacing:.08em;font-size:14px;font-weight:700;height:50px}
.btn-primary{background:var(--accent);color:var(--accent-ink)}
.btn-primary:hover{background:#e0843d;box-shadow:var(--glow)}
.btn-ghost{border-color:rgba(243,245,249,.3)}
.btn-dark{background:var(--accent-ink);color:#fff}

/* Accents cuivre : soulignés nets plutôt que halos */
.accent{color:var(--accent)}
.nav ul a::after{height:2px;background:var(--accent)}
.nav.scrolled{background:rgba(10,19,36,.96)}

/* Motif de fond discret : grille technique */
.tg-grid-bg{background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:64px 64px}

/* Hero : dégradé marine, la 3D dessine le reste */
.hero{background:radial-gradient(70% 80% at 75% 45%,rgba(208,116,47,.14),transparent 65%),linear-gradient(180deg,#0a1324,#0b1730 70%,var(--bg))}
.hero::before{background:linear-gradient(90deg,var(--bg) 0%,rgba(10,19,36,.8) 32%,rgba(10,19,36,0) 60%),linear-gradient(0deg,var(--bg) 0%,rgba(10,19,36,0) 25%)}
.hero h1{font-size:clamp(44px,5.2vw,88px)}
.hero .kicker{display:inline-flex;align-items:center;gap:10px;font-size:13px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--accent);margin-bottom:22px}
.hero .kicker::before{content:"";width:28px;height:2px;background:var(--accent)}
.hero .hint{font-family:"Barlow Condensed",sans-serif;font-style:normal;font-weight:600;font-size:15px;letter-spacing:.2em;text-transform:uppercase;transform:none;color:var(--muted)}

/* Bandeau de réassurance */
.facts{background:var(--bg-2)}
.fact .num small{color:var(--accent)}

/* Cartes : coin coupé en biais, rappel de la forme du logo */
.tg-cut{clip-path:polygon(0 0,calc(100% - 22px) 0,100% 22px,100% 100%,0 100%)}
.act,.plan,.tile,.svc,.perk,.inc,.pass,.extra,.seo-block,.kday,.icard,.zone,.sub-card,.incl,.form-card{border-radius:var(--radius)}
.act.green,.tile.green{background:var(--accent);color:var(--accent-ink)}
.act.green p,.act.green .tag,.tile.green p{color:rgba(10,19,36,.82)}
.act.green .tag i{color:var(--accent-ink)}
.act .ghost-word{-webkit-text-stroke-color:rgba(208,116,47,.22)}
.act.green .ghost-word{-webkit-text-stroke-color:rgba(255,255,255,.18)}
.act.outline{background:var(--bg-2)}

/* Liste « pourquoi nous » : numéros en cuivre */
.why li i{color:var(--accent)}

/* Bandeau d'appel : cuivre, texte blanc */
.cta-band{background:linear-gradient(120deg,#d0742f,#dc8440);color:var(--accent-ink)}
.cta-band p{color:rgba(10,19,36,.82)}
.cta-band .btn-dark{background:var(--bg);color:#fff}
.cta-band .btn-ghost{color:var(--accent-ink)!important;border-color:rgba(10,19,36,.45)!important}

/* Mention légale CNAPS (obligatoire) */
.tg-cnaps{grid-column:1/-1;margin-top:8px;padding:16px 18px;border:1px solid var(--line);border-radius:var(--radius);font-size:13px;line-height:1.55;color:var(--muted)}
.tg-cnaps strong{color:var(--text)}

/* Formulaires */
input,select,textarea{border-radius:var(--radius)}
.choice label:has(input:checked){background:rgba(208,116,47,.1)}

/* Visuel de remplacement tant qu'aucune photo n'est fournie */
.tg-ph{position:relative;background:linear-gradient(135deg,#13264a,#0b1630);overflow:hidden}
.tg-ph::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 40%,rgba(208,116,47,.18) 40%,rgba(208,116,47,.18) 44%,transparent 44%)}

/* Étapes de la méthode */
.how li{counter-increment:how}
.how li::before{content:"0" counter(how);position:absolute;top:22px;right:26px;font-family:"Barlow Condensed",sans-serif;font-size:56px;font-weight:700;color:rgba(208,116,47,.18);line-height:1}
.how li i{filter:none}

/* Secteurs : cartes avec icône cuivre */
.perk i,.svc i,.kfact i,.zone .ic{color:var(--accent)}
.kfact:nth-child(n) i{color:var(--accent)}
.zone .ic{background:var(--accent-soft)}

/* Page service : liste de points avec puces carrées */
.tg-points{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:12px 28px;margin-top:28px}
.tg-points li{position:relative;padding-left:22px;color:#d6dce8}
.tg-points li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:8px;background:var(--accent)}
@media (max-width:767px){.tg-points{grid-template-columns:1fr}}

/* Hero : visuel fixe (forme du logo) si la 3D est désactivée (mobile, appareil modeste) */
.hero-mark-fallback{display:none;position:absolute;right:8%;top:50%;transform:translateY(-50%) rotate(-4deg);height:min(62vh,520px);width:auto;opacity:.9;filter:drop-shadow(0 30px 60px rgba(0,0,0,.45));z-index:0}
.hero.no3d .hero-mark-fallback{display:block}
@media (max-width:900px){.hero-mark-fallback{right:50%;top:18%;transform:translateX(50%) rotate(-4deg);height:30vh;opacity:.35}}

/* En-têtes de page : grande forme du logo, en filigrane */
.phero-mark{position:absolute;right:6%;bottom:-6%;height:115%;width:auto;opacity:.12;z-index:0;pointer-events:none}
@media (max-width:767px){.phero-mark{right:-20%;opacity:.08}}

/* Visuels de remplacement avec la forme du logo */
.tg-logo-ph{display:grid;place-items:center;aspect-ratio:4/3}
.tg-logo-ph img{width:auto!important;height:58%!important;object-fit:contain!important;opacity:.9}
.why .team.tg-logo-ph{margin-top:32px;border:1px solid var(--line);border-radius:var(--radius)}
.details .media.tg-logo-ph{aspect-ratio:4/5}
.tg-mark-panel{display:grid;place-items:center;background:var(--bg)!important}
.tg-mark-panel img{height:62%;width:auto}

/* Cartes prestations cliquables */
a.act{color:inherit;text-decoration:none;transition:transform .4s var(--ease),border-color .3s}
a.act:hover{transform:translateY(-6px)}
.act-more{margin-top:18px;display:inline-flex;gap:8px;align-items:center;font-weight:700;font-size:14px;letter-spacing:.06em;text-transform:uppercase;color:var(--accent)}
.act.green .act-more{color:var(--accent-ink)}
.perk .more{margin-top:auto;padding-top:8px;color:var(--accent);font-weight:700;display:inline-flex;gap:8px;align-items:center}

/* Logo : format plus large que haut */
.nav .logo{width:150px!important;height:66px!important}
.tg-flogo{display:block;width:190px;height:88px}
.tg-flogo img{width:100%;height:100%;object-fit:contain;object-position:0 50%}
.curtain img{width:300px!important;height:140px!important}
@media (max-width:767px){.nav .logo{width:120px!important;height:54px!important}}

/* Photos réelles */
.tg-photo-panel{position:relative;overflow:hidden}
.tg-photo-panel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.phero-bg{opacity:.38}
.act.photo::after{background:linear-gradient(180deg,rgba(10,19,36,.55) 0%,rgba(10,19,36,0) 25%,rgba(10,19,36,.2) 45%,rgba(10,19,36,.94) 100%)}
.why .team{aspect-ratio:4/3;object-fit:cover}