/* =============================================================================
   MK TERRASSEMENT — RETOUCHES DU 11 SEPTEMBRE 2026
   -----------------------------------------------------------------------------
   Reprise après relecture du site en ligne par la cliente. Chargée après
   mk-ui.css, sur le seul site terrassement (header.php) : le site immobilier
   garde ses feuilles telles quelles.

   Ce que corrige ce fichier, dans l'ordre :
     1. l'apparition au défilement, qui laissait des blocs à moitié transparents
        dans le bas de l'écran et donnait l'impression de grands blancs ;
     2. le héros d'accueil, désormais un diaporama de chantiers réels ;
     3. la zone d'intervention, photo pleine largeur au lieu d'une demi-photo ;
     4. le bloc du groupe MK ;
     5. les FAQ : accordéon, titre collant, encart d'appel sous le titre ;
     6. les photos de chantier dans tout le site (bandes, cartes, bandeaux) ;
     7. la page à propos : portrait encadré au lieu d'un visage plein écran.
   ========================================================================== */


/* --- 1. Apparition au défilement ----------------------------------------------
   La version précédente n'atteignait l'opacité pleine qu'une fois le bloc
   entré de 20 à 38 % dans l'écran : tout ce qui se trouvait dans le bas de la
   fenêtre restait pâle, voire invisible. L'animation se termine maintenant
   pendant l'entrée du bloc, et part d'un léger décalage plutôt que du vide. */
@keyframes apparait {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .section__tete, .carte, .info, .avis, .encart, .reponse-courte,
    .grille > *, .prose > h2, .prose > .photo, .glossaire > div,
    .simu__sortie, .facteur, .metier, .bande-photos__vue {
      animation: apparait linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 45%;
    }
    .grille > *:nth-child(2), .facteur:nth-child(2), .metier:nth-child(2),
    .bande-photos__vue:nth-child(2) { animation-range: entry 4% entry 50%; }
    .grille > *:nth-child(3), .facteur:nth-child(3), .metier:nth-child(3),
    .bande-photos__vue:nth-child(3) { animation-range: entry 8% entry 55%; }
    .grille > *:nth-child(4), .metier:nth-child(4),
    .bande-photos__vue:nth-child(4) { animation-range: entry 12% entry 60%; }
    .heros .section__tete { animation: none; }
  }
}


/* --- 2. Héros d'accueil : diaporama de chantiers -------------------------------
   L'effet d'une vidéo sans vidéo : les photos se relaient en fondu, chacune
   avec un lent travelling. Le sens du mouvement change d'une image à l'autre,
   sinon l'œil repère la mécanique au bout de deux passages. */
.heros--diapo .heros__fond { overflow: hidden; }
.diapo__vue {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 55%;
  opacity: 0;
  transition: opacity 1.8s ease;
  will-change: opacity, transform;
}
.diapo__vue.est-active { opacity: 1; }
.diapo__vue.est-active,
.diapo__vue.est-sortante { animation: travelling-a 9s ease-out both; }
.diapo__vue:nth-child(3n+2).est-active,
.diapo__vue:nth-child(3n+2).est-sortante { animation-name: travelling-b; }
.diapo__vue:nth-child(3n).est-active,
.diapo__vue:nth-child(3n).est-sortante { animation-name: travelling-c; }
.heros__fond.est-en-pause .diapo__vue { animation-play-state: paused; }

@keyframes travelling-a {
  from { transform: scale(1.02) translate3d(0, 0, 0); }
  to   { transform: scale(1.14) translate3d(-2%, -1%, 0); }
}
@keyframes travelling-b {
  from { transform: scale(1.15) translate3d(2%, 0, 0); }
  to   { transform: scale(1.03) translate3d(0, 0, 0); }
}
@keyframes travelling-c {
  from { transform: scale(1.04) translate3d(0, 2%, 0); }
  to   { transform: scale(1.16) translate3d(1.5%, -1%, 0); }
}
/* L'ancienne dérive de l'affiche s'ajoutait au travelling : on la coupe. */
.heros--diapo .heros__fond { animation: none; }

@media (prefers-reduced-motion: reduce) {
  .diapo__vue { transition: none; animation: none !important; }
}
/* Bouton pause retiré de la vue à la demande de la cliente (11/09/2026). Il
   reste atteignable au clavier, et n'apparaît que lorsqu'il reçoit le focus :
   une animation de plus de cinq secondes doit pouvoir être arrêtée (RGAA 13.8),
   sans que la souris ou l'écran tactile ne le voient. */
.heros--diapo .heros__pause:not(:focus-visible) {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}


/* --- 3. Zone d'intervention : le paysage sur toute la largeur ----------------- */
.duo--zone {
  position: relative; isolation: isolate;
  background: var(--marine-fonce) var(--matiere, none) center / cover no-repeat;
  color: var(--blanc);
}
.duo--zone::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg,
    rgba(9, 32, 50, .9) 0%, rgba(9, 32, 50, .74) 48%, rgba(9, 32, 50, .38) 100%);
}
.duo--zone .duo__texte h2 { color: var(--blanc); }
.duo--zone .duo__texte .chapeau { color: #C9D6E0; }
.duo--zone .duo__media--verre { background: transparent; min-height: 0; }
.duo--zone .duo__media--verre::before { content: none; }
@media (min-width: 900px) {
  .duo--zone { min-height: 560px; }
  .duo--zone .duo__texte {
    padding-left: max(var(--gouttiere), calc((100vw - var(--largeur)) / 2 + var(--gouttiere)));
  }
}
.carte-zone__liste em.est-base {
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--sable);
}


/* --- 4. Le groupe MK ------------------------------------------------------------ */
.groupe-liste { list-style: none; margin: 2px 0 8px; padding: 0; display: flex; flex-direction: column; }
.groupe-liste li {
  display: flex; flex-direction: column; gap: 3px;
  padding: 14px 0; border-top: 1px solid rgba(232, 221, 207, .18);
}
.groupe-liste li:last-child { border-bottom: 1px solid rgba(232, 221, 207, .18); }
.groupe-liste strong {
  font-family: var(--titre); font-size: 17px; font-weight: 600;
  letter-spacing: .05em; text-transform: uppercase; color: var(--sable);
}
.groupe-liste span { font-size: 15px; line-height: 1.55; color: #C9D6E0; }
@media (min-width: 900px) {
  .duo--groupe .duo__media { min-height: 520px; }
  .duo--groupe .duo__texte { padding-right: max(var(--gouttiere), calc((100vw - var(--largeur)) / 2 + var(--gouttiere))); }
}


/* --- 5. FAQ ------------------------------------------------------------------------
   La grille .colonnes donne 1,45 part à la colonne de gauche : dans une FAQ,
   c'était le titre qui prenait la grande colonne et les réponses qui
   s'entassaient dans la petite, avec un grand vide sous le titre. On inverse,
   le titre devient collant, et un encart d'appel occupe la colonne. */
@media (min-width: 1000px) {
  .colonnes:has(> .faq) { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: 64px; }
  .colonnes:has(> .faq) > .section__tete { position: sticky; top: 112px; align-self: start; }
}

.faq-appel {
  display: flex; flex-direction: column; gap: 10px;
  margin-top: 22px; padding: 22px 24px 24px;
  background: var(--blanc); border-left: 4px solid var(--sable);
}
.section:not(.section--creme) .faq-appel { background: #F6F1EA; }
.faq-appel__titre {
  font-family: var(--titre); font-size: 19px; font-weight: 600;
  letter-spacing: .02em; text-transform: uppercase; color: var(--marine);
}
.faq-appel p:not(.faq-appel__titre) { font-size: 15px; line-height: 1.6; color: var(--gris); }
.faq-appel__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.faq-appel__actions .btn { min-height: 0; padding-block: 12px; }

/* Accordéon : posé par le script, à partir de quatre questions. Sans script,
   tout reste déplié, ce qui est le bon repli. */
.faq__bascule {
  all: unset; box-sizing: border-box;
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  width: 100%; cursor: pointer; color: inherit; font: inherit;
}
.faq__bascule::after {
  content: ""; flex-shrink: 0; width: 10px; height: 10px;
  border-right: 2px solid var(--sable-fonce); border-bottom: 2px solid var(--sable-fonce);
  transform: translateY(-3px) rotate(45deg);
  transition: transform .25s var(--ressort);
}
.faq__item.est-ouvert .faq__bascule::after { transform: translateY(2px) rotate(-135deg); }
.faq__bascule:hover { color: var(--sable-fonce); }
.faq__bascule:focus-visible { outline: 2px solid var(--sable); outline-offset: 5px; }
.faq--accordeon .faq__item { padding: 18px 0; gap: 10px; }
.faq--accordeon .faq__item:not(.est-ouvert) > :not(h4) { display: none; }
.faq--accordeon .faq__item:first-child { border-top: 1px solid var(--bord-clair); }


/* --- 6. Photos de chantier dans tout le site ----------------------------------- */
.bande-photos { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 800px) {
  .bande-photos--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .bande-photos--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.bande-photos__vue { margin: 0; overflow: hidden; aspect-ratio: 4 / 3; background: var(--marine-fonce); }
.bande-photos__vue img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .8s var(--ressort);
}
.bande-photos__vue:hover img { transform: scale(1.05); }

/* Mosaïque : une grande photo et des petites, pour la page à propos. */
@media (min-width: 900px) {
  .bande-photos--mosaique {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: 210px;
  }
  .bande-photos--mosaique .bande-photos__vue { aspect-ratio: auto; }
  .bande-photos--mosaique .bande-photos__vue:first-child { grid-column: span 2; grid-row: span 2; }
}
.bande-photos__legende { margin-top: 12px; font-size: 14px; color: var(--gris); }
.section + .section--serre .bande-photos, .tete-ligne + .bande-photos { margin-top: 30px; }

/* Cartes à photo (guides). */
.carte__photo { margin: 0; aspect-ratio: 16 / 10; overflow: hidden; background: var(--marine-fonce); }
.carte__photo img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .8s var(--ressort);
}
.carte:hover .carte__photo img { transform: scale(1.055); }
.carte--guide .carte__corps { gap: 10px; padding: 22px 22px 26px; }
.carte--guide .carte__corps p { font-size: 14.5px; }
.carte--guide .eyebrow { color: var(--sable-fonce); }

/* Bandeau sombre posé sur une photo (guides, thèmes, articles). */
.bandeau-photo {
  position: relative; isolation: isolate;
  background: var(--marine-fonce) var(--matiere, none) center / cover no-repeat;
}
.bandeau-photo::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg, rgba(9, 32, 50, .92) 0%, rgba(9, 32, 50, .78) 55%, rgba(9, 32, 50, .5) 100%);
}
.bandeau-photo.section--serre { padding-block: clamp(64px, 8vw, 120px); }

/* Photo dans le corps d'un guide. */
.prose__photo { margin: 30px 0; }
.prose__photo img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.prose__photo figcaption { margin-top: 8px; font-size: 13.5px; color: var(--gris); }


/* --- 7. À propos : le portrait encadré ------------------------------------------
   Le portrait remplissait la moitié de l'écran, visage recadré au plus près.
   Il devient une photo encadrée, posée sur une photo de chantier assombrie. */
.heros__media--portrait {
  position: relative; isolation: isolate;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(36px, 5vw, 72px) var(--gouttiere);
  background: var(--marine-fonce) var(--matiere, none) center / cover no-repeat;
}
.heros__media--portrait::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: rgba(9, 32, 50, .62);
}
.portrait {
  margin: 0; width: min(330px, 80%);
  background: var(--blanc); padding: 10px 10px 0;
  box-shadow: 0 30px 70px rgba(6, 22, 36, .45);
}
.portrait > .photo { height: auto !important; min-height: 0 !important; aspect-ratio: 4 / 5; }
.portrait > .photo::after { content: none !important; }
.portrait figcaption {
  padding: 13px 4px 14px; text-align: center;
  font-family: var(--titre); font-size: 14px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--marine);
}
@media (min-width: 900px) {
  .heros--portrait .heros__media, .heros--portrait .heros__texte { min-height: 520px; }
  /* Le titre touchait le bord de la photo sur un écran de 1440 px. */
  .heros--portrait .t-xl { font-size: clamp(34px, 3.4vw, 50px); }
}


/* --- 8. Site immobilier ----------------------------------------------------------
   Le site immobilier impose au héros un fond crème et un titre marine
   (.site-immo .heros, mk.css). Le diaporama et le portrait encadré sont sombres :
   on rend la main au blanc et au sable, sinon le texte disparaît sur la photo. */
.site-immo .heros--video,
.site-immo .heros--portrait { background: var(--marine-fonce); color: var(--blanc); }
.site-immo .heros--video h1,
.site-immo .heros--portrait h1 { color: var(--blanc); }
.site-immo .heros--video .chapeau { color: #DCE6EE; }
.site-immo .heros--portrait .chapeau { color: #C9D6E0; }
.site-immo .heros--video .marqueur,
.site-immo .heros--portrait .marqueur { color: var(--sable); }
.site-immo .heros--portrait .heros__texte { background: var(--marine); }
/* Sans bandeau de réassurance sous le texte, le héros immobilier garde de l'air
   en bas, pour que les boutons ne collent pas au bord de la photo. */
.heros--immo .heros__in { padding-block: clamp(60px, 8vw, 110px); }
.heros--immo .heros__texte { padding-block: 0; }
/* Des intérieurs ont besoin de lumière : le voile bleu, renforcé sur le
   terrassement, reste plus léger ici. La règle vient après celle du point 9
   dans l'ordre de la cascade grâce à sa double classe. */
.heros--diapo.heros--immo::before {
  background:
    linear-gradient(to bottom, rgba(17, 63, 98, .30) 0%, rgba(9, 32, 50, .66) 100%),
    rgba(17, 63, 98, .10);
}
/* mk.css peint .site-immo .heros__media en crème hachuré, plus fort que la
   classe du portrait : on reprend la main pour que la photo d'intérieur
   apparaisse derrière le cadre. */
.site-immo .heros__media--portrait {
  background: var(--marine-fonce) var(--matiere, none) center / cover no-repeat;
}


/* --- 9. Héros : un filtre plus bleu ---------------------------------------------
   Demande de la cliente : « augmente le bleu sur le filtre ». Le voile noir
   laisse la place à la marine de la charte, plus dense en bas pour le texte. */
.heros--diapo::before {
  background:
    linear-gradient(to bottom, rgba(17, 63, 98, .50) 0%, rgba(9, 32, 50, .80) 100%),
    rgba(17, 63, 98, .24);
}


/* --- 10. Une seule échelle typographique ------------------------------------------
   L'audit du 11/09 relevait, pour un même rôle, jusqu'à cinq tailles : menu en
   14 ou 16 px, bouton d'en-tête en 14 ou 16 px, surtitres de 11,5 à 15 px, texte
   courant de 13,5 à 16 px. Chaque rôle a désormais une taille, et une seule. */
:root {
  --fs-libelle: 13px;     /* surtitres, catégories, titres de pied, liens d'action */
  --ls-libelle: .18em;
  --fs-nav:     15px;     /* rubriques du menu, liens du menu déroulant, bouton d'en-tête */
  --fs-texte:   15.5px;   /* texte courant des cartes, FAQ, étapes, encarts */
  --fs-petit:   14px;     /* légendes et précisions */
}
.nav .nav__lien { font-size: var(--fs-nav); letter-spacing: .05em; text-transform: uppercase; }
.nav > .btn, .entete .btn, .mega__pied .btn { font-size: var(--fs-nav); letter-spacing: .06em; }
.mega__lien { font-size: var(--fs-nav); }
.mega__legende span, .mega__pied span { font-size: var(--fs-petit); }

.marqueur, .eyebrow, .mega__titre, .pied h4, .carte__lire, .carte__liens-plus, .outil__txt em {
  font-size: var(--fs-libelle); letter-spacing: var(--ls-libelle);
}

/* Titres de cartes : toujours en capitales, comme le reste des titres. */
.t-s, .zone__tete h3, .presta__txt h3 { text-transform: uppercase; }
.zone__tete h3, .presta__txt h3 { font-size: 19px; }
.faq__item h4, .etape h4, .info h4 { font-size: 17px; }

.carte__corps p, .carte__liens a, .faq__item p, .etape p, .presta__txt p, .info p, .metier p,
.outil__txt > span, .carte-zone__pied, .groupe-liste span, .faq-appel p:not(.faq-appel__titre),
.liste-coche p, .encart p, .encart li { font-size: var(--fs-texte); }
.reassurance__item span, .bande-photos__legende, .prose__photo figcaption { font-size: var(--fs-petit); }

.pied a:not(.pied__tel), .pied p, .pied address { font-size: 15px; }
.pied__legal a, .pied__signature, .pied__bas > span { font-size: 13px; }


/* --- 11. Accueil : les deux métiers, centrés ----------------------------------
   Deux cartes dans une grille à trois colonnes restaient collées à gauche. La
   grille passe à deux colonnes, centrée, et chaque carte liste toutes ses
   interventions sur deux colonnes. */
.grille--metiers { max-width: 1120px; margin-inline: auto; align-items: stretch; }
.grille--metiers ~ *, .section__tete:has(+ .grille--metiers) { max-width: 1120px; margin-inline: auto; }
.carte__liens--toutes {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px;
}
@media (max-width: 520px) { .carte__liens--toutes { grid-template-columns: 1fr; } }


/* --- 12. RÈGLE DU SITE : dans une rangée de blocs, les titres démarrent au
   même niveau ----------------------------------------------------------------
   Demande de la cliente le 11/09/2026, pour les deux sites. Un bloc centré
   verticalement fait descendre son titre dès que son texte prend une ligne de
   plus que celui du voisin : le bandeau sous le héros en était l'exemple.
   Désormais chaque bloc s'aligne en haut, et les rangées s'étirent pour que
   les cartes voisines aient la même hauteur. À respecter pour tout nouveau
   bloc, et dans la version WordPress. */
.grille, .metiers__liste, .outils__in, .reassurance__in, .chiffres, .colonnes { align-items: stretch; }
.colonnes:has(> .faq) { align-items: start; }
.reassurance__item, .outil, .info, .presta, .liste-coche li, .metier, .etape, .chiffre, .facteur {
  align-items: flex-start;
}
/* Bandeau sous le héros : le titre se cale au milieu du disque du picto, le
   texte descend en dessous. Tous les titres sont ainsi sur la même ligne. */
.reassurance__item > div { padding-top: 11px; }
.reassurance__item strong { line-height: 1.3; }
.reassurance__item span { display: block; margin-top: 3px; line-height: 1.45; }