/* ==========================================================================
   Modèle de page « Réalisation » (pages de projets : installation-photovoltaique-*.php)

   - Tous les styles sont préfixés .pj : aucun effet sur les autres pages du site.
   - Couleurs et arrondis : variables du thème (css/colors/scheme-1.css, css/style.css).
   - Pictogrammes : SVG utilisés comme masques (couleur = couleur du texte), sans police d'icônes.
   - Fichier chargé uniquement par les pages de réalisation (balise <link> dans leur <head>).
   ========================================================================== */

.pj {
    --pj-vert: #6b8a1c;                                     /* vert du thème assombri : pictogrammes lisibles sur fond clair */
    --pj-vert-fond: rgba(var(--primary-color-rgb), .14);
    --pj-bleu: #04678d;                                     /* bleu du thème */
    --pj-bleu-fond: rgba(var(--secondary-color-rgb), .18);
    --pj-trait: rgba(0, 0, 0, .1);
    --pj-texte: #212529;
}

/* --- Pictogrammes -------------------------------------------------------- */
.pj-ico {
    display: inline-block;
    flex: none;
    width: 1em;
    height: 1em;
    background-color: currentColor;
    -webkit-mask-image: var(--pj-ico);
    mask-image: var(--pj-ico);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}
.pj-ico--panneau { --pj-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 16.5 6.5 7.5h14l-3 9z'/%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='M10 7.5 7 16.5M13.5 7.5l-3 9M17 7.5l-3 9'/%3E%3Cpath d='M12 16.5V20M8.5 20h7'/%3E%3C/svg%3E"); }
.pj-ico--lieu { --pj-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21c-3.6-3.4-6-6.3-6-9.6a6 6 0 0 1 12 0c0 3.3-2.4 6.2-6 9.6z'/%3E%3Ccircle cx='12' cy='11.2' r='2.3'/%3E%3C/svg%3E"); }
.pj-ico--client { --pj-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8.2' r='3.1'/%3E%3Cpath d='M3.3 19.5c0-3.2 2.5-5.3 5.7-5.3s5.7 2.1 5.7 5.3'/%3E%3Ccircle cx='17.2' cy='9.2' r='2.4'/%3E%3Cpath d='M16.4 14.4c2.8-.3 4.9 1.4 4.9 4.1'/%3E%3C/svg%3E"); }
.pj-ico--eclair { --pj-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13.2 2.8 5.5 13.2h5.9l-.9 8 8-10.6h-5.9z'/%3E%3C/svg%3E"); }
.pj-ico--modules { --pj-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='14' rx='1.6'/%3E%3Cpath d='M3.5 9.7h17M3.5 14.3h17M9.2 5v14M14.8 5v14'/%3E%3C/svg%3E"); }
.pj-ico--cible { --pj-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Ccircle cx='12' cy='12' r='4.6'/%3E%3Ccircle cx='12' cy='12' r='1.2'/%3E%3Cpath d='M12 12l8.3-8.3M16.2 3.5h4.3v4.3'/%3E%3C/svg%3E"); }
.pj-ico--graphique { --pj-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20.5h16'/%3E%3Crect x='5' y='12.5' width='3.4' height='8'/%3E%3Crect x='10.3' y='8.5' width='3.4' height='12'/%3E%3Crect x='15.6' y='4.5' width='3.4' height='16'/%3E%3C/svg%3E"); }
.pj-ico--document { --pj-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 3.5h8l4 4v13h-12z'/%3E%3Cpath d='M14.5 3.5v4h4M9.2 12h6M9.2 15h6M9.2 18h3.5'/%3E%3C/svg%3E"); }
.pj-ico--appareil { --pj-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='7.2' width='17' height='12' rx='2.2'/%3E%3Cpath d='M8.5 7.2l1.3-2.7h4.4l1.3 2.7'/%3E%3Ccircle cx='12' cy='13.2' r='3.4'/%3E%3C/svg%3E"); }

/* --- Titres de section --------------------------------------------------- */
.pj h2 {
    font-size: clamp(26px, 2.6vw, 36px);
    font-weight: 600;
    line-height: 1.2;
    margin-bottom: 22px;
}
.pj-titre {
    display: flex;
    align-items: center;
    gap: 14px;
}
.pj-titre .pj-ico {
    font-size: 40px;
    color: var(--pj-couleur, #222);
}

/* --- Bandeau des chiffres clés (3 à 5 éléments) ------------------------------ */
.pj-chiffres {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    margin: 0;
    padding: 26px 8px;
    list-style: none;
    border-radius: var(--rounded-1);
    background: var(--pj-vert-fond);
}
.pj-chiffres--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pj-chiffres--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pj-chiffres__item {
    padding: 4px 16px;
    text-align: center;
    border-left: 1px solid var(--pj-trait);
}
.pj-chiffres__item:first-child { border-left: 0; }
.pj-chiffres .pj-ico {
    display: block;
    margin: 0 auto 10px;
    font-size: 38px;
    color: var(--pj-vert);
}
.pj-chiffres__label {
    display: block;
    font-size: 14px;
    line-height: 1.4;
    color: #666;
}
.pj-chiffres__valeur {
    display: block;
    margin-top: 2px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.35;
    color: #111;
}

/* --- Encadrés « Objectifs » (vert) et « Résultats » (bleu) ------------------- */
.pj-boite {
    height: 100%;
    padding: 34px 36px;
    border-radius: var(--rounded-1);
}
.pj-boite--vert { --pj-couleur: var(--pj-vert); background: var(--pj-vert-fond); }
.pj-boite--bleu { --pj-couleur: var(--pj-bleu); background: var(--pj-bleu-fond); }
.pj-boite h2 {
    font-size: clamp(22px, 2vw, 28px);
    margin-bottom: 24px;
}
.pj-liste {
    margin: 0;
    padding: 0;
    list-style: none;
}
.pj-liste li {
    position: relative;
    margin: 0 0 14px;
    padding-left: 40px;
    line-height: 1.5;
    color: var(--pj-texte);
}
.pj-liste li:last-child { margin-bottom: 0; }
.pj-liste li::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--pj-couleur) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.6 12.4l3.6 3.6 7.2-8'/%3E%3C/svg%3E") center / 64% no-repeat;
}

/* --- Informations clés (tableau) ------------------------------------------- */
.pj-infos {
    margin: 0;
    overflow: hidden;
    border-radius: 10px;
}
.pj-infos__ligne {
    display: grid;
    grid-template-columns: minmax(110px, 36%) minmax(0, 1fr);
    column-gap: 16px;
    padding: 11px 18px;
}
.pj-infos__ligne:nth-child(odd) { background: rgba(0, 0, 0, .04); }
.pj-infos dt {
    font-weight: 500;
    color: #4a4a4a;
}
.pj-infos dd {
    margin: 0;
    color: var(--pj-texte);
}

/* --- Photos ------------------------------------------------------------------ */
.pj-photo {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--rounded-1);
}

/* Galerie : s'adapte à 1, 2, 3 photos ou plus (classe --1, --2, --3, --4 pour 4 et plus) */
.pj-galerie {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.pj-galerie--1 {
    grid-template-columns: minmax(0, 520px);
    justify-content: center;
}
.pj-galerie--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pj-vignette {
    display: block;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    border-radius: var(--rounded-1);
    background: #eef0ea;
}
.pj-galerie--1 .pj-vignette { aspect-ratio: auto; }
.pj-vignette img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .35s ease;
}
.pj-vignette:hover img,
.pj-vignette:focus-visible img { transform: scale(1.05); }

/* --- Écrans larges ----------------------------------------------------------- */
@media (min-width: 768px) {
    .pj-galerie--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .pj-galerie--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* --- Tablettes et mobiles ----------------------------------------------------- */
@media (max-width: 991.98px) {
    .pj-chiffres,
    .pj-chiffres--3,
    .pj-chiffres--4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: 24px;
    }
    .pj-chiffres__item { border-left: 0; }
    .pj-chiffres__item:nth-child(even) { border-left: 1px solid var(--pj-trait); }
    .pj-chiffres__item:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (max-width: 575.98px) {
    .pj-titre .pj-ico { font-size: 32px; }
    .pj-boite { padding: 26px 22px; }
    .pj-infos__ligne { padding: 10px 14px; }
    .pj-chiffres__item { padding: 4px 8px; }
    .pj-chiffres .pj-ico { font-size: 32px; }
}

@media (prefers-reduced-motion: reduce) {
    .pj-vignette img { transition: none; }
    .pj-vignette:hover img,
    .pj-vignette:focus-visible img { transform: none; }
}