/* ---------------------------------------------------------------------------
   Kilifia — site vitrine

   Écrit à la main plutôt que produit par un cadriciel : sept pages fixes ne
   justifient pas une chaîne de compilation, et le référencement se porte mieux
   sans rendu JavaScript. Le fichier se sert tel quel.

   La couleur vient de l'application elle-même — le #0b6b5b du favicon. Vitrine
   et logiciel doivent se ressembler : un prospect qui clique sur « essai
   gratuit » ne doit pas avoir l'impression de changer de produit.
--------------------------------------------------------------------------- */

/* --- Jetons -------------------------------------------------------------- */
:root {
    /* Vert-pétrole de l'application, décliné. */
    --marque: #0b6b5b;
    --marque-sombre: #084f43;
    --marque-claire: #0f8a75;
    --marque-voile: #e6f2ef;

    /* Orange chaud — la latérite, le soleil bas. Employé avec parcimonie :
       il ne sert qu'aux appels à l'action et aux chiffres qui comptent. */
    --accent: #d9662b;
    --accent-sombre: #b8511f;
    --accent-voile: #fdf1e9;

    /* Neutres biaisés vers le vert plutôt que gris purs : un gris neutre à
       côté d'un vert profond paraît sale. */
    --encre: #16211f;
    --encre-douce: #4a5956;
    --encre-tenue: #7b8a86;
    --trait: #dfe6e3;
    --fond: #ffffff;
    --fond-doux: #f6f9f8;
    --fond-sable: #faf7f2;

    --rayon: 14px;
    --rayon-petit: 8px;
    --ombre: 0 1px 2px rgb(11 107 91 / 6%), 0 8px 24px rgb(11 107 91 / 8%);
    --ombre-forte: 0 2px 4px rgb(11 107 91 / 8%), 0 16px 48px rgb(11 107 91 / 14%);

    --largeur: 1140px;
    --gouttiere: clamp(1.25rem, 5vw, 2.5rem);

    --titre: "DM Sans", "Segoe UI", system-ui, sans-serif;
    --texte: "Inter", "Segoe UI", system-ui, sans-serif;
}

/* --- Remise à zéro ------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

body {
    margin: 0;
    font-family: var(--texte);
    font-size: 1.0625rem;
    line-height: 1.65;
    color: var(--encre);
    background: var(--fond);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
    font-family: var(--titre);
    line-height: 1.15;
    letter-spacing: -0.02em;
    text-wrap: balance;
    margin: 0 0 0.5em;
}

h1 { font-size: clamp(2.25rem, 5.5vw, 3.75rem); font-weight: 700; }
h2 { font-size: clamp(1.75rem, 3.5vw, 2.5rem); font-weight: 700; }
h3 { font-size: 1.25rem; font-weight: 600; }

p { margin: 0 0 1em; max-width: 68ch; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--marque); text-underline-offset: 3px; }

:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 2px;
    border-radius: 4px;
}

/* --- Ossature ------------------------------------------------------------ */
.enveloppe {
    max-width: var(--largeur);
    margin-inline: auto;
    padding-inline: var(--gouttiere);
}

.section { padding-block: clamp(3.5rem, 8vw, 6rem); }
.section--douce { background: var(--fond-doux); }
.section--sable { background: var(--fond-sable); }
.section--sombre { background: var(--marque-sombre); color: #fff; }
.section--sombre h2 { color: #fff; }
.section--sombre p { color: #cfe3de; }

.entete-section { max-width: 46rem; margin-bottom: 2.5rem; }
.entete-section--centre { margin-inline: auto; text-align: center; }
.entete-section--centre p { margin-inline: auto; }

.surtitre {
    display: inline-block;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--marque);
    margin-bottom: 0.75rem;
}
.section--sombre .surtitre { color: #7fd3c1; }

.chapeau { font-size: 1.125rem; color: var(--encre-douce); }

/* --- Boutons ------------------------------------------------------------- */
.bouton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.85rem 1.5rem;
    border-radius: var(--rayon-petit);
    font-family: var(--titre);
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    border: 2px solid transparent;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
.bouton:hover { transform: translateY(-1px); }
.bouton:active { transform: translateY(0); }

.bouton--principal { background: var(--accent); color: #fff; box-shadow: 0 4px 14px rgb(217 102 43 / 28%); }
.bouton--principal:hover { background: var(--accent-sombre); box-shadow: 0 6px 20px rgb(217 102 43 / 34%); }

.bouton--marque { background: var(--marque); color: #fff; }
.bouton--marque:hover { background: var(--marque-sombre); }

.bouton--contour { border-color: var(--trait); color: var(--encre); background: #fff; }
.bouton--contour:hover { border-color: var(--marque); color: var(--marque); }

.bouton--clair { background: #fff; color: var(--marque-sombre); }
.bouton--clair:hover { background: #eef6f4; }

.groupe-boutons { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* --- En-tête ------------------------------------------------------------- */
.entete {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgb(255 255 255 / 88%);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--trait);
}
.entete__barre {
    display: flex;
    align-items: center;
    gap: 2rem;
    min-height: 72px;
}

.logo {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--titre);
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--marque-sombre);
    text-decoration: none;
    letter-spacing: -0.03em;
}
.logo__marque {
    display: grid;
    place-items: center;
    width: 34px; height: 34px;
    border-radius: 9px;
    background: var(--marque);
    color: #fff;
    font-size: 1.05rem;
}

.navigation { display: flex; gap: 1.75rem; margin-inline-start: auto; }
.navigation a {
    color: var(--encre-douce);
    text-decoration: none;
    font-size: 0.9375rem;
    font-weight: 500;
    padding-block: 0.35rem;
    border-bottom: 2px solid transparent;
}
.navigation a:hover { color: var(--marque); }
.navigation a[aria-current="page"] { color: var(--marque); border-bottom-color: var(--marque); }

.entete__actions { display: flex; align-items: center; gap: 0.75rem; }
.entete__actions .bouton { padding: 0.6rem 1.1rem; font-size: 0.9375rem; }

.bascule-menu {
    display: none;
    margin-inline-start: auto;
    background: none;
    border: 1px solid var(--trait);
    border-radius: var(--rayon-petit);
    padding: 0.5rem 0.7rem;
    cursor: pointer;
}

@media (max-width: 900px) {
    .navigation, .entete__actions { display: none; }
    .bascule-menu { display: block; }
    .entete[data-ouvert="true"] .navigation,
    .entete[data-ouvert="true"] .entete__actions {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        gap: 0.25rem;
        padding-block: 1rem;
        border-top: 1px solid var(--trait);
    }
    .entete[data-ouvert="true"] .entete__barre { flex-wrap: wrap; }
    .entete[data-ouvert="true"] .navigation a { padding: 0.6rem 0; }
}

/* --- Héros --------------------------------------------------------------- */
.heros {
    position: relative;
    padding-block: clamp(3rem, 8vw, 5.5rem) clamp(3rem, 7vw, 5rem);
    background:
        radial-gradient(60rem 30rem at 85% -10%, var(--marque-voile), transparent 60%),
        linear-gradient(180deg, #fff 0%, var(--fond-doux) 100%);
    overflow: hidden;
}
.heros__grille {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
}
@media (max-width: 900px) { .heros__grille { grid-template-columns: 1fr; } }

.etiquette {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.85rem;
    border-radius: 999px;
    background: #fff;
    border: 1px solid var(--trait);
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--encre-douce);
    margin-bottom: 1.25rem;
}
.etiquette__point { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }

.heros p.chapeau { font-size: 1.1875rem; margin-bottom: 1.75rem; }

.heros__mention {
    margin-top: 1.25rem;
    font-size: 0.875rem;
    color: var(--encre-tenue);
}

/* --- Maquette de tableau de bord ---------------------------------------- */
/* Dessinée en HTML plutôt que photographiée : une capture d'écran vieillit à
   la première évolution de l'interface, et pèse cent fois plus lourd. */
.maquette {
    border-radius: var(--rayon);
    background: #fff;
    box-shadow: var(--ombre-forte);
    overflow: hidden;
    border: 1px solid var(--trait);
}
.maquette__barre {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.7rem 0.9rem;
    background: var(--fond-doux);
    border-bottom: 1px solid var(--trait);
}
.maquette__pastille { width: 10px; height: 10px; border-radius: 50%; background: var(--trait); }
.maquette__adresse {
    margin-inline-start: 0.6rem;
    font-size: 0.75rem;
    color: var(--encre-tenue);
    font-family: var(--texte);
}
.maquette__corps { padding: 1.1rem; display: grid; gap: 0.9rem; }

.maquette__chiffres { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.7rem; }
.mini-carte {
    background: var(--fond-doux);
    border: 1px solid var(--trait);
    border-radius: var(--rayon-petit);
    padding: 0.7rem;
}
.mini-carte__libelle { font-size: 0.6875rem; color: var(--encre-tenue); text-transform: uppercase; letter-spacing: 0.05em; }
.mini-carte__valeur { font-family: var(--titre); font-size: 1.05rem; font-weight: 700; color: var(--encre); font-variant-numeric: tabular-nums; }
.mini-carte__valeur--accent { color: var(--accent); }

.maquette__lignes { display: grid; gap: 0.4rem; }
.ligne-fictive {
    display: grid;
    grid-template-columns: 4.5rem 1fr 3.5rem;
    gap: 0.6rem;
    align-items: center;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--trait);
    border-radius: var(--rayon-petit);
    font-size: 0.75rem;
}
.ligne-fictive__ref { font-weight: 600; color: var(--marque); font-variant-numeric: tabular-nums; }
.ligne-fictive__nom { color: var(--encre-douce); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ligne-fictive__montant { text-align: right; font-variant-numeric: tabular-nums; color: var(--encre); font-weight: 600; }

.jeton {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 600;
}
.jeton--vert { background: var(--marque-voile); color: var(--marque-sombre); }
.jeton--orange { background: var(--accent-voile); color: var(--accent-sombre); }

/* --- Bandeau de confiance ------------------------------------------------ */
.confiance { border-block: 1px solid var(--trait); background: #fff; padding-block: 2rem; }
.confiance__grille {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1.5rem;
    text-align: center;
}
.confiance__valeur {
    font-family: var(--titre);
    font-size: clamp(1.75rem, 3vw, 2.25rem);
    font-weight: 700;
    color: var(--marque);
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}
.confiance__libelle { font-size: 0.875rem; color: var(--encre-douce); }

/* --- Cartes -------------------------------------------------------------- */
.grille { display: grid; gap: 1.25rem; }
.grille--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grille--3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

.carte {
    background: #fff;
    border: 1px solid var(--trait);
    border-radius: var(--rayon);
    padding: 1.5rem;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.carte:hover { transform: translateY(-3px); box-shadow: var(--ombre); border-color: #c9d9d5; }
.carte h3 { margin-bottom: 0.4rem; }
.carte p { font-size: 0.9375rem; color: var(--encre-douce); margin-bottom: 0; }

.carte__icone {
    display: grid;
    place-items: center;
    width: 44px; height: 44px;
    border-radius: 11px;
    background: var(--marque-voile);
    color: var(--marque);
    margin-bottom: 1rem;
}
.carte__icone svg { width: 22px; height: 22px; }

/* --- Tableaux ------------------------------------------------------------ */
.table-enveloppe { overflow-x: auto; border: 1px solid var(--trait); border-radius: var(--rayon); background: #fff; }
table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; min-width: 40rem; }
th, td { padding: 0.9rem 1.1rem; text-align: left; border-bottom: 1px solid var(--trait); }
thead th { background: var(--fond-doux); font-family: var(--titre); font-weight: 600; font-size: 0.875rem; }
tbody tr:last-child td { border-bottom: none; }
td.oui { color: var(--marque); font-weight: 600; }
td.non { color: var(--encre-tenue); }

/* --- Témoignages --------------------------------------------------------- */
.temoignage {
    background: #fff;
    border: 1px solid var(--trait);
    border-radius: var(--rayon);
    padding: 1.75rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.temoignage blockquote { margin: 0; font-size: 1.0625rem; color: var(--encre); }
.temoignage figcaption { display: flex; align-items: center; gap: 0.75rem; margin-top: auto; }
.temoignage__initiales {
    display: grid; place-items: center;
    width: 40px; height: 40px; border-radius: 50%;
    background: var(--marque-voile); color: var(--marque-sombre);
    font-family: var(--titre); font-weight: 700; font-size: 0.875rem;
}
.temoignage__nom { font-weight: 600; font-size: 0.9375rem; }
.temoignage__role { font-size: 0.8125rem; color: var(--encre-tenue); }

/* Bandeau d'avertissement pour les contenus d'exemple. Voir README. */
.avertissement {
    display: flex;
    gap: 0.75rem;
    padding: 0.9rem 1.1rem;
    border-radius: var(--rayon-petit);
    background: var(--accent-voile);
    border: 1px solid #f0cdb4;
    font-size: 0.875rem;
    color: #7c3a12;
    margin-bottom: 1.5rem;
}
.avertissement strong { font-weight: 600; }

/* --- Tarifs -------------------------------------------------------------- */
.formules { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.25rem; align-items: start; }
.formule {
    background: #fff;
    border: 1px solid var(--trait);
    border-radius: var(--rayon);
    padding: 1.75rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.formule--phare { border-color: var(--marque); box-shadow: var(--ombre); position: relative; }
.formule__ruban {
    position: absolute; top: -0.75rem; left: 1.75rem;
    background: var(--marque); color: #fff;
    padding: 0.2rem 0.7rem; border-radius: 999px;
    font-size: 0.75rem; font-weight: 600; font-family: var(--titre);
}
.formule__prix { font-family: var(--titre); font-size: 2.25rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.formule__unite { font-size: 0.875rem; color: var(--encre-tenue); font-weight: 400; }
.formule__equivalent { font-size: 0.875rem; color: var(--encre-tenue); }
.formule ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.55rem; font-size: 0.9375rem; }
.formule li { display: flex; gap: 0.6rem; align-items: flex-start; }
.formule li::before { content: "✓"; color: var(--marque); font-weight: 700; flex: none; }
.formule li.absent { color: var(--encre-tenue); }
.formule li.absent::before { content: "—"; color: var(--encre-tenue); }

/* --- Accordéon ----------------------------------------------------------- */
.accordeon { border: 1px solid var(--trait); border-radius: var(--rayon); background: #fff; overflow: hidden; }
.accordeon details + details { border-top: 1px solid var(--trait); }
.accordeon summary {
    padding: 1.1rem 1.25rem;
    font-family: var(--titre);
    font-weight: 600;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: center;
    list-style: none;
}
.accordeon summary::-webkit-details-marker { display: none; }
.accordeon summary::after { content: "+"; font-size: 1.35rem; color: var(--marque); flex: none; line-height: 1; }
.accordeon details[open] summary::after { content: "−"; }
.accordeon summary:hover { background: var(--fond-doux); }
.accordeon .reponse { padding: 0 1.25rem 1.25rem; color: var(--encre-douce); font-size: 0.9375rem; }
.accordeon .reponse p:last-child { margin-bottom: 0; }

/* --- Formulaire ---------------------------------------------------------- */
.formulaire { display: grid; gap: 1.1rem; }
.champ { display: grid; gap: 0.35rem; }
.champ label { font-size: 0.875rem; font-weight: 600; }
.champ .aide { font-size: 0.8125rem; color: var(--encre-tenue); }
.champ input, .champ textarea, .champ select {
    font: inherit;
    font-size: 1rem;
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--trait);
    border-radius: var(--rayon-petit);
    background: #fff;
    color: var(--encre);
}
.champ input:focus, .champ textarea:focus, .champ select:focus { border-color: var(--marque); outline: none; box-shadow: 0 0 0 3px var(--marque-voile); }
.champ textarea { min-height: 8rem; resize: vertical; }

.message-succes {
    padding: 1rem 1.25rem;
    border-radius: var(--rayon-petit);
    background: var(--marque-voile);
    border: 1px solid #a8d5cb;
    color: var(--marque-sombre);
    font-size: 0.9375rem;
}
.message-succes[hidden] { display: none; }

/* --- Appel à l'action ---------------------------------------------------- */
.appel {
    background: linear-gradient(135deg, var(--marque-sombre), var(--marque));
    color: #fff;
    border-radius: var(--rayon);
    padding: clamp(2rem, 5vw, 3.5rem);
    text-align: center;
}
.appel h2 { color: #fff; }
.appel p { color: #cfe3de; margin-inline: auto; margin-bottom: 1.75rem; }
.appel .groupe-boutons { justify-content: center; }

/* --- Pied de page -------------------------------------------------------- */
.pied { background: var(--encre); color: #b9c6c3; padding-block: 3rem 2rem; font-size: 0.9375rem; }
.pied__grille { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: 2rem; }
@media (max-width: 800px) { .pied__grille { grid-template-columns: 1fr 1fr; } }
.pied h4 { color: #fff; font-size: 0.9375rem; margin-bottom: 0.9rem; }
.pied ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.5rem; }
.pied a { color: #b9c6c3; text-decoration: none; }
.pied a:hover { color: #fff; text-decoration: underline; }
.pied__logo { color: #fff; margin-bottom: 0.75rem; }
.pied__logo .logo__marque { background: var(--marque-claire); }
.pied p { font-size: 0.875rem; color: #8fa19d; }
.pied__bas {
    margin-top: 2.5rem; padding-top: 1.5rem;
    border-top: 1px solid #2b3a37;
    display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between;
    font-size: 0.8125rem; color: #8fa19d;
}

/* --- Apparition au défilement -------------------------------------------
   Le masquage ne s'applique **que** si `js-anime` est posé sur `<html>`, par
   un script en tête de page. Sans JavaScript — script bloqué, erreur, vieux
   navigateur — le contenu s'affiche normalement.

   L'inverse, qui est la façon courante d'écrire ces animations, rend quinze
   sections invisibles au premier pépin. Un site vitrine qui ne montre rien ne
   vend rien, et personne ne s'en aperçoit avant longtemps : la page se charge,
   ne signale aucune erreur, et paraît simplement vide. */
.js-anime .apparait {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}
.js-anime .apparait.vu { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    .js-anime .apparait { opacity: 1; transform: none; }
}