/* ==========================================================================
   LDS INFORMATIK - Direction EDITORIAL (surcouche, chargee APRES style.css + lds-brand.css)
   Change la FORME, pas les textes ni les couleurs de marque :
   - bords nets (petits rayons), bordures navy 2px, ombres portees pleines
   - typo Sora plus grosse / plus serree (titres affirmes)
   Respect DA : corail = CTA/accents uniquement (jamais fonds, eyebrows, titres).
   Theme-aware : s'appuie sur les tokens existants (--ink, --card, --line, --deep, --primary, --coral).
   ========================================================================== */

:root{
  --r:5px;                 /* rayon generique resserre */
  --ed-bd:#12224e;         /* bordure editoriale (navy) - clair */
  --ed-sh:#12224e;         /* ombre portee pleine - clair */
}
[data-theme="dark"]{
  --ed-bd:#3a4c80;         /* bordure visible sur fond sombre */
  --ed-sh:#223058;         /* bloc d'ombre plus clair que le fond (lisible en sombre) */
}

/* ---------- Typographie affirmee ---------------------------------------- */
h1,h2{letter-spacing:-.035em}
h3,h4{letter-spacing:-.02em}
.hero h1,.lr-hero h1{font-weight:800;line-height:1.0;letter-spacing:-.04em}
.hero h1{font-size:clamp(2.6rem,5.6vw,4.3rem)}
.lr-hero h1{font-size:clamp(2.2rem,5vw,3.4rem)}
.head h2{font-weight:800}
/* Eyebrows en corail (exception validee pour la direction Editorial) */
.eyebrow{font-weight:700;color:var(--coral)}
.eyebrow::before{background:var(--coral)}
.lr-eyebrow{color:var(--coral)}

/* ---------- Boutons : nets, francs -------------------------------------- */
.btn{border-radius:4px;font-weight:700}
.btn-primary,.btn-coral{box-shadow:none}
.btn-primary:hover,.btn-coral:hover{box-shadow:none;transform:translateY(-2px)}
.btn-ghost{border-width:2px;border-color:var(--ed-bd);color:var(--ink)}
.btn-ghost:hover{background:var(--ed-bd);color:#fff;border-color:var(--ed-bd)}

/* ---------- Surfaces "cartes" : bordure navy + ombre pleine ------------- */
.card,.mini,.panel,.why,.quote,.qa,.lds-form,.contact-info,.other-card,
.founder-card,.opt,.modal-box,.feature,.pzcard,.realcard,.blogcard,.need,.needcard,
.step-card,.tcard,.pcard,.vcard{
  border:2px solid var(--ed-bd)!important;
  border-radius:5px;
  box-shadow:5px 5px 0 var(--ed-sh);
  transition:transform .16s ease, box-shadow .16s ease;
}
.card:hover,.mini:hover,.why:hover,.other-card:hover,.opt:hover,.feature:hover,
.need:hover,.needcard:hover,.pzcard:hover,.realcard:hover,.blogcard:hover,.tcard:hover,.pcard:hover,.vcard:hover{
  transform:translate(-2px,-2px);
  box-shadow:8px 8px 0 var(--coral);
  border-color:var(--ed-bd);
}
/* on retire la barre bleue animee en haut des cartes (remplacee par le style net) */
.card::before{display:none!important}

/* icones de carte : carre net plutot que coins arrondis mous */
.card .ic,.mini .ic,.why .ic,.ric,.oic,.di,.step-ic,.feat-ic{border-radius:4px}

/* ---------- Bandeau stats en corail (comme la maquette Editorial) ------- */
.strip{background:var(--coral);border-radius:6px;box-shadow:none;border:2px solid var(--ed-bd)}
.strip .st .n,.strip .st .n span{color:#fff}
.strip .st .lab{color:#ffe1d8}

/* ---------- Sections teintees : bords nets ----------------------------- */
.svc-section,.faq-section{border-top:2px solid var(--ed-bd)}

/* ---------- En-tete / pied : filet net ---------------------------------- */
.site-header{border-bottom:2px solid var(--ed-bd)}
.dropdown-inner{border:2px solid var(--ed-bd);border-radius:6px;box-shadow:8px 8px 0 var(--ed-sh)}

/* ---------- Formulaires : champs nets ----------------------------------- */
.field input,.field textarea,.field select,
.lds-form input,.lds-form textarea,.lds-form select,input[type=text],input[type=email],input[type=tel],textarea,select{
  border-radius:4px;border-width:2px;
}
/* Filet de securite : champs bruts suivent le theme sombre (evite les champs blancs) */
[data-theme="dark"] input[type=text],[data-theme="dark"] input[type=email],
[data-theme="dark"] input[type=tel],[data-theme="dark"] input[type=number],
[data-theme="dark"] textarea,[data-theme="dark"] select{
  background-color:#0A1430;color:var(--ink);border-color:var(--line);
}
/* Champs des formulaires inline (.rf = reparation/pc, .gpf = guadeloupe) : coins nets + theme sombre */
.rf .inp,.gpf .inp{border-radius:4px;border-width:2px}
[data-theme="dark"] .rf .inp,[data-theme="dark"] .gpf .inp{
  background:#0A1430;color:var(--ink);border-color:var(--line);
}

/* ---------- Pastilles / badges : on garde le rond (ne pas durcir) ------- */
.badge-trust,.feat-badge,.tag,.allgood,.lr-tg,.pill,.chip{border-radius:999px!important}
.badge-trust{border-width:1.5px}

/* ---------- Panneau hero "supervision" (home alternative) -------------- */
.panel{border-radius:6px}

/* ---------- Page d'accueil : davantage de corail (valide) --------------- */
body.home .lr-hl{color:var(--coral)}                 /* mot cle du hero */
body.home .needarr{background:var(--coral)}           /* fleches des cartes services */
body.home .qa button .pm{background:rgba(240,96,58,.14);color:var(--coral)}  /* marqueur FAQ */
body.home .qa.open button .pm{background:var(--coral);color:#fff}

/* ---------- Respect du mouvement reduit -------------------------------- */
@media (prefers-reduced-motion:reduce){
  .card,.mini,.why,.other-card,.opt,.feature,.need{transition:none}
}