/* custom/cyberesist-ui.css
 *
 * Couche de presentation ajoutee au miroir. Elle n'est PAS issue de WordPress :
 * tools/custom_ui.py la copie dans site/ et insere le <link> dans chaque page,
 * a chaque reconstruction. Ne jamais editer la copie presente dans site/.
 *
 * Objectif : rendre lisibles les blocs de texte denses d'Elementor, sans
 * toucher au contenu. Aucune couleur inventee — la palette est celle des
 * variables globales du site.
 */

:root {
    --cr-navy: #042940;   /* --e-global-color-1d3e253 */
    --cr-navy-haut: #063a57;
    --cr-lime: #9FC131;   /* --e-global-color-primary */
    --cr-violet: #84278F; /* --e-global-color-accent */
    --cr-bleu: #1783AF;   /* --e-global-color-0dc2cb3 */
    --cr-encre: #EAF2F6;
    --cr-attenue: #9FB8C6;
    --cr-trait: rgba(159, 193, 49, .22);

    /* Lime en COULEUR DE TEXTE. Le lime de la charte (#9FC131) ne donne que
       2,07:1 sur blanc : illisible, et sans recours puisqu'il echoue meme au
       seuil du grand texte. tools/contraste.py redirige vers cette variable
       les 563 emplois du lime en couleur de texte, et laisse ses 839 emplois
       d'ornement (bordures, aplats, icones) intacts : l'identite visuelle ne
       bouge pas, seule la lisibilite change.

       Passer par une variable plutot que par une couleur figee a une raison
       precise : une variable se redefinit par heritage. Sur fond sombre, le
       lime d'origine est parfaitement lisible et c'est LUI qu'il faut rendre
       — voir le bloc « fonds sombres » plus bas. Il en va de meme d'un fond
       en image : faute de pouvoir mesurer, on garde le choix d'origine. */
    --cr-lime-texte: #5A7312;   /* 5,39:1 sur blanc, 4,60:1 sur le gris #EDEDED */
}

/* --- Bandes dont le FOND est le lime ------------------------------------ */
/* Le lime est ici un aplat, pas du texte : il reste. C'est le texte blanc
   pose dessus qui ne donne que 2,07:1. Le bleu nuit de la charte y atteint
   7,27:1. CSS ne sait pas selectionner un element d'apres son fond calcule :
   tools/contraste.py pose la classe au moment de la construction. */
.cr-sur-lime :is(h1, h2, h3, h4, h5, h6, p, span, li),
.cr-sur-lime :is(h1, h2, h3, h4, h5, h6) .elementor-heading-title {
    color: var(--cr-navy) !important;
}

/* Le bouton de la bande garde ses couleurs : c'est le point d'appui visuel. */
.cr-sur-lime .elementor-button,
.cr-sur-lime .elementor-button span {
    color: #fff !important;
}

/* --- Titre anime d'Elementor Pro ---------------------------------------- */
/* Elementor Pro replie sur #AEBCB9 quand --dynamic-text-color n'est pas
   renseignee — 1,96:1 sur blanc. Le concepteur ne l'avait jamais reglee :
   ce gris n'est pas un choix, c'est un defaut d'usine. */
.elementor-headline-dynamic-text {
    --dynamic-text-color: var(--cr-lime-texte);
}

/* --- Menu principal : l'etat actif reste blanc -------------------------- */
/* Le menu est pose sur le bandeau vert (son etat normal est deja blanc).
   Elementor y passait au lime pour l'entree active et au survol : 1,89:1.
   Le lime assombri y serait pire encore (1,08:1) — c'est le seul endroit ou
   la correction generale va dans le mauvais sens. Le blanc donne 5,13:1 sur
   le vert assombri. */
.elementor-nav-menu .elementor-item.elementor-item-active,
.elementor-nav-menu .elementor-item.highlighted,
.elementor-nav-menu .elementor-item:hover,
.elementor-nav-menu .elementor-item:focus {
    color: #fff !important;
}

/* --- Fonds sombres : on rend son lime au texte --------------------------- */
/* Sur bleu nuit, #9FC131 donne 8,2:1 tandis que le lime assombri tombe a
   3,4:1 — la correction prevue pour le blanc produirait l'effet inverse ici.
   Chaque conteneur sombre redefinit donc la variable pour sa descendance. */
.cr-card,
.cr-sur-sombre,
.cr-sur-image,
.e-con:has(> .e-con-inner > .cr-card),
.e-con:has(> .cr-card) {
    --cr-lime-texte: var(--cr-lime);
}

/* --- Bande sombre sous les cartes -------------------------------------- */
/* Selectionne le conteneur Elementor qui porte les cartes, sans avoir a le
   nommer : c'est le seul dont un enfant direct est une carte. */
.e-con:has(> .e-con-inner > .cr-card),
.e-con:has(> .cr-card) {
    /* !important indispensable : Elementor retarde le chargement des fonds de
       conteneur avec une regle qui impose « background: none » tant que la
       classe .e-lazyloaded n'est pas posee. Comme un degrade est un fond
       d'image a ses yeux, il etait purement annule — la bande disparaissait et
       les cartes claires se retrouvaient sur le blanc de la page. */
    background: radial-gradient(120% 140% at 50% 0%, var(--cr-navy-haut) 0%, var(--cr-navy) 55%) !important;
    padding-top: clamp(2rem, 5vw, 3.5rem);
    padding-bottom: clamp(2rem, 5vw, 3.5rem);
}

/* --- La carte ----------------------------------------------------------- */
.cr-card {
    /* Fond OPAQUE, et !important : sur certaines pages Elementor pose un gris
       clair sur la carte elle-meme, avec une specificite superieure — le texte
       clair devenait illisible. Un fond opaque garantit aussi la lisibilite
       meme si la bande sombre venait a manquer : le voile seul en dependait. */
    background: linear-gradient(rgba(255, 255, 255, .035), rgba(255, 255, 255, .035)),
                var(--cr-navy) !important;
    border: 1px solid var(--cr-trait);
    border-radius: 16px;
    padding: clamp(1.4rem, 2.6vw, 2.2rem) !important;
    box-shadow: 0 18px 40px -28px rgba(0, 0, 0, .9);
}

.cr-card .elementor-widget-text-editor {
    color: var(--cr-encre);
    font-size: clamp(.95rem, .35vw + .88rem, 1.02rem);
    line-height: 1.72;
}

/* Titre de carte : DOMAIN INTELLIGENCE, INVESTIGATION... */
.cr-card h4 {
    color: var(--cr-lime);
    font-size: clamp(1rem, .6vw + .85rem, 1.18rem);
    letter-spacing: .06em;
    margin: 0 0 1.1rem;
    padding-bottom: .7rem;
    border-bottom: 1px solid var(--cr-trait);
}

/* --- Hierarchie : le corps de texte n'est plus tout en gras ------------- */
/* Le contenu d'origine est integralement en gras, ce qui revient a n'avoir
   aucune emphase. On rend sa graisse normale au corps de texte et on la
   reserve aux intertitres et aux vraies mises en avant. */
.cr-card li,
.cr-card p,
.cr-card .elementor-widget-text-editor {
    font-weight: 400;
}

.cr-card li :is(strong, b),
.cr-card p :is(strong, b) {
    font-weight: 600;
    color: #fff;
}

/* --- Intertitres -------------------------------------------------------- */
/* La classe est posee au build par tools/custom_ui.py, sur le BLOC : un <p> ou
   un <div> qui ne contient que du gras et dont le texte finit par " :". */
.cr-card .cr-label {
    margin: 1.7rem 0 .55rem;
    padding-left: .75rem;
    border-left: 3px solid var(--cr-lime);
    line-height: 1.5;
}

.cr-card .cr-label :is(strong, b) {
    color: #fff;
    font-weight: 600;
    font-size: .8em;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.cr-card .elementor-widget-text-editor > .cr-label:first-child,
.cr-card h4 + .cr-label {
    margin-top: 0;
}

/* Une partie du contenu a ete collee depuis un traitement de texte : elle
   embarque des polices et des couleurs en ligne qui cassent l'harmonie et
   resteraient en noir sur fond sombre. On les neutralise, dans les cartes
   uniquement. */
.cr-card [style*="font-family"],
.cr-card [style*="color"],
.cr-card [style*="background"] {
    font-family: inherit !important;
    color: inherit !important;
    background: none !important;
}

/* --- Listes ------------------------------------------------------------- */
.cr-card ul {
    list-style: none;
    margin: .35rem 0 0;
    padding-left: .2rem;
}

.cr-card li {
    position: relative;
    margin: .42rem 0;
    padding-left: 1.15rem;
    color: var(--cr-encre);
}

.cr-card li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .62em;
    width: .42rem;
    height: .42rem;
    border-radius: 50%;
    background: var(--cr-lime);
}

.cr-card li li::before {
    background: transparent;
    border: 1px solid var(--cr-attenue);
}

.cr-card ul ul {
    margin: .3rem 0 .6rem;
    padding-left: .9rem;
}

.cr-card p {
    margin: .55rem 0;
}

.cr-card a {
    color: var(--cr-lime);
    text-underline-offset: .18em;
}

/* --- Cartes d'offre (pages Tarifs / Pricing) ---------------------------- */
/* Ces cartes-la n'ont pas de <h4> : leur titre est un widget "heading", et
   leur contenu principal est une liste a pastilles cochees.
   Les !important repondent aux regles par-element d'Elementor, dont la
   specificite est plus forte que celle d'une feuille ajoutee. */
.cr-card .elementor-widget-heading .elementor-heading-title {
    color: #fff !important;
}

/* 17 lignes en capitales de 12 px ne se lisent pas : on revient a la casse
   normale et a une taille confortable. Le texte source, lui, est deja en
   casse normale — ce sont les capitales qui etaient ajoutees par la feuille
   d'origine. Retirer ce bloc rend les capitales. */
.cr-card .elementor-icon-list-text {
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-size: .95rem !important;
    color: var(--cr-encre) !important;
}

.cr-card .elementor-icon-list-item {
    margin-block: .2rem;
}

.cr-card .elementor-icon-list-icon svg {
    fill: var(--cr-lime);
}

.cr-card .elementor-divider-separator {
    border-block-start-color: var(--cr-trait) !important;
}

/* Notes de bas de carte et incises. */
.cr-card :is(em, i) {
    color: var(--cr-attenue);
}

/* Le bouton d'appel a l'action garde ses couleurs de marque : il doit rester
   le point le plus visible de la carte. */
.cr-card .elementor-button {
    box-shadow: 0 10px 24px -14px rgba(0, 0, 0, .9);
}

/* --- Niveaux de criticite ---------------------------------------------- */
.cr-card code,
.cr-sev {
    font-size: .78em;
    font-weight: 700;
    letter-spacing: .05em;
    padding: .12em .5em;
    border-radius: 999px;
    border: 1px solid currentColor;
    white-space: nowrap;
}

.cr-sev-critical { color: #FF8A80; }
.cr-sev-high     { color: #FFC266; }
.cr-sev-medium   { color: #FFE082; }
.cr-sev-low,
.cr-sev-info     { color: #87CFEE; }

/* --- Deux colonnes : laisser respirer ---------------------------------- */
@media (min-width: 1025px) {
    .e-con:has(> .e-con-inner > .cr-card) > .e-con-inner,
    .e-con:has(> .cr-card) {
        gap: clamp(1.2rem, 2vw, 2rem);
    }
}

/* Sur mobile, une carte dense devient vite un mur : on resserre. */
@media (max-width: 767px) {
    .cr-card {
        padding: 1.15rem !important;
    }
    .cr-card .elementor-widget-text-editor {
        line-height: 1.65;
    }
}

/* --- Repli : navigateur sans :has() ------------------------------------- */
/* La carte reste lisible meme si la bande sombre n'est pas appliquee. */
@supports not selector(:has(*)) {
    .cr-card {
        background: var(--cr-navy);
    }
}

/* ===========================================================================
 * Formulaire de contact servi par /api/ (remplace l'integration HubSpot)
 * ========================================================================= */

.cr-form {
    display: grid;
    gap: .9rem;
    max-width: 38rem;
}

.cr-form-ligne {
    display: grid;
    gap: .3rem;
}

.cr-form label {
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .03em;
    color: var(--cr-navy);
}

.cr-form label span[aria-hidden] {
    color: var(--cr-violet);
}

.cr-form input,
.cr-form textarea {
    width: 100%;
    padding: .62rem .8rem;
    border: 1px solid #c9d4da;
    border-radius: 8px;
    background: #fff;
    color: #1d2b33;
    font: inherit;
    font-size: .95rem;
    transition: border-color .15s, box-shadow .15s;
}

.cr-form input:focus,
.cr-form textarea:focus {
    outline: none;
    border-color: var(--cr-lime);
    box-shadow: 0 0 0 3px rgba(159, 193, 49, .25);
}

.cr-form textarea {
    resize: vertical;
    min-height: 7rem;
}

/* Le calcul de verification : volontairement discret, ce n'est pas l'etape
   qu'on veut mettre en avant. */
.cr-form-calcul {
    max-width: 18rem;
}

/* Piege a robots. Ni display:none ni visibility:hidden : certains robots les
   detectent et evitent le champ. On le sort du cadre. */
.cr-pot-de-miel {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.cr-form-envoi {
    justify-self: start;
    padding: .7rem 2rem;
    border: 0;
    border-radius: 8px;
    /* Le style de bouton du theme gagne sur cette feuille : il repeint le
       bouton en #588F27 avec du blanc, soit 3,91:1 — sous le seuil AA pour
       du 17 px. On garde le vert de la marque mais assombri a #4A7A20
       (5,13:1), d'ou les !important. */
    background: #4A7A20 !important;
    color: #fff !important;
    font: inherit;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background .15s, transform .15s;
}

.cr-form-envoi:hover:not(:disabled) {
    background: #3F6A1B !important;
}

.cr-form-envoi:disabled {
    opacity: .55;
    cursor: progress;
}

.cr-form-etat {
    margin: 0;
    font-size: .9rem;
    min-height: 1.3em;
}

.cr-form-etat--erreur { color: #a3261e; font-weight: 600; }
.cr-form-etat--succes { color: #2f6d1f; font-weight: 600; }

.cr-form-mention {
    margin: 0;
    font-size: .78rem;
    line-height: 1.5;
    /* #6b7b85 ne donnait que 4,38:1 sur blanc, juste sous le seuil AA. */
    color: #55646d;
}