/*
|--------------------------------------------------------------------------
|   public/css/sections.css
|--------------------------------------------------------------------------
|
|   Accroche (hero), fonds de sections, titres de niveau 2, cartes,
|   et les blocs propres à chaque section de l'accueil.
|
|   Les fonds ne suivent PAS une alternance mécanique (nth-child) mais
|   des classes explicites : chaque section a une intention, et le fond
|   la souligne. Blanc pour ce qui se lit, clair pour ce qui structure,
|   nuit pour ce qui ouvre et ce qui conclut (accroche, contact).
*/

section { padding: 6rem 0; }

.fond-clair { background: var(--fond-alt); }

.fond-sombre {
    background: var(--nuit);
    color: #c9cfdd;
    position: relative;
    overflow: hidden;
}
.fond-sombre h1,
.fond-sombre h2,
.fond-sombre h3 { color: #fff; }
.fond-sombre .discret  { color: #9aa2b8; }
.fond-sombre .accroche { color: #b8c0d4; }
.fond-sombre .surtitre { color: var(--teal-vif); }
.fond-sombre .surtitre::before { color: #5d6782; }
.fond-sombre a:not(.bouton) { color: var(--teal-vif); }
.fond-sombre .carte {
    background: rgb(255 255 255 / .03);
    border-color: rgb(255 255 255 / .08);
    box-shadow: none;
}

/* Le décor des fonds nuit : une grille fine qui s'efface vers les bords,
   et deux halos aux couleurs du logo. Purement décoratif, en CSS : pas
   d'image à charger. Le ::before reste SOUS le contenu (z-index). */
.fond-sombre::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background:
        radial-gradient(40rem 28rem at 85% -10%, rgb(14 147 132 / .28), transparent 70%),
        radial-gradient(36rem 26rem at -5% 110%, rgb(58 76 158 / .35), transparent 70%),
        linear-gradient(rgb(255 255 255 / .035) 1px, transparent 1px) 0 0 / 2.5rem 2.5rem,
        linear-gradient(90deg, rgb(255 255 255 / .035) 1px, transparent 1px) 0 0 / 2.5rem 2.5rem;
    -webkit-mask-image: radial-gradient(ellipse at center, #000 40%, transparent 85%);
    mask-image: radial-gradient(ellipse at center, #000 40%, transparent 85%);
}
.fond-sombre > .contenu { position: relative; }

/* --- Titres de section --- */
.entete-section { max-width: 46rem; margin-bottom: 3rem; }
.entete-section .accroche { margin-bottom: 0; }

h2 {
    font-size: clamp(1.75rem, 3.2vw, 2.5rem);
    line-height: 1.15; font-weight: 700;
    margin: 0 0 1rem;
}

.carte {
    background: #fff; border: 1px solid var(--bordure);
    border-radius: var(--rayon); padding: 1.75rem;
    box-shadow: var(--ombre);
}

/* ================================================================
   ACCROCHE
   ================================================================ */
.hero { padding: 6.5rem 0 5.5rem; }

.hero-grille {
    display: grid; grid-template-columns: 1.15fr .85fr;
    gap: 4rem; align-items: center;
}

.hero h1 { max-width: 15ch; }
/* Le slogan est servi par l'API d'un seul tenant : le dégradé s'applique
   donc à tout le titre, mais reste lisible car très clair. */
.hero h1 .degrade {
    background: var(--degrade);
    -webkit-background-clip: text; background-clip: text;
    color: transparent;
}
.hero .accroche { font-size: 1.25rem; }

.hero-actions {
    display: flex; flex-wrap: wrap; gap: .875rem;
    margin: 2.25rem 0 0;
}

/* Trois atouts sous les boutons : des faits tirés de la page, pas
   des slogans. */
.atouts {
    display: flex; flex-wrap: wrap; gap: .5rem 1.75rem;
    list-style: none; padding: 0; margin: 2.5rem 0 0;
    font-size: .9063rem; color: #9aa2b8;
}
.atouts li { display: flex; align-items: center; gap: .5rem; }
.atouts svg { width: 1.0625rem; height: 1.0625rem; color: var(--teal-vif); flex-shrink: 0; }

/* --- La fenêtre de code ---
   Une fausse fenêtre d'éditeur qui décrit, en pseudo-code, ce que fait
   une application métier. Elle dit « développeur » avant même la
   première ligne lue. aria-hidden dans la vue : le contenu est
   décoratif et redit l'accroche. */
.fenetre-code {
    background: rgb(22 29 51 / .85);
    border: 1px solid rgb(255 255 255 / .1);
    border-radius: 1rem;
    box-shadow: 0 30px 80px -30px rgb(0 0 0 / .7), 0 0 0 1px rgb(45 212 191 / .05);
    overflow: hidden;
    font-family: var(--police-code);
    font-size: .8438rem; line-height: 1.8;
    transform: perspective(1200px) rotateY(-6deg) rotateX(2deg);
}
.fenetre-barre {
    display: flex; align-items: center; gap: .4375rem;
    padding: .75rem 1rem;
    border-bottom: 1px solid rgb(255 255 255 / .07);
    background: rgb(255 255 255 / .02);
}
.fenetre-barre i { width: .6875rem; height: .6875rem; border-radius: 50%; display: block; }
.fenetre-barre i:nth-child(1) { background: var(--orange); }
.fenetre-barre i:nth-child(2) { background: var(--or); }
.fenetre-barre i:nth-child(3) { background: var(--teal); }
.fenetre-barre span { margin-left: .75rem; color: #6b7590; font-size: .75rem; }

.fenetre-code pre {
    margin: 0; padding: 1.25rem 1.375rem 1.5rem;
    color: #c9cfdd; white-space: pre; overflow-x: auto;
}
.fenetre-code .c { color: #5d6782; }        /* commentaire */
.fenetre-code .k { color: #a5b4fc; }        /* mot-clé */
.fenetre-code .f { color: var(--teal-vif); } /* fonction */
.fenetre-code .s { color: #fbbf77; }        /* chaîne */
.fenetre-code .n { color: #f28a63; }        /* nombre */
.fenetre-code .curseur {
    display: inline-block; width: .5rem; height: 1.05em;
    background: var(--teal-vif); vertical-align: text-bottom;
    animation: clignote 1.1s steps(1) infinite;
}
@keyframes clignote { 50% { opacity: 0; } }

/* ================================================================
   LE CONSTAT
   ================================================================ */
.icone {
    width: 2.75rem; height: 2.75rem; border-radius: .75rem;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 1.25rem; color: #fff;
}
.icone svg { width: 1.375rem; height: 1.375rem; }
.icone-nuit   { background: var(--nuit-3); }
.icone-teal   { background: var(--teal); }
.icone-orange { background: var(--orange); }
.icone-or     { background: var(--or); }

.carte-survol { transition: transform .2s, box-shadow .2s, border-color .2s; }
.carte-survol:hover {
    transform: translateY(-3px);
    box-shadow: var(--ombre-forte);
    border-color: #cfd5e2;
}

/* ================================================================
   RÉALISATIONS
   ================================================================ */
.projet { padding: 1.25rem 1.25rem 1.75rem; display: flex; flex-direction: column; }
.projet-entete { padding: .75rem .5rem 0; }
.projet-corps  { padding: 0 .5rem; }

.pastille {
    display: inline-block;
    font-family: var(--police-code); font-size: .75rem; font-weight: 500;
    padding: .25rem .625rem; border-radius: 999px;
    background: #e7f5f3; color: var(--marque);
    margin-bottom: .75rem;
}

/* Les deux temps de chaque projet. Le libellé « Avant » est éteint,
   « Aujourd'hui » prend la couleur de la marque : l'œil suit
   le passage de l'un à l'autre. */
.etape-projet {
    position: relative;
    padding-left: 1.25rem; margin-top: 1.25rem;
    border-left: 2px solid var(--bordure);
}
.etape-projet.apres { border-left-color: var(--teal); }
.etape-projet .etiquette {
    font-family: var(--police-code); font-size: .75rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: .06em;
    color: var(--gris-clair); margin: 0 0 .375rem;
}
.etape-projet.apres .etiquette { color: var(--marque); }
.etape-projet p:last-child { margin-bottom: 0; }

.confiance {
    margin-top: 2.5rem; padding: 1.25rem 1.5rem;
    border: 1px dashed #cfd5e2; border-radius: var(--rayon);
    text-align: center;
}
.confiance p { margin: 0; }

/* --- Captures d'écran des réalisations --- */

.capture {
    display: block;
    margin: 0 0 1.25rem;
    border-radius: .375rem;
    overflow: hidden;
    border: 1px solid var(--bordure);
    /* Le curseur signale que l'image s'agrandit — sans lui, personne
       ne devine qu'elle est cliquable. */
    cursor: zoom-in;
}

.capture img {
    display: block;
    width: 100%;
    /* height:auto annule les attributs width/height du HTML pour
       l'affichage, tout en les laissant faire leur travail de
       réservation d'espace au chargement. Les deux ne se contredisent
       pas : l'un sert avant le chargement, l'autre après. */
    height: auto;
    transition: transform .25s;
}

.capture:hover img { transform: scale(1.02); }

/* ================================================================
   MÉTHODE
   ================================================================ */
.etapes { counter-reset: etape; position: relative; }

.etape { position: relative; padding-top: 1.5rem; }
/* Un filet horizontal relie les étapes sur grand écran : c'est une
   frise, pas quatre blocs indépendants. */
.etape::before {
    content: ""; position: absolute; top: 0; left: 0; right: -1.5rem;
    height: 2px; background: var(--bordure);
}
.etape:last-child::before { right: 0; }
.etape::after {
    content: ""; position: absolute; top: -5px; left: 0;
    width: 12px; height: 12px; border-radius: 50%;
    background: var(--fond-alt); border: 2px solid var(--teal);
}
.etape .numero {
    display: block;
    font-family: var(--police-code); font-size: .8125rem; font-weight: 600;
    color: var(--marque); margin: .5rem 0 .75rem;
}

/* ================================================================
   TARIFS
   ================================================================ */
.prix-grille { align-items: stretch; }

.carte-prix { display: flex; flex-direction: column; position: relative; }
.carte-prix .discret { flex-grow: 1; }

.prix {
    font-family: var(--police-titre);
    font-size: 1.625rem; font-weight: 700; letter-spacing: -0.02em;
    color: var(--encre); margin: 1rem 0 0; line-height: 1.2;
}
.prix small {
    display: block;
    font-family: var(--police-texte); font-size: .8125rem; font-weight: 500;
    color: var(--gris-clair); letter-spacing: 0;
}

/* La formule du milieu, celle des deux réalisations présentées, est mise
   en avant par un liseré en dégradé. */
.carte-prix.vedette {
    border-color: transparent;
    background:
        linear-gradient(#fff, #fff) padding-box,
        linear-gradient(135deg, var(--teal), var(--indigo), var(--orange)) border-box;
    border: 2px solid transparent;
    box-shadow: var(--ombre-forte);
}

.sous-titre-section {
    margin: 4rem 0 1.25rem;
    font-size: 1.375rem;
}

/* Encadré final (règlement mensualisé) : un fond nuit, pour qu'il se
   lise comme une offre à part et non comme une suite de la grille. */
.encart {
    margin-top: 4rem; padding: 2.5rem;
    border-radius: 1.25rem;
    background: var(--nuit); color: #c9cfdd;
    position: relative; overflow: hidden;
}
.encart::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(30rem 20rem at 100% 0%, rgb(14 147 132 / .3), transparent 70%);
}
.encart > * { position: relative; }
.encart h3 { color: #fff; }
.encart > h3 { font-size: 1.5rem; margin-top: 0 !important; }
.encart .discret { color: #9aa2b8; }
.encart .carte {
    background: rgb(255 255 255 / .04);
    border-color: rgb(255 255 255 / .09);
    box-shadow: none;
}
.encart .carte h3 { font-size: 1.0625rem; }

@media (max-width: 64rem) {
    .hero-grille { grid-template-columns: 1fr; gap: 3rem; }
    .fenetre-code { transform: none; max-width: 36rem; }
    .etape::before { right: 0; }
}

@media (max-width: 48rem) {
    section { padding: 3.75rem 0; }
    .hero { padding: 3.5rem 0 3.75rem; }
    .hero .accroche { font-size: 1.0625rem; }
    .hero-actions { margin-top: 1.75rem; }
    .hero-actions .bouton { flex: 1 1 auto; }
    .atouts { flex-direction: column; margin-top: 1.75rem; }
    .fenetre-code { font-size: .75rem; }

    .entete-section { margin-bottom: 2rem; }
    .carte { padding: 1.375rem; }
    .projet { padding: 1rem 1rem 1.375rem; }
    .encart { padding: 1.5rem; margin-top: 3rem; }
    .sous-titre-section { margin-top: 3rem; }
}

@media (prefers-reduced-motion: reduce) {
    .capture img, .carte-survol { transition: none; }
    .capture:hover img, .carte-survol:hover { transform: none; }
    .fenetre-code .curseur { animation: none; }
}

.encart .surtitre { color: var(--teal-vif); }
.encart .surtitre::before { color: #5d6782; }