/* ============================================================
   impact-environnemental.css
   Styles de la page 0-impact-environnemental.html
   (Notre impact environnemental)

   Une section autonome par catégorie, directement sous .content :
   - titre de catégorie en haut de section, sur toute la largeur,
     aligné à gauche (comme 0-referencement) ;
   - en dessous (.impact-corps) : photo bord cadre (collée au bord
     de la section) + zone texte, alternées gauche / droite d'une
     catégorie à l'autre :
       .impact-photo-gauche : photo à gauche, fond gris-1
       .impact-photo-droite : photo à droite, fond blanc
   Chaque point : titre, problématique, puis choix effectué
   (encadré vert), toujours dans cet ordre de lecture.
   ============================================================ */

/* Proportions : photo 30 % + écart 6 % + texte 64 %.
   Les points sont répartis sur 2 colonnes de largeur fixe dans
   la zone texte, quel que soit le nombre de points (un 3e point
   passe à la ligne suivante, etc.).
   Marge horizontale et padding vertical : comme .section-pro
   (referencement-commun.css). */
:root {
    --impact-photo-largeur: 30%;
    --impact-texte-largeur: 64%;
    --impact-gap: 6%;
    --impact-colonnes-gap: 3rem;
    --impact-marge: 3.75rem;
    --impact-photo-ratio: 2 / 3; /* images à fournir en 1000 × 1500 px */
    --impact-section-padding: 7.5rem;
    --impact-titre-espace: 3.75rem;
    --impact-point-espace: 3.75rem;
    --impact-texte-decalage: 4rem; /* ≈ 2 lignes de texte */
}

/* ---- Section d'introduction ----
   Fond vert-1, texte vert-4. Trois colonnes égales sur toute la
   largeur (marges de 60 px à gauche et à droite), séparées par le
   même écart que les colonnes de points (--impact-colonnes-gap),
   avec une fine ligne verticale au milieu de chaque écart
   (même principe que la section « Position » de 0-referencement). */

.impact-intro {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: var(--impact-colonnes-gap);
    width: 100%;
    padding: var(--impact-section-padding) var(--impact-marge);
    box-sizing: border-box;
    background: var(--vert-1);
    border-bottom: 1px solid var(--gris-2);
}

/* Chaque colonne occupe 2 lignes de la grille (titre, texte),
   partagées avec les colonnes voisines grâce à « subgrid » :
   les titres sont alignés entre eux, et les textes démarrent au
   même niveau. L'encadré de la 3e colonne s'étire sur la hauteur
   de la ligne de texte (bas aligné avec la colonne la plus longue). */
.impact-intro-colonne {
    position: relative;
    grid-row: span 2;
    display: grid;
    grid-template-rows: subgrid;
    font-size: var(--font-size-2);
    color: var(--vert-4);
    text-align: justify;
}

/* Texte de la colonne « fait des choix » : même encadré que les
   choix des catégories (repère visuel pour la suite de la page) ;
   le titre reste au-dessus, hors encadré. Pas de ligne de
   séparation devant cette colonne, l'encadré suffit. */
.impact-intro-texte.impact-intro-choix {
    background: var(--vert-4);
    color: var(--vert-1);
    border-radius: 12px;
    padding: 1.88rem 1.25rem;
}

.impact-intro-colonne:has(.impact-intro-choix)::before {
    display: none;
}

.impact-intro-titre {
    font-size: var(--font-size-3);
    font-weight: 700;
    line-height: 1.4;
    text-align: left;
    margin: 0 0 0.8em 0;
}

.impact-intro-texte p {
    margin: 0 0 1em 0;
}

.impact-intro-texte p:last-child {
    margin-bottom: 0;
}

/* ---- Section (une par catégorie) ---- */

.impact-section {
    width: 100%;
    padding: var(--impact-section-padding) 0;
    box-sizing: border-box;
    border-bottom: 1px solid var(--gris-2);
}

/* Fond lié au côté de la photo (alternance automatique) :
   photo à gauche = fond gris-1, photo à droite = fond blanc */
.impact-photo-gauche {
    background: var(--gris-1);
}

.impact-photo-droite {
    background: white;
}

/* ---- Titre de catégorie (pleine largeur, aligné à gauche) ---- */

.impact-categorie {
    font-size: var(--font-size-4);
    font-weight: 700;
    color: var(--vert-4);
    line-height: 1.4;
    padding: 0 var(--impact-marge) 0.1em var(--impact-marge);
    margin: 0 0 var(--impact-titre-espace) 0;
}

/* ---- Corps : photo + zone texte ---- */

.impact-corps {
    display: flex;
    align-items: flex-start;
    gap: var(--impact-gap);
}

.impact-photo-droite .impact-corps {
    flex-direction: row-reverse;
}

/* ---- Photo de catégorie (bord cadre) ---- */

.impact-photo {
    width: var(--impact-photo-largeur);
    flex-shrink: 0;
    aspect-ratio: var(--impact-photo-ratio);
    overflow: hidden;
}

.impact-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ---- Zone texte ---- */

/* Décalage en haut de la zone texte : le texte ne démarre pas
   au même niveau que la photo (hiérarchie visuelle). */
.impact-contenu {
    width: var(--impact-texte-largeur);
    flex-shrink: 0;
    min-width: 0;
    box-sizing: border-box;
    padding-top: var(--impact-texte-decalage);
}

.impact-photo-gauche .impact-contenu {
    padding-right: var(--impact-marge);
}

.impact-photo-droite .impact-contenu {
    padding-left: var(--impact-marge);
}

/* ---- Points (grille à 2 colonnes, alignée ligne par ligne) ----
   Chaque point occupe 3 lignes de la grille (titre, problématique,
   choix), partagées avec le point voisin grâce à « subgrid » :
   les titres, les problématiques et les encadrés verts de deux
   points côte à côte démarrent au même niveau, et les encadrés
   verts prennent la même hauteur (la plus grande des deux).
   L'espacement est porté par des marges (row-gap à 0, sinon il
   s'appliquerait aussi entre titre, problématique et choix) ;
   la marge basse du dernier rang est compensée sur .impact-points. */

.impact-points {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--impact-colonnes-gap);
    row-gap: 0;
    margin-bottom: calc(-1 * var(--impact-point-espace));
}

.impact-point {
    grid-row: span 3;
    display: grid;
    grid-template-rows: subgrid;
}

.impact-point-titre {
    font-size: var(--font-size-3);
    font-weight: 700;
    color: var(--vert-3);
    line-height: 1.4;
    margin: 0 0 0.8em 0;
}

.impact-probleme {
    font-size: var(--font-size-2);
    color: var(--gris-6);
    text-align: justify;
    margin: 0 0 1.5rem 0;
}

/* Problématique en plusieurs paragraphes (div.impact-probleme) */
.impact-probleme p {
    margin: 0 0 0.8rem 0;
}

.impact-probleme p:last-child {
    margin-bottom: 0;
}

/* Choix effectué : encadré vert */
/* Padding : identique aux cartes de la section « Notre site »
   (.site-carte-contenu, referencement-site.css) */
.impact-choix {
    background: var(--vert-4);
    border-radius: 12px;
    padding: 1.88rem 1.25rem;
    margin-bottom: var(--impact-point-espace);
    font-size: var(--font-size-2);
    color: var(--vert-1);
    text-align: justify;
}

/* Lien dans un encadré : version claire de .lien-texte (style.css),
   lisible sur le fond vert-4 */
.impact-choix .lien-texte {
    color: var(--gris-2);
}

.impact-choix .lien-texte:hover {
    color: var(--gris-3);
}

/* Focus clavier dans un encadré : le contour par défaut (gris-6,
   style.css) serait invisible sur le fond vert-4 */
.impact-choix :focus-visible {
    outline-color: var(--vert-1);
}

.impact-choix p,
.impact-choix ul,
.impact-choix ol {
    margin: 0 0 0.8rem 0;
}

.impact-choix ul,
.impact-choix ol {
    padding-left: 1.5em;
}

.impact-choix li {
    margin-bottom: 0.5em;
}

.impact-choix li:last-child {
    margin-bottom: 0;
}

.impact-choix p:last-child,
.impact-choix ul:last-child,
.impact-choix ol:last-child {
    margin-bottom: 0;
}

/* ---- Bloc annexe (ex. Label Green Hosting) ----
   Information complémentaire placée dans la colonne voisine d'un
   point, sans encadré vert (ce n'est pas un choix). Sur desktop,
   il démarre au niveau de l'encadré du choix voisin (voir la
   media query min-width: 1024px plus bas). */
.impact-annexe {
    grid-row: span 3;
    align-self: start;
    background: white;
    border: 1px solid var(--vert-2);
    border-radius: 12px;
    padding: 1.88rem 1.25rem;
    margin-bottom: var(--impact-point-espace);
    font-size: var(--font-size-2);
    color: var(--gris-6);
    text-align: justify;
}

.impact-annexe .impact-point-titre {
    color: var(--vert-3);
}

.impact-annexe p,
.impact-annexe ol {
    margin: 0 0 0.8rem 0;
}

.impact-annexe ol {
    padding-left: 1.5em;
}

.impact-annexe li {
    margin-bottom: 0.5em;
}

.impact-annexe li:last-child,
.impact-annexe ol:last-child {
    margin-bottom: 0;
}

/* Label (image cliquable, ex. Green Web Foundation), centré */
.impact-label {
    display: block;
    width: fit-content;
    margin: 2.5rem auto;
    transition: filter 0.2s;
}

/* Survol : assombrissement léger (comme les logos du footer) */
.impact-label:hover {
    filter: brightness(0.85);
}

.impact-label img {
    display: block;
    width: 12.5rem;
    height: auto;
}

/* ---- Exception : catégorie à un seul point ----
   Détectée automatiquement (:only-child), sans classe à ajouter :
   la problématique reste dans la colonne de gauche, le choix passe
   dans la colonne de droite, à côté d'elle (même largeur de
   colonnes que les autres catégories). Si un 2e point est ajouté,
   la mise en page normale reprend d'elle-même.
   Desktop uniquement : sur tablette et mobile, tout reste sur une
   seule colonne. */
@media (min-width: 1024px) {
    .impact-points > .impact-point:only-child {
        grid-column: 1 / -1;
        grid-row: auto;
        grid-template-columns: subgrid;
        grid-template-rows: auto 1fr;
    }

    .impact-point:only-child .impact-point-titre {
        grid-column: 1;
        grid-row: 1;
    }

    .impact-point:only-child .impact-probleme {
        grid-column: 1;
        grid-row: 2;
        margin-bottom: 0;
    }

    .impact-point:only-child .impact-choix {
        grid-column: 2;
        grid-row: 2;
    }

    /* Bloc annexe : démarre au niveau de l'encadré du choix voisin
       (3e ligne du point), pour s'y rattacher visuellement, et
       s'étire sur la hauteur de la ligne : haut et bas alignés
       avec l'encadré */
    .impact-annexe {
        grid-column: 2;
        grid-row: 3;
        align-self: stretch;
    }
}

/* ---- Responsive ---- */

@media (max-width: 1023px) {
    .impact-intro {
        grid-template-columns: 1fr;
        row-gap: 2.5rem;
        padding: 3.75rem 1.88rem;
    }

    .impact-intro-colonne {
        display: block;
        grid-row: auto;
    }

    .impact-intro-colonne + .impact-intro-colonne::before {
        display: none;
    }

    /* scroll-margin-top : le titre de la catégorie ne passe pas sous la
       barre du haut (nav-topbar) après un clic dans la liste « Aller à »
       (même valeur que .section-pro, referencement-commun.css) */
    .impact-section {
        padding: 3.75rem 0;
        scroll-margin-top: 4.63rem;
    }

    .impact-categorie {
        padding: 0 1.88rem 0.1em 1.88rem;
        margin-bottom: 2.5rem;
    }

    .impact-corps,
    .impact-photo-droite .impact-corps {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }

    .impact-photo {
        width: 100%;
        aspect-ratio: 3 / 2;
    }

    .impact-contenu {
        width: 100%;
    }

    .impact-photo-gauche .impact-contenu,
    .impact-photo-droite .impact-contenu {
        padding: 2.5rem 1.88rem 0 1.88rem;
    }

    .impact-points {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 374px) {
    .impact-intro {
        padding: 2.5rem 1.25rem;
    }

    .impact-section {
        padding: 2.5rem 0;
    }

    .impact-categorie {
        padding: 0 1.25rem 0.1em 1.25rem;
    }

    .impact-photo-gauche .impact-contenu,
    .impact-photo-droite .impact-contenu {
        padding: 1.88rem 1.25rem 0 1.25rem;
    }

}

@media (min-width: 1921px) {
    .impact-intro {
        padding-left: calc((100% - var(--contenu-max-largeur)) / 2 + var(--impact-marge));
        padding-right: calc((100% - var(--contenu-max-largeur)) / 2 + var(--impact-marge));
    }

    .impact-section {
        padding-left: calc((100% - var(--contenu-max-largeur)) / 2);
        padding-right: calc((100% - var(--contenu-max-largeur)) / 2);
    }
}