/* ==========================================================================
   ECOLAX — feuille de style de marque
   Charte graphique Ecolax v1.0 (identite/charte-ecolax.md)

   Poppins : marque, titres, texte de communication.
   Inter   : interface, tableaux et TOUS les chiffres (chasse fixe).
   Vert    : marque et validation. Ambre : offres uniquement, en aplat.

   Servie telle quelle depuis /public : aucune etape de build.
   ========================================================================== */

/* Les polices ne sont PAS importees ici. Un @import de feuille bloque le
   rendu et s'execute apres le telechargement de ce fichier : sur la page de
   verification de recu, ouverte depuis un SMS en data mobile, cela coute
   plusieurs secondes d'ecran blanc. Chaque gabarit charge donc en <link>
   les seules graisses dont il a besoin, et les jetons ci-dessous prevoient
   toujours une police systeme de repli. */

/* --------------------------------------------------------------- jetons */
:root {
    color-scheme: light;

    /* couleurs de marque */
    --ecolax-vert: #0E7A46;
    --ecolax-vert-profond: #0A5433;
    --ecolax-vert-vif: #3FBF74;          /* fonds sombres uniquement */
    --ecolax-encre: #0F2E24;
    --ecolax-ambre: #F2A93B;             /* aplat uniquement */
    --ecolax-ambre-txt: #9A6208;         /* si l'accent doit etre du texte */

    /* neutres */
    --ecolax-gris: #5E6F68;
    --ecolax-fond: #F5F8F6;
    --ecolax-filet: #E2EAE5;
    --ecolax-blanc: #FFFFFF;

    /* etats */
    --ecolax-succes: #0E7A46;
    --ecolax-alerte: #B3261E;
    --ecolax-alerte-fond: #FBE9E7;

    /* typographie */
    --ecolax-police: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --ecolax-police-chiffres: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

    /* mise en page */
    --ecolax-gouttiere: 20px;
    --ecolax-largeur: 1140px;
    --ecolax-rayon: 16px;
    --ecolax-ombre: 0 1px 2px rgba(15, 46, 36, .04), 0 10px 30px rgba(15, 46, 36, .07);
    --ecolax-ombre-forte: 0 2px 6px rgba(15, 46, 36, .06), 0 24px 56px rgba(15, 46, 36, .14);
}

/* ----------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
    margin: 0;
    font-family: var(--ecolax-police);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.65;
    color: var(--ecolax-encre);
    background: var(--ecolax-blanc);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; height: auto; }
a { color: var(--ecolax-vert); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { margin: 0; line-height: 1.16; font-weight: 600; letter-spacing: -.022em; }
p { margin: 0; }

/* Chiffres : Inter a chasse fixe. Obligatoire sur montants et tableaux. */
.ecx-num, .ecx-montant, table td, table th {
    font-family: var(--ecolax-police-chiffres);
    font-variant-numeric: tabular-nums;
}

.ecx-wrap {
    max-width: var(--ecolax-largeur);
    margin: 0 auto;
    padding: 0 var(--ecolax-gouttiere);
}
.ecx-sr {
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* -------------------------------------------------- motifs de marque */

/* La dentelure : bord inferieur des blocs sombres, bas des recus.
   Teinte pilotee par --dent (couleur du bloc au-dessus). */
.ecx-dentelure {
    height: 13px;
    flex: none;
    background:
        linear-gradient(-45deg, transparent 50%, var(--dent, var(--ecolax-encre)) 50%) 0 0 / 13px 13px repeat-x,
        linear-gradient(45deg, transparent 50%, var(--dent, var(--ecolax-encre)) 50%) 0 0 / 13px 13px repeat-x;
    transform: scaleY(-1);
}
.ecx-dentelure--bas { transform: none; }

/* Le fanion : petit recu devant les sur-titres. */
.ecx-fanion {
    display: inline-block;
    width: 15px; height: 21px;
    background: var(--ecolax-vert);
    margin-right: 11px;
    vertical-align: -4px;
    flex: none;
    border-radius: 3px 3px 0 0;
    clip-path: polygon(0 0, 100% 0, 100% 76%, 83% 100%, 66% 76%, 50% 100%, 33% 76%, 16% 100%, 0 76%);
}
.ecx-fanion--clair { background: var(--ecolax-vert-vif); }

.ecx-sur-titre {
    display: flex; align-items: center;
    font-size: .775rem; font-weight: 600;
    letter-spacing: .14em; text-transform: uppercase;
    color: var(--ecolax-vert);
    margin-bottom: 16px;
}
.ecx-sombre .ecx-sur-titre { color: var(--ecolax-vert-vif); }

/* Bloc sombre de marque, avec le recu en filigrane. */
.ecx-sombre {
    position: relative;
    overflow: hidden;
    color: #fff;
    background: linear-gradient(152deg, var(--ecolax-encre) 0%, #0d4a2e 55%, var(--ecolax-vert) 100%);
}
.ecx-sombre::after {
    content: "";
    position: absolute;
    pointer-events: none;
    width: 480px; height: 480px;
    right: -60px; top: 40px;
    opacity: .3;
    background: url("../img/ecolax-filigrane.svg") no-repeat center / contain;
}
.ecx-sombre > * { position: relative; z-index: 1; }

/* -------------------------------------------------------------- boutons */
.ecx-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    padding: 14px 26px;
    border-radius: 999px;
    font-family: var(--ecolax-police);
    font-size: .94rem; font-weight: 500; line-height: 1.2;
    border: 1.5px solid transparent;
    cursor: pointer; text-align: center;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
}
.ecx-btn:hover { text-decoration: none; transform: translateY(-1px); }
.ecx-btn:focus-visible { outline: 3px solid var(--ecolax-vert-vif); outline-offset: 2px; }

.ecx-btn--vert { background: var(--ecolax-vert); color: #fff; box-shadow: 0 6px 20px rgba(14, 122, 70, .3); }
.ecx-btn--vert:hover { background: #0f8b4f; color: #fff; box-shadow: 0 12px 26px rgba(14, 122, 70, .36); }

/* Ambre : offres et urgences commerciales. Jamais une action destructrice. */
.ecx-btn--ambre { background: var(--ecolax-ambre); color: var(--ecolax-encre); box-shadow: 0 6px 20px rgba(242, 169, 59, .34); }
.ecx-btn--ambre:hover { background: #e69c26; color: var(--ecolax-encre); }

.ecx-btn--fantome { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .42); }
.ecx-btn--fantome:hover { background: rgba(255, 255, 255, .1); border-color: #fff; color: #fff; }

.ecx-btn--ligne { background: transparent; color: var(--ecolax-vert); border-color: var(--ecolax-vert); }
.ecx-btn--ligne:hover { background: var(--ecolax-vert); color: #fff; }

/* Actions lourdes et reversibles-mais-couteuses : suspendre un
   etablissement, couper un acces. Ni vert (qui se lit « continuez »), ni
   ambre (reserve aux offres par la charte). Jamais utilise pour une
   suppression definitive — il n'y en a pas dans le produit. */
.ecx-btn--alerte { background: transparent; color: var(--ecolax-alerte); border-color: var(--ecolax-alerte); }
.ecx-btn--alerte:hover { background: var(--ecolax-alerte); color: #fff; }

.ecx-btn--sm { padding: 10px 20px; font-size: .87rem; }
.ecx-btn--bloc { width: 100%; }

/* --------------------------------------------------------------- cartes */
.ecx-carte {
    background: #fff;
    border: 1px solid var(--ecolax-filet);
    border-radius: var(--ecolax-rayon);
    padding: 26px 24px;
    box-shadow: var(--ecolax-ombre);
}
.ecx-encart {
    background: #EDF6F0;
    border-left: 4px solid var(--ecolax-vert);
    border-radius: 0 12px 12px 0;
    padding: 22px 26px;
    font-weight: 300;
    font-size: .97rem;
    max-width: 74ch;
}
.ecx-encart b { font-weight: 500; }

/* ------------------------------------------------------------ sections */
.ecx-section { padding: 72px 0; }
@media (min-width: 900px) { .ecx-section { padding: 100px 0; } }
.ecx-section--fond { background: var(--ecolax-fond); }
.ecx-section h2 { font-size: clamp(1.6rem, 4.3vw, 2.4rem); margin-bottom: 16px; max-width: 24ch; }
.ecx-sombre h2 { color: #fff; }
.ecx-chapo { font-size: 1.04rem; color: var(--ecolax-gris); font-weight: 300; max-width: 62ch; }
.ecx-sombre .ecx-chapo { color: rgba(255, 255, 255, .76); }

/* ------------------------------------------------------- barre de marque */
.ecx-nav {
    position: sticky; top: 0; z-index: 60;
    background: rgba(15, 46, 36, .97);
    backdrop-filter: saturate(140%) blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.ecx-nav__in { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 64px; }
.ecx-nav__in img { height: 34px; width: auto; }
.ecx-nav__liens { display: none; gap: 28px; align-items: center; }
.ecx-nav__liens a { color: rgba(255, 255, 255, .82); font-size: .875rem; font-weight: 400; }
.ecx-nav__liens a:hover { color: #fff; text-decoration: none; }
@media (min-width: 940px) { .ecx-nav__liens { display: flex; } }

/* ------------------------------------------------------------ pied */
.ecx-pied {
    background: #0b241c;
    color: rgba(255, 255, 255, .6);
    padding: 46px 0 34px;
    font-size: .85rem;
    font-weight: 300;
}
.ecx-pied__haut {
    display: flex; flex-direction: column; gap: 26px; align-items: flex-start;
    padding-bottom: 26px; border-bottom: 1px solid rgba(255, 255, 255, .12);
}
@media (min-width: 760px) {
    .ecx-pied__haut { flex-direction: row; justify-content: space-between; align-items: center; }
}
.ecx-pied__bas { display: flex; flex-wrap: wrap; gap: 8px 26px; justify-content: space-between; padding-top: 22px; }
.ecx-pied a { color: rgba(255, 255, 255, .78); }
.ecx-pied strong { color: rgba(255, 255, 255, .88); font-weight: 500; }

/* ------------------------------------------------------------- le recu */
/* Utilise sur la page d'accueil et par la page publique de verification. */
.ecx-recu__corps {
    background: #fff;
    border-radius: 9px 9px 0 0;
    padding: 15px;
    font-family: var(--ecolax-police-chiffres);
    font-variant-numeric: tabular-nums;
    font-size: .63rem;
    line-height: 1.6;
    color: var(--ecolax-encre);
}
.ecx-recu__tete {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding-bottom: 9px; margin-bottom: 9px;
    border-bottom: 1px dashed var(--ecolax-filet);
}
.ecx-recu__tete img { height: 15px; }
.ecx-recu__no { color: var(--ecolax-vert); font-weight: 600; font-size: .6rem; }
.ecx-recu__l { display: flex; justify-content: space-between; gap: 10px; }
.ecx-recu__l span:first-child { color: var(--ecolax-gris); }
.ecx-recu__tot {
    display: flex; justify-content: space-between; gap: 10px; font-weight: 600;
    border-top: 1px solid var(--ecolax-filet); margin-top: 8px; padding-top: 8px;
}
.ecx-recu__dent {
    height: 8px;
    background:
        linear-gradient(-45deg, transparent 50%, #fff 50%) 0 0 / 8px 8px repeat-x,
        linear-gradient(45deg, transparent 50%, #fff 50%) 0 0 / 8px 8px repeat-x;
}

/* ------------------------------------------------------- apparition */
.ecx-reveal { opacity: 0; transform: translateY(18px); transition: opacity .55s ease, transform .55s ease; }
.ecx-reveal.ecx-vu { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    .ecx-reveal { opacity: 1; transform: none; transition: none; }
}