/* Accueil : carrousel, valeurs, qui sommes-nous. S'appuie sur les variables de socle.css. */

/* Carrousel (07/11/2026, d'après l'affiche Orange Digital Center et cnsr.bj) : fond noir, étiquette
   orange, titre blanc dont la fin est en orange ; la photo dessous dans un cadre arrondi au liseré
   orange ; compteur encadré d'orange et flèches. Aucun texte sur l'image. */
.accueil-hero {
    position: relative;
    padding-top: clamp(2rem, 1.25rem + 3vw, 3.75rem);
    background: var(--cesie-noir);
    background-image: radial-gradient(circle at 92% 8%, rgba(255, 87, 34, .22) 0, rgba(255, 87, 34, 0) 38%);
}
.accueil-hero .carousel { position: relative; z-index: 1; }
.accueil-hero-texte {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 1.5rem 3rem;
    /* Place réservée au titre le plus long (deux lignes) : la photo ne bouge pas d'une image à l'autre. */
    min-height: 8.75rem;
    margin-bottom: clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
}
.accueil-hero-titre {
    max-width: 40ch;
    margin: 0;
    color: #fff;
    /* Légèrement réduite (DG, 07/11/2026). */
    font-size: clamp(1.5rem, 1rem + 1.6vw, 2.375rem);
    font-weight: 800;
    letter-spacing: -.01em;
    line-height: 1.1;
    text-wrap: balance;
}
.accueil-hero-titre span { color: var(--cesie-orange); }
.accueil-hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; padding-bottom: .25rem; }
.accueil-hero-actions .btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 52px; padding: .75rem 1.625rem; border-radius: 6px; font-weight: 600; }
.accueil-hero-actions .btn i { transition: transform var(--transition); }
.accueil-hero-actions .btn:hover i { transform: translateX(3px); }
.btn-contour { border: 1.5px solid #fff; background: #fff; color: var(--cesie-noir); }
.btn-contour:hover, .btn-contour:focus-visible { background: transparent; color: #fff; }

.accueil-hero-photo {
    position: relative;
    margin: 0;
    overflow: hidden;
    /* 2:1 : la photo garde sa largeur, donc sa netteté (07/11/2026). */
    aspect-ratio: 2 / 1;
    border-radius: 18px;
    background: #000;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 30px 60px -30px rgba(0, 0, 0, .9);
}
.accueil-hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: var(--cadrage, center); }
.accueil-hero-photo::after { content: ""; position: absolute; left: 0; bottom: 0; width: 28%; height: 5px; background: var(--cesie-orange); }

/* Compteur encadré d'orange, repères et flèches, sous la photo. */
.accueil-hero-pilotage { position: relative; z-index: 1; padding: 1.25rem 0 1.75rem; }
.accueil-hero-pilotage .container { display: flex; align-items: center; gap: 1.5rem; }
.accueil-hero-compteur {
    margin: 0;
    padding: .375rem .875rem;
    border: 1.5px solid var(--cesie-orange);
    border-radius: 8px;
    color: #fff;
    font-size: .9375rem;
    font-weight: 600;
    letter-spacing: .08em;
    font-variant-numeric: tabular-nums;
}
.accueil-hero-compteur span { color: var(--cesie-orange); font-size: 1.125rem; font-weight: 800; }
.accueil-hero .carousel-indicators { position: static; flex: 1; justify-content: flex-start; margin: 0; }
.accueil-hero .carousel-indicators [data-bs-target] {
    box-sizing: content-box;
    flex: 0 1 56px;
    width: auto;
    height: 3px;
    padding: 20px 0;
    border: 0;
    margin: 0 6px 0 0;
    background-color: #fff;
    background-clip: content-box;
    opacity: .3;
    transition: opacity var(--transition), background-color var(--transition);
}
.accueil-hero .carousel-indicators .active { opacity: 1; background-color: var(--cesie-orange); }
.accueil-hero-fleches { display: flex; gap: .625rem; }
.accueil-hero-fleches button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border: 1.5px solid rgba(255, 255, 255, .45);
    border-radius: 50%;
    background: transparent;
    color: #fff;
    font-size: 1.125rem;
    cursor: pointer;
    transition: background var(--transition), border-color var(--transition);
}
.accueil-hero-fleches button:hover { border-color: var(--cesie-orange); background: var(--cesie-orange); }
.accueil-hero-fleches button:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

@media (max-width: 991.98px) {
    .accueil-hero-texte { grid-template-columns: 1fr; align-items: start; min-height: 0; }
    .accueil-hero-titre { max-width: none; }
    .accueil-hero-photo { aspect-ratio: 16 / 9; }
}
@media (max-width: 575.98px) {
    .accueil-hero-texte { min-height: 8.5rem; gap: 1.25rem; }
    .accueil-hero-titre { font-size: 1.5rem; }
    .accueil-hero-actions .btn { flex: 1 1 100%; }
    .accueil-hero-photo { aspect-ratio: 4 / 3; border-radius: 14px; }
    .accueil-hero-fleches { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .accueil-hero-actions .btn i { transition: none; }
}

/* Valeurs : elles se répartissent seules, quel que soit leur nombre. */
.valeurs-grille { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; margin: 0; padding: 0; list-style: none; }
.valeur-carte {
    flex: 1 1 300px;
    max-width: 380px;
    padding: 1.5rem;
    border-radius: var(--rayon);
    background: #fff;
    box-shadow: var(--ombre-carte);
    transition: box-shadow var(--transition), transform var(--transition);
}
.valeur-carte:hover { box-shadow: var(--ombre-carte-survol); transform: translateY(-3px); }
.valeur-icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin-bottom: 1rem;
    border-radius: 50%;
    background: var(--cesie-orange-pale);
    color: var(--cesie-orange-action-survol);
    font-size: 1.375rem;
}
.valeur-carte h3 { margin-bottom: .5rem; font-size: 1.125rem; font-weight: 700; }
.valeur-carte--nom { flex-basis: 190px; max-width: 240px; text-align: center; }
.valeur-carte--nom h3 { margin-bottom: 0; }
.valeur-carte p { margin: 0; font-size: .9375rem; }
@media (max-width: 767.98px) {
    .valeur-carte { max-width: none; }
    /* Deux noms par ligne : « Professionnalisme » doit tenir dans une demi-largeur. */
    .valeur-carte--nom { flex-basis: calc(50% - .5rem); padding: 1rem .5rem; }
    .valeur-carte--nom h3 { font-size: 1rem; }
}

/* Qui sommes-nous : le titre, puis la vidéo, puis le texte, sur une colonne. */
.apropos-colonne { display: flex; flex-direction: column; align-items: center; gap: 1.5rem; max-width: 820px; margin-inline: auto; text-align: center; }
.apropos-colonne .apropos-video { width: 100%; }
.apropos-colonne p { margin: 0; line-height: 1.75; }
.apropos-colonne .btn { display: inline-flex; align-items: center; gap: .5rem; min-height: 48px; padding: .625rem 1.75rem; border-radius: 999px; }
.apropos-grille { display: grid; grid-template-columns: 1fr; gap: 1.5rem; align-items: center; }
@media (min-width: 992px) {
    .apropos-grille { grid-template-columns: 1fr 1fr; gap: 3.5rem; }
}
.apropos-video { overflow: hidden; border-radius: var(--rayon); background: var(--cesie-marine); box-shadow: var(--ombre-carte-survol); }
.apropos-texte p { margin-bottom: 1.5rem; }
.apropos-texte .btn { display: inline-flex; align-items: center; gap: .5rem; min-height: 48px; padding: .625rem 1.75rem; border-radius: 999px; }

/* Sections de l'accueil (07/11/2026, d'après l'affiche Orange Digital Center et cnsr.bj) : les
   sections claires et sombres alternent ; sur le noir, titres blancs et icônes orange. */

/* Valeurs : bande noire */
.valeurs-section { background: var(--cesie-noir); background-image: radial-gradient(circle at 8% 100%, rgba(255, 87, 34, .18) 0, rgba(255, 87, 34, 0) 40%); }
.valeurs-section .site-titre { color: #fff; }
.valeurs-section .site-titre::after { content: ""; display: block; width: 3.5rem; height: 4px; margin: .875rem auto 0; border-radius: 4px; background: var(--cesie-orange); }
.valeurs-section .site-surtitre { color: var(--cesie-orange); }
.valeurs-section .valeur-carte { background: var(--cesie-noir-doux); border: 1px solid rgba(255, 255, 255, .08); box-shadow: none; }
.valeurs-section .valeur-carte:hover { border-color: var(--cesie-orange); box-shadow: none; }
.valeurs-section .valeur-carte h3 { color: #fff; }
.valeurs-section .valeur-carte p { color: #C9CDD3; }
.valeurs-section .valeur-icone { background: var(--cesie-orange-action); color: #fff; border-radius: 10px; }

/* Demander un devis */
.devis-grille { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: center; gap: 2rem 3rem; }
.devis-section .site-titre { margin-bottom: 1rem; font-size: clamp(1.75rem, 1.2rem + 2vw, 2.75rem); }
.devis-texte { max-width: 52ch; margin-bottom: 1.75rem; font-size: 1.0625rem; }
.devis-actions { display: flex; flex-wrap: wrap; align-items: stretch; gap: 1rem; }
.devis-bouton { display: inline-flex; align-items: center; gap: .5rem; min-height: 60px; margin: 0; padding: .75rem 1.75rem; border-radius: 10px; font-weight: 600; }
.devis-illustration { justify-self: center; width: min(100%, 400px); height: auto; }
@media (max-width: 991.98px) {
    .devis-grille { grid-template-columns: 1fr; }
    .devis-illustration { order: -1; width: min(70%, 300px); }
}
@media (max-width: 575.98px) {
    .devis-actions > * { flex: 1 1 100%; justify-content: center; }
}

/* Témoignages et actualités : l'entête commune, centrée */
.temoignages-section .site-entete, .actualites-section .site-entete { margin-bottom: 2rem; }