@import url('polices.css');

/* =============================================================================
   COVIMA — Page d'accueil publique (racine du site)
   Héros plein écran sur photo, header blanc avec réseaux sociaux.
   ============================================================================= */

:root {
    --vert: #2e7d32;
    --vert-fonce: #1b5e20;
    --jaune: #f9a825;
    --texte: #1f2933;
    --gris-texte: #5b6573;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
    margin: 0;
    display: flex;
    flex-direction: column;
    font-family: 'Barlow', system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    color: var(--texte);
    background: #111;
    line-height: 1.5;
}

/* ----- Header blanc : logo + réseaux sociaux ----- */
.entete-accueil {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    background: #fff;
    padding: .8rem 1.5rem;
}

.marque {
    display: flex;
    align-items: center;
    gap: .6rem;
    text-decoration: none;
    color: var(--texte);
}

.logo-img {
    width: 40px;
    height: 40px;
    border-radius: 9px;
}

.marque-texte {
    font-weight: 700;
    color: var(--vert-fonce);
    font-size: .98rem;
}

.reseaux-sociaux {
    display: flex;
    align-items: center;
    gap: .35rem;
}

.reseaux-sociaux a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    color: var(--texte);
    transition: background .15s, color .15s;
}

.reseaux-sociaux a:hover {
    background: var(--vert-fonce);
    color: #fff;
}

/* ----- Héros plein écran sur photo ----- */
.heros {
    position: relative;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 78vh;
    padding: 3.5rem 1.5rem 4.5rem;
    /* Dégradé de lisibilité par-dessus la photo. Couches de repli : déposer une
       photo dans assets/images/accueil-fond.jpg pour remplacer l'illustration
       SVG committée dans le dépôt. */
    background:
        linear-gradient(100deg, rgba(8, 24, 10, .84) 0%, rgba(8, 24, 10, .55) 45%, rgba(8, 24, 10, .18) 75%),
        url("../images/accueil-fond.jpg") center / cover no-repeat,
        url("../images/accueil-fond.svg") center / cover no-repeat,
        linear-gradient(115deg, #0c2a10, #1b5e20);
    color: #fff;
}

.heros-contenu {
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;
}

.heros h1 {
    margin: 0 0 1.1rem;
    font-size: clamp(2.3rem, 6vw, 4rem);
    line-height: 1.08;
    font-weight: 800;
    letter-spacing: -.02em;
    max-width: 13em;
}

/* Mot entouré d'une ellipse jaune façon « surligné à la main ». */
.mot-entoure {
    position: relative;
    display: inline-block;
    padding: 0 .08em;
}

.entoure {
    position: absolute;
    inset: -18% -6%;
    width: 112%;
    height: 136%;
    pointer-events: none;
}

.heros-texte {
    margin: 0 0 1.8rem;
    max-width: 34em;
    font-size: clamp(1rem, 2vw, 1.2rem);
    color: rgba(255, 255, 255, .92);
}

.heros-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .8rem;
    margin-bottom: 1.6rem;
}

.bouton {
    display: inline-block;
    padding: .8rem 1.6rem;
    border-radius: 10px;
    font-weight: 700;
    text-decoration: none;
    font-size: 1rem;
}

.bouton-principal {
    background: var(--jaune);
    color: #201800;
    border: 2px solid var(--jaune);
}

.bouton-principal:hover {
    background: #ffc046;
    border-color: #ffc046;
}

.bouton-contour {
    background: rgba(255, 255, 255, .08);
    color: #fff;
    border: 2px solid rgba(255, 255, 255, .75);
}

.bouton-contour:hover {
    background: rgba(255, 255, 255, .2);
}

/* Badges informatifs (façon étiquettes de la référence). */
.badges {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.badges li {
    padding: .3rem .85rem;
    border: 1px solid rgba(255, 255, 255, .55);
    border-radius: 999px;
    font-size: .82rem;
    font-weight: 600;
    color: rgba(255, 255, 255, .92);
    background: rgba(0, 0, 0, .25);
}

/* Bandeau des certifications en bas du héros. */
.bande-certifications {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 2.5rem;
    padding: .9rem 1.5rem;
    background: rgba(0, 0, 0, .45);
    font-weight: 700;
    letter-spacing: .06em;
    font-size: .88rem;
    color: rgba(255, 255, 255, .85);
    text-transform: uppercase;
}

/* ----- Pied de page ----- */
.pied-accueil {
    background: #0c1a0e;
    color: rgba(255, 255, 255, .6);
    text-align: center;
    font-size: .8rem;
    padding: .9rem 1.5rem;
}

/* ----- Mobile ----- */
@media (max-width: 640px) {
    .entete-accueil { padding: .7rem 1rem; }
    .marque-texte { display: none; }
    .heros { padding: 2.5rem 1.25rem 5.5rem; min-height: 82vh; }
    .heros-actions .bouton { width: 100%; text-align: center; }
    .bande-certifications { gap: 1.1rem; font-size: .72rem; }
}