/* ==========================================================================
   Accueil — Hero et barre de réassurance
   Source : design-export/MISE-A-JOUR-HERO-ACCUEIL.md, pages/Main.html, pages/Accueil-Mobile.html
   ========================================================================== */

@keyframes sr-rise {
  from { opacity: 0; transform: translateY(var(--rise-distance)); }
  to   { opacity: 1; transform: none; }
}

/* Hero ------------------------------------------------------------------- */
.sr-hero {
  position: relative;
  height: var(--hero-h);
  overflow: hidden;
  background-color: var(--placeholder-dark); /* sans photo, le texte reste lisible */
}
.sr-hero__photo { position: absolute; inset: 0; margin: 0; }
.sr-hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}

/* Emplacement vide (avant la vraie photo) */
.sr-hero__paysage { position: absolute; inset: 0; width: 100%; height: 100%; }
.sr-hero__camionnette {
  position: absolute;
  left: 60%;
  top: 42%;
  transform: translate(-50%, -50%);
}
.sr-hero__camionnette svg { width: 340px; height: 170px; }
.sr-hero__legende {
  position: absolute;
  right: 32px;
  bottom: 112px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 13px;
  border-radius: var(--r-btn);
  background: rgba(11,31,58,.78);
  border: 1px solid rgba(255,255,255,.14);
  color: var(--gold);
}
.sr-hero__legende-texte { display: flex; flex-direction: column; line-height: 1.35; }
.sr-hero__legende-titre { font-size: var(--fs-13); font-weight: 700; color: var(--white); }
.sr-hero__legende-fichier { font-size: var(--fs-12); color: var(--on-dark-300); }

/* Dégradé bleu nuit pour la lisibilité du texte */
.sr-hero__voile {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(11,31,58,.94) 0%, rgba(11,31,58,.82) 30%, rgba(11,31,58,.35) 58%, rgba(11,31,58,0) 78%),
    linear-gradient(0deg, rgba(11,31,58,.55) 0%, rgba(11,31,58,0) 28%);
}

.sr-hero__contenu {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
}
.sr-hero__texte {
  width: 560px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 26px;
  padding-bottom: 72px;
}
.sr-hero__dispo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-15);
  font-weight: 500;
  color: var(--on-dark-200);
}
.sr-hero__point {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 0 4px rgba(60,203,127,.18);
}
.sr-hero__titre {
  font-size: clamp(var(--fs-46), 6vw, var(--fs-64));
  line-height: 1.04;
  font-weight: 800;
  letter-spacing: var(--ls-display);
  color: var(--white);
}
.sr-hero__boutons { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.sr-hero__boutons .btn--lg { font-size: var(--fs-17); }

/* « Nos services » : contour clair sur la photo */
.btn--photo {
  padding: 0 26px;
  background: rgba(11,31,58,.25);
  border-color: rgba(255,255,255,.35);
  color: var(--white);
}
.btn--lg.btn--photo { font-size: var(--fs-16); }
.btn--photo:hover { color: var(--white); }
@media (hover: hover) and (pointer: fine) { .btn--photo:hover { border-color: rgba(255,255,255,.5); } }

/* Apparition du titre et de la barre au chargement (ordinateur, comme l'export) */
@media (min-width: 768px) and (prefers-reduced-motion: no-preference) {
  .sr-hero__titre { animation: sr-rise var(--dur-rise) var(--ease-out) both; }
  .sr-reassurance { animation: sr-rise var(--dur-rise) .3s var(--ease-out) both; }
}

/* Barre de réassurance ------------------------------------------------------ */
.sr-reassurance {
  position: relative;
  z-index: 2;
  list-style: none;
  margin: -64px auto -64px; /* chevauche le Hero et la section suivante, comme dans l'export */
  padding: 0;
  width: calc(100% - 2 * var(--gutter));
  max-width: var(--content);
  min-height: 128px;
  background: var(--white);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-strong);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: center;
}
.sr-reassurance__item {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 0 var(--sp-4);
  border-right: 1px solid var(--line);
}
.sr-reassurance__item:last-child { border-right: 0; }
.sr-reassurance__icone { flex-shrink: 0; width: 32px; height: 32px; color: var(--gold-600); }
.sr-reassurance__texte { display: flex; flex-direction: column; gap: 3px; }
.sr-reassurance__titre { font-size: var(--fs-18); font-weight: 700; color: var(--navy-900); }
.sr-reassurance__detail { font-size: var(--fs-14); line-height: 1.4; color: var(--ink-600); }

/* Ordinateur et tablette : fond gris clair juste sous la photo (la section suivante est claire). */
@media (min-width: 768px) { .sr-accueil { background: var(--surface); } }

/* Tablette : 2 × 2 */
@media (max-width: 1023px) {
  .sr-reassurance { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sr-reassurance__item { padding: var(--sp-3); }
  .sr-reassurance__item:nth-child(2n) { border-right: 0; }
  .sr-reassurance__item:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
}

/* Mobile ------------------------------------------------------------------- */
@media (max-width: 767px) {
  /* La photo occupe le haut de l'écran (62 %), le texte est en dessous sur le bleu nuit et la photo
     s'y fond : la camionnette n'est plus cachée derrière le titre (31.10.2026, Gioele). */
  .sr-hero { background-color: var(--navy-900); }
  .sr-hero__photo { bottom: auto; height: 62%; }
  .sr-hero__img { object-position: var(--sr-cadrage-mobile, 70% 50%); }
  .sr-hero__voile {
    background: linear-gradient(0deg, rgba(11,31,58,1) 0%, rgba(11,31,58,1) 38%, rgba(11,31,58,.55) 46%, rgba(11,31,58,0) 60%);
  }
  .sr-hero__camionnette { left: 50%; top: 178px; transform: translateX(-50%); }
  .sr-hero__camionnette svg { width: 210px; height: 105px; }
  .sr-hero__legende { right: 12px; top: 14px; bottom: auto; gap: 8px; padding: 7px 10px; }
  .sr-hero__legende-fichier { font-size: 11px; color: var(--white); }

  .sr-hero__contenu {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: auto;
    display: block;
    padding: 0 var(--sp-3) 60px;
  }
  .sr-hero__texte { width: auto; gap: 20px; padding-bottom: 0; }
  .sr-hero__dispo { gap: var(--sp-1); font-size: var(--fs-14); }
  .sr-hero__point { width: 7px; height: 7px; }
  .sr-hero__titre { font-size: var(--fs-40); line-height: 1.1; }

  .sr-reassurance { width: auto; margin: -24px 20px 56px; min-height: 0; align-items: stretch; }
  .sr-reassurance__item {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-1);
    padding: 20px var(--sp-2);
  }
  .sr-reassurance__icone { width: 26px; height: 26px; }
  .sr-reassurance__titre { font-size: var(--fs-16); }
  .sr-reassurance__detail { font-size: var(--fs-13); }
}


/* ==========================================================================
   Process — « Ce qui se passe quand vous appelez » (étapes : base.css)
   Source : design-export/pages/Main.html et Accueil-Mobile.html
   ========================================================================== */
.sr-process { background: var(--surface); padding: 176px 0 var(--sp-16); } /* 176 px : place pour la barre de réassurance */
.sr-process__contenu { display: flex; flex-direction: column; gap: var(--sp-8); }

/* ==========================================================================
   Services — 6 cartes sur fond sombre
   ========================================================================== */
.sr-services-accueil { background: var(--navy-900); padding: var(--sp-16) 0; }
.sr-services-accueil__contenu { display: flex; flex-direction: column; gap: 56px; }
.sr-services-accueil .sr-section-titre { color: var(--white); }
.sr-services-accueil .sr-section-intro { color: var(--on-dark-300); }
.sr-services-accueil__intro { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.sr-cartes-services { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.sr-cartes-services > li { display: flex; }
.sr-carte-service {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  min-height: 220px;
  padding: var(--sp-4);
  border-radius: var(--r-md);
  background: var(--navy-800);
  border: 1px solid rgba(255,255,255,.1);
  color: var(--white);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--dur-card) ease, border-color var(--dur-card) ease, background-color var(--dur-card) ease;
}
.sr-carte-service:hover { color: var(--white); }
/* Survol (export) : la carte se soulève, bordure or et fond plus clair ; seulement avec une souris */
@media (hover: hover) and (pointer: fine) {
  .sr-carte-service:hover { transform: translateY(var(--lift-card)); border-color: rgba(221,174,42,.45); background-color: var(--navy-700); }
}
/* Effet « pressé » au toucher (micro-interactions validées le 22.10.2026) */
@media (prefers-reduced-motion: no-preference) {
  .sr-carte-service:active { transform: scale(.98); transition-duration: var(--dur-press); }
}
.sr-carte-service .sr-icone { flex-shrink: 0; color: var(--gold); }
.sr-carte-service__textes { display: flex; flex-direction: column; gap: var(--sp-2); }
.sr-carte-service__titre { font-size: var(--fs-22); font-weight: 700; line-height: normal; }
.sr-carte-service__texte { font-size: var(--fs-15); line-height: var(--lh-body); color: var(--on-dark-300); }

@media (max-width: 1023px) {
  .sr-cartes-services { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  .sr-process { padding: 72px 0; }
  .sr-process__contenu { gap: 28px; }

  .sr-services-accueil { padding: 72px 0; }
  .sr-services-accueil__contenu { gap: 28px; }
  .sr-services-accueil__intro { gap: 0; }
  .sr-cartes-services { display: flex; flex-direction: column; gap: 12px; }
  .sr-carte-service { flex-direction: row; gap: var(--sp-2); min-height: 0; padding: 22px 20px; }
  .sr-carte-service .sr-icone { width: 30px; height: 30px; }
  .sr-carte-service__textes { gap: 6px; }
  .sr-carte-service__titre { font-size: var(--fs-18); }
  .sr-carte-service__texte { font-size: var(--fs-14); line-height: 1.55; }
  .sr-services-accueil__tous { width: 100%; font-size: var(--fs-15); }
}


/* ==========================================================================
   Où nous intervenons — carte stylisée du Léman + communes (inc/communes.php)
   Ordinateur : carte à gauche, texte à droite centré en hauteur.
   Tablette et téléphone : titre, carte, liste, encart (ordre de l'export mobile).
   ========================================================================== */
.sr-zone { background: var(--surface); padding: var(--sp-16) 0; }
.sr-zone__grille {
  display: grid;
  grid-template-columns: minmax(0, 640px) minmax(340px, 1fr); /* la carte rétrécit avant le texte (tablette en paysage) */
  grid-template-rows: 1fr auto auto 1fr;
  grid-template-areas: "carte ." "carte tete" "carte suite" "carte .";
  column-gap: clamp(40px, 5vw, 80px);
}
.sr-zone__tete { grid-area: tete; display: flex; flex-direction: column; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.sr-zone__suite { grid-area: suite; display: flex; flex-direction: column; gap: var(--sp-3); }

/* La carte */
.sr-zone__carte {
  grid-area: carte;
  align-self: center;
  position: relative;
  box-sizing: content-box; /* comme l'export : la bordure s'ajoute (repères au même pixel) */
  width: 100%;
  aspect-ratio: 640 / 520;
  overflow: hidden;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--white);
}
.sr-zone__dessin { position: absolute; inset: 0; display: block; }

/* Noms et repères fixes du dessin (carte/dessus.php). Les noms secondaires sont masqués sur téléphone. */
.sr-zone__dessin text { font-family: var(--font); }
.sr-carte__pays { font-size: 11px; font-weight: 600; letter-spacing: .32em; fill: rgba(11,31,58,.42); }
.sr-carte__lac-nom { font-size: 19px; font-style: italic; font-weight: 500; letter-spacing: .3em; fill: rgba(31,74,128,.55); }
.sr-carte__vignes-nom { font-size: 10px; font-style: italic; font-weight: 500; letter-spacing: .08em; fill: rgba(100,112,52,.8); }
.sr-carte__lieu { font-size: 10.5px; font-weight: 500; fill: rgba(11,31,58,.6); }
.sr-carte__alt { font-size: 9.5px; fill: rgba(11,31,58,.5); }
.sr-carte__eau { font-size: 10px; font-style: italic; letter-spacing: .12em; fill: rgba(56,104,160,.75); }
.sr-carte__a9 { font-size: 8.5px; font-weight: 700; fill: rgba(11,31,58,.7); }
.sr-carte__echelle text { font-size: 9.5px; font-weight: 500; fill: rgba(11,31,58,.6); }

/* Légende (ordinateur et tablette) et mention des données */
.sr-zone__legende {
  position: absolute;
  top: 3%;
  right: 2.5%;
  padding: 10px 12px 11px;
  border-radius: 6px;
  background: rgba(255,255,255,.94);
  box-shadow: 0 4px 14px rgba(11,31,58,.08);
  font-size: var(--fs-12);
  line-height: normal;
  color: var(--navy-900);
}
.sr-zone__legende-titre { margin-bottom: 6px; font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-text); }
.sr-zone__legende ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.sr-zone__legende li { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.sr-legende { flex-shrink: 0; display: inline-block; width: 14px; height: 10px; }
.sr-legende--siege { width: 12px; height: 12px; border-radius: 50%; background: var(--navy-900); box-shadow: inset 0 0 0 3px var(--navy-900), inset 0 0 0 6px var(--gold); }
.sr-legende--commune { width: 10px; height: 10px; margin: 0 2px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 2px var(--white), 0 0 0 3px rgba(176,132,24,.35); }
.sr-legende--zone { border: 1.3px dashed rgba(176,132,24,.75); border-radius: 2px; background: rgba(221,174,42,.12); }
.sr-legende--route { height: 5px; border-radius: 3px; background: var(--white); box-shadow: 0 0 0 1px #D8D1C3; }
.sr-legende--rail { height: 0; border-top: 1.4px dashed rgba(11,31,58,.5); }
.sr-zone__credit { position: absolute; right: 1.6%; bottom: 1.2%; font-size: 10px; line-height: normal; color: rgba(11,31,58,.5); }
.sr-zone__credit a { color: inherit; text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .sr-zone__credit a:hover { color: var(--navy-900); text-decoration: underline; } }
@media (max-width: 767px) {
  .sr-zone__legende, .sr-carte__mineur { display: none; }
  .sr-carte__pays { font-size: 15px; }
  .sr-carte__lac-nom { font-size: 26px; }
  .sr-zone__credit { font-size: 9px; }
}
.sr-zone__duree {
  position: absolute;
  left: 3%;
  bottom: 4%;
  padding: 5px 10px;
  border-radius: var(--r-pill);
  background: var(--white);
  border: 1px solid var(--map-pill-border);
  font-size: var(--fs-13);
  font-weight: 600;
  line-height: normal;
  color: var(--gold-text);
  white-space: nowrap;
}

/* Repères des communes : point or ; Vevey (siège) en bleu nuit avec un cœur or */
.sr-repere { position: absolute; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; }
.sr-repere__point {
  box-sizing: content-box; /* comme l'export : 14 px + bordure blanche de 3 px */
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--gold);
  border: 3px solid var(--white);
  box-shadow: 0 2px 6px rgba(11,31,58,.3);
}
.sr-repere--siege .sr-repere__point {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: var(--navy-900);
  box-shadow: 0 0 0 5px rgba(221,174,42,.28), 0 6px 14px rgba(11,31,58,.3);
}
.sr-repere--siege .sr-repere__point::after { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--gold); }
/* Vevey qui pulse (Gioele, 02.11.2026) : une onde dorée part du siège toutes les 3 secondes. */
@media (prefers-reduced-motion: no-preference) {
  .sr-repere--siege .sr-repere__point { position: relative; }
  .sr-repere--siege .sr-repere__point::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid var(--gold);
    opacity: 0;
    pointer-events: none;
    animation: sr-onde-siege 3s cubic-bezier(.23,1,.32,1) 1s infinite;
  }
}
@keyframes sr-onde-siege {
  0% { transform: scale(1); opacity: .75; }
  65%, 100% { transform: scale(2.6); opacity: 0; }
}
.sr-repere__etiquette {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  padding: 4px 8px;
  border-radius: 6px;
  background: rgba(255,255,255,.9);
  line-height: 1.25;
}
.sr-repere--droite .sr-repere__etiquette { left: 100%; margin-left: 6px; align-items: flex-start; }
.sr-repere--gauche .sr-repere__etiquette { right: 100%; margin-right: 6px; align-items: flex-end; }
.sr-repere--siege.sr-repere--gauche .sr-repere__etiquette { right: calc(100% + 2px); }
.sr-repere__nom { font-size: var(--fs-14); font-weight: 700; color: var(--navy-900); white-space: nowrap; }
.sr-repere__detail { font-size: var(--fs-12); font-weight: 500; color: var(--ink-600); white-space: nowrap; }

/* Liste des communes, sur deux colonnes */
.sr-zone__communes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--sp-4);
  border-top: 1px solid var(--line);
}
.sr-zone__communes li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-17);
  font-weight: 500;
  line-height: normal;
  color: var(--navy-900);
}
.sr-zone__puce { width: 7px; height: 7px; flex-shrink: 0; border-radius: 50%; background: var(--gold); }
.sr-zone__communes .est-siege { font-weight: 700; }
.sr-zone__communes .est-siege .sr-zone__puce { width: 10px; height: 10px; background: var(--navy-900); box-shadow: 0 0 0 3px rgba(221,174,42,.45); }

/* « Votre commune n'est pas dans la liste ? » */
.sr-zone__encart {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  padding: 22px var(--sp-3);
  border-radius: var(--r-md);
  background: var(--navy-900);
}
.sr-zone__question { font-size: var(--fs-17); font-weight: 600; line-height: 1.4; color: var(--white); }
.sr-zone__question span { font-weight: 400; color: var(--on-dark-300); }
.sr-zone__appel { flex-shrink: 0; gap: 10px; padding: 0 20px; font-size: var(--fs-17); }

/* Écran moyen (1024–1279 px) : la question et le bouton d'appel l'un sous l'autre */
@media (max-width: 1279px) {
  .sr-zone__encart { flex-direction: column; align-items: stretch; }
}

/* Tablette : l'un sous l'autre */
@media (max-width: 1023px) {
  .sr-zone__grille { display: flex; flex-direction: column; gap: var(--sp-4); }
  .sr-zone__tete { margin-bottom: 0; }
  .sr-zone__carte { align-self: auto; }
}

@media (max-width: 767px) {
  .sr-zone { padding: 72px 0; }
  .sr-zone__grille, .sr-zone__tete, .sr-zone__suite { gap: 22px; }
  .sr-zone__carte { border-radius: var(--r-md); }
  .sr-zone__duree { font-size: var(--fs-12); }
  .sr-repere__point { width: 12px; height: 12px; }
  .sr-repere--siege .sr-repere__point { width: 22px; height: 22px; }
  .sr-repere__nom { font-size: var(--fs-12); }
  .sr-zone__communes { column-gap: var(--sp-2); }
  .sr-zone__communes li { padding: 12px 0; font-size: var(--fs-15); }
  .sr-zone__encart { flex-direction: column; align-items: stretch; gap: var(--sp-2); padding: 20px; }
  .sr-zone__question { font-size: var(--fs-16); }
}

/* ==========================================================================
   Régies — « Vous gérez des immeubles sur la Riviera ? » + les 2 contrats en résumé
   (noms, prix et tarif horaire : inc/contrats.php)
   ========================================================================== */
.sr-regies { background: var(--white); padding: var(--sp-16) 0; }
.sr-regies__grille { display: grid; grid-template-columns: minmax(0, 1fr) 500px; gap: var(--sp-12); align-items: center; }
.sr-regies__textes { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-3); }
.sr-regies__intro { max-width: 540px; }
.sr-regies__bouton { margin-top: var(--sp-1); padding: 0 var(--sp-3); font-size: var(--fs-15); }
.sr-regies__offres { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.sr-regies__contrats { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.sr-regies__note { font-size: var(--fs-13); line-height: 1.5; color: var(--ink-600); }
.sr-regie-contrat__des { font-size: var(--fs-15); font-weight: 600; letter-spacing: 0; color: var(--ink-600); } /* « dès » : prix de départ */
.sr-regie-contrat {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-3);
  padding: 28px var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.sr-regie-contrat--recommande { border: 1.5px solid var(--gold); background: var(--gold-tint); }
.sr-regie-contrat__textes { display: flex; flex-direction: column; gap: 6px; }
.sr-regie-contrat__nom { font-size: var(--fs-20); font-weight: 700; line-height: normal; color: var(--navy-900); }
.sr-regie-contrat__phrase { font-size: var(--fs-15); line-height: normal; color: var(--ink-600); }
.sr-regie-contrat__badge { font-size: var(--fs-12); font-weight: 600; line-height: normal; color: var(--gold-text); }
.sr-regie-contrat__prix { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex-shrink: 0; }
.sr-regie-contrat__montant { font-size: var(--fs-30); font-weight: 800; letter-spacing: -.02em; line-height: normal; color: var(--navy-900); }
.sr-regie-contrat__unite { font-size: var(--fs-13); line-height: normal; color: var(--ink-600); }

@media (max-width: 1023px) {
  .sr-regies__grille { grid-template-columns: minmax(0, 1fr); gap: 40px; }
}

@media (max-width: 767px) {
  .sr-regies { padding: 72px 0; }
  .sr-regies__grille { display: flex; flex-direction: column; align-items: stretch; gap: 20px; }
  .sr-regies__textes { gap: 20px; }
  .sr-regies__contrats { gap: 10px; }
  .sr-regie-contrat { gap: 12px; padding: 18px 20px; }
  .sr-regie-contrat__textes { gap: 2px; }
  .sr-regie-contrat__nom { font-size: var(--fs-16); }
  .sr-regie-contrat__prix { gap: 0; }
  .sr-regie-contrat__montant { font-size: var(--fs-22); }
  .sr-regie-contrat__unite { font-size: var(--fs-12); }
  .sr-regies__bouton { width: 100%; margin-top: 0; }
}

/* ==========================================================================
   Nos réalisations — les 3 dernières, liste type « Robert » (vignette, titre, catégorie, flèche)
   Chaque ligne ouvre la réalisation sur la page Réalisations.
   ========================================================================== */
.sr-real-accueil { background: var(--surface); padding: var(--sp-16) 0; }
.sr-real-accueil__contenu { display: flex; flex-direction: column; gap: var(--sp-6); }
.sr-real-accueil__tete { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--sp-6); }
.sr-real-accueil__tete .btn { flex-shrink: 0; }
.sr-real-accueil__titres { display: flex; flex-direction: column; gap: var(--sp-2); max-width: 620px; }

.sr-real-accueil__entete,
.sr-ligne-real {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr) 200px 48px;
  gap: var(--sp-4);
  align-items: center;
}
.sr-real-accueil__entete {
  padding: 0 0 var(--sp-2);
  border-bottom: 1px solid var(--line-strong);
  font-size: var(--fs-14);
  font-weight: 600;
  line-height: normal;
  color: var(--ink-600);
}
.sr-real-accueil__col-titre { grid-column: 2; }
.sr-real-accueil__liste { list-style: none; margin: 0; padding: 0; }

.sr-ligne-real {
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
  color: var(--navy-900);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--dur-fast) ease;
}
.sr-ligne-real:hover { color: var(--navy-900); }
.sr-ligne-real__textes { display: contents; } /* ordinateur : titre et catégorie dans leurs colonnes */
.sr-ligne-real__vignette {
  width: 112px;
  height: 80px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-sm);
  background-color: var(--placeholder);
  background-image: repeating-linear-gradient(135deg, rgba(11,31,58,.04) 0 1px, transparent 1px 10px);
  color: var(--placeholder-icon);
  transition: transform var(--dur-thumb) ease;
}
.sr-ligne-real__vignette img { width: 100%; height: 100%; object-fit: cover; }
.sr-ligne-real__titre {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 12px;
  font-size: var(--fs-22);
  font-weight: 600;
  line-height: normal;
  letter-spacing: var(--ls-card);
}
.sr-ligne-real__exemple { font-size: var(--fs-13); font-weight: 500; letter-spacing: 0; color: var(--gold-text); }
.sr-ligne-real__fleche {
  box-sizing: content-box; /* comme l'export : 44 px + la bordure */
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  color: var(--navy-900);
  transition: background-color var(--dur-fast) ease, border-color var(--dur-fast) ease, color var(--dur-fast) ease;
}
/* Survol (export) : fond blanc léger, vignette qui grossit, flèche bleu nuit ; seulement avec une souris */
@media (hover: hover) and (pointer: fine) {
  .sr-ligne-real:hover { background-color: rgba(255,255,255,.7); }
  .sr-ligne-real:hover .sr-ligne-real__vignette { transform: scale(1.04); }
  .sr-ligne-real:hover .sr-ligne-real__fleche { background-color: var(--navy-900); border-color: var(--navy-900); color: var(--white); }
}
/* Retour visuel au toucher */
.sr-ligne-real:active { background-color: rgba(255,255,255,.7); }

@media (max-width: 767px) {
  .sr-real-accueil { padding: 72px 0; }
  .sr-real-accueil__contenu { gap: 20px; }
  .sr-real-accueil__liste { border-top: 1px solid var(--line-strong); }
  .sr-ligne-real { display: flex; align-items: center; gap: 14px; padding: var(--sp-2) 0; }
  .sr-ligne-real__vignette { width: 76px; height: 76px; flex-shrink: 0; }
  .sr-ligne-real__vignette svg { width: 18px; height: 18px; }
  .sr-ligne-real__textes { display: flex; flex-direction: column; gap: var(--sp-1); flex: 1; min-width: 0; }
  .sr-ligne-real__titre { display: block; font-size: var(--fs-16); line-height: 1.3; letter-spacing: 0; }
  .sr-ligne-real__exemple { font-size: var(--fs-12); }
  .sr-ligne-real__cat { display: flex; }
  .sr-ligne-real__fleche { width: 36px; height: 36px; flex-shrink: 0; }
  .sr-ligne-real__fleche svg { width: 14px; height: 14px; }
  .sr-real-accueil__tout { width: 100%; background: var(--white); font-size: var(--fs-15); }
}

/* ==========================================================================
   L'entreprise — « Une entreprise familiale, installée à Vevey » (photo Histoire + texte)
   ========================================================================== */
.sr-histoire-accueil { background: var(--white); padding: var(--sp-16) 0; }
.sr-histoire-accueil__grille { display: grid; grid-template-columns: 520px minmax(0, 1fr); gap: var(--sp-12); align-items: center; }
.sr-histoire-accueil__photo {
  position: relative;
  height: 560px;
  margin: 0;
  overflow: hidden;
  border-radius: var(--r-md);
  background-color: var(--placeholder);
  background-image: repeating-linear-gradient(135deg, rgba(11,31,58,.035) 0 1px, transparent 1px 14px);
}
.sr-histoire-accueil__img { width: 100%; height: 100%; object-fit: cover; }
.sr-histoire-accueil__textes { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-3); }
.sr-histoire-accueil__textes p { font-size: var(--fs-18); line-height: 1.65; color: var(--ink-600); }
.sr-histoire-accueil__bouton { margin-top: var(--sp-1); }

@media (max-width: 1023px) {
  .sr-histoire-accueil__grille { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--sp-6); }
  .sr-histoire-accueil__photo { height: 460px; }
}

@media (max-width: 767px) {
  .sr-histoire-accueil { padding: 72px 0; }
  .sr-histoire-accueil__grille { display: flex; flex-direction: column; align-items: stretch; gap: 32px; }
  .sr-histoire-accueil__photo { height: 300px; }
  .sr-histoire-accueil .sr-legende-photo { left: 14px; bottom: 14px; }
  .sr-histoire-accueil .sr-legende-photo svg { width: 16px; height: 16px; }
  .sr-histoire-accueil__textes { align-items: stretch; gap: 20px; }
  .sr-histoire-accueil__textes p { font-size: var(--fs-16); line-height: var(--lh-body); }
  .sr-histoire-accueil__bouton { width: 100%; height: var(--btn); margin-top: 0; }
}

/* ==========================================================================
   FAQ — « Vos questions » (demande de Gioele, 24.10.2026)
   Fond bleu nuit, 12 questions en 5 thèmes. Une carte par question : angles presque droits,
   bordure à peine visible, lueur qui part du bord gauche (or du logo → bleu marine, puis fond).
   Question en majuscules, « + » doré qui devient « − ». Réponse ≥ 16 px, contraste élevé.
   Le rouge reste réservé aux boutons d'appel.
   ========================================================================== */
.sr-faq { --focus: var(--gold); background: var(--navy-900); padding: var(--sp-16) 0; color: var(--white); }
.sr-faq__contenu { display: flex; flex-direction: column; gap: var(--sp-6); }
.sr-faq__tete { display: flex; flex-direction: column; gap: var(--sp-2); }
.sr-faq__titre {
  font-size: clamp(44px, 9vw, 112px);
  line-height: 1;
  font-weight: 700;
  letter-spacing: var(--ls-display);
  color: var(--white);
}
.sr-faq__intro { font-size: var(--fs-18); line-height: var(--lh-body); color: var(--on-dark-300); }

.sr-faq__theme { display: flex; flex-direction: column; gap: var(--sp-2); }
.sr-faq__theme-titre {
  font-size: var(--fs-13);
  font-weight: 600;
  line-height: normal;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold);
}
.sr-faq__liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }

.sr-faq__item {
  position: relative;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,.08);
  background-color: #0E2342; /* un cran plus clair que le fond de la section (navy-900) */
  overflow: hidden;
  isolation: isolate;
}
/* La lueur : or du logo contre le bord gauche, puis bleu marine, puis le fond de la carte. */
.sr-faq__item::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Deux halos posés en « écran » (ils éclaircissent sans salir) : l'or du logo, serré dans le coin
     bas-gauche, puis le bleu du logo, plus large ; les deux s'éteignent vers la droite. */
  background:
    radial-gradient(42% 150% at 0% 96%, rgba(242,196,64,.9) 0%, rgba(221,174,42,.5) 22%, rgba(221,174,42,.14) 52%, rgba(221,174,42,0) 78%),
    radial-gradient(62% 170% at 0% 70%, rgba(52,96,168,.55) 0%, rgba(34,70,128,.28) 42%, rgba(22,48,90,0) 78%);
  mix-blend-mode: screen;
  opacity: .45; /* questions fermées : lueur discrète (Gioele, 02.11.2026 ; avant .8) */
  transition: opacity var(--dur-card) ease;
}
/* Question ouverte mise en valeur (Gioele, 02.11.2026) : lueur pleine et fine bordure dorée. */
.sr-faq__item.est-ouvert::before { opacity: 1; }
.sr-faq__item.est-ouvert { border-color: rgba(221,174,42,.55); }

.sr-faq__entete { margin: 0; font: inherit; }
.sr-faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  width: 100%;
  min-height: 88px;
  padding: 24px 32px 24px 40px;
  border: 0;
  background: none;
  color: var(--white);
  font: inherit;
  font-size: var(--fs-20);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: .01em;
  text-align: left;
  text-transform: uppercase;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.sr-faq__question:focus-visible { outline-offset: -4px; border-radius: 6px; }
.sr-faq__texte-q { max-width: 760px; }
.sr-faq__plus { flex-shrink: 0; color: var(--gold); }
.sr-faq__plus-v { transform-origin: 12px 12px; transition: transform var(--dur-card) var(--ease-ui); }
.est-ouvert .sr-faq__plus-v { transform: scaleY(0); } /* « + » → « − » */

/* Réponse : visible sans JavaScript ; avec JavaScript, repliée tant que la question est fermée. */
.sr-faq__reponse { display: grid; grid-template-rows: 1fr; }
.sr-faq__reponse-int { min-height: 0; overflow: hidden; }
.sr-faq__reponse p {
  max-width: 760px;
  padding: 0 32px 28px 40px;
  font-size: var(--fs-17);
  line-height: 1.65;
  color: rgba(255,255,255,.88);
}
.sr-faq__reponse a { color: var(--white); text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 3px; }
.sr-js .sr-faq__item:not(.est-ouvert) .sr-faq__reponse { grid-template-rows: 0fr; visibility: hidden; }
@media (prefers-reduced-motion: no-preference) {
  /* Ouverture : la hauteur se déplie, le texte apparaît en fondu. Fermeture un peu plus rapide. */
  .sr-js .sr-faq__reponse { transition: grid-template-rows .32s var(--ease-ui), visibility 0s linear 0s; }
  .sr-js .sr-faq__item:not(.est-ouvert) .sr-faq__reponse { transition: grid-template-rows .24s var(--ease-ui), visibility 0s linear .24s; }
  .sr-js .sr-faq__reponse p { transition: opacity .28s var(--ease-ui); }
  .sr-js .sr-faq__item:not(.est-ouvert) .sr-faq__reponse p { opacity: 0; transition-duration: .16s; }
  .sr-faq--sans-anim .sr-faq__reponse, .sr-faq--sans-anim .sr-faq__reponse p { transition: none !important; }
}

/* Survol (souris seulement) : la lueur s'allume un peu ; au toucher, retour immédiat. */
@media (hover: hover) and (pointer: fine) {
  .sr-faq__item:hover::before { opacity: .8; }
  .sr-faq__item:not(.est-ouvert):hover { border-color: rgba(221,174,42,.28); }
  .sr-faq__item.est-ouvert:hover::before { opacity: 1; }
}
.sr-faq__item { transition: border-color var(--dur-card) ease; }
.sr-faq__question:active .sr-faq__texte-q { color: var(--on-dark-200); }

@media (max-width: 767px) {
  .sr-faq { padding: 72px 0; }
  .sr-faq__contenu { gap: 40px; }
  .sr-faq__intro { font-size: var(--fs-16); }
  .sr-faq__question { gap: var(--sp-2); min-height: 72px; padding: 20px 18px 20px 22px; font-size: var(--fs-17); line-height: 1.32; letter-spacing: 0; }
  .sr-faq__plus { width: 22px; height: 22px; }
  .sr-faq__reponse p { padding: 0 18px 22px 22px; font-size: var(--fs-16); line-height: var(--lh-body); }
  .sr-faq__item::before {
    background:
      radial-gradient(46% 120% at 0% 100%, rgba(242,196,64,.85) 0%, rgba(221,174,42,.48) 22%, rgba(221,174,42,.13) 52%, rgba(221,174,42,0) 78%),
      radial-gradient(80% 170% at 0% 70%, rgba(52,96,168,.55) 0%, rgba(34,70,128,.28) 42%, rgba(22,48,90,0) 78%);
  }
}

/* Courbes de relief en fond (Gioele, 02.11.2026) : motif de courbes de niveau très léger (6 %),
   dans l'esprit des reliefs de la carte, sur les sections bleu nuit Services et FAQ. */
.sr-services-accueil, .sr-faq { background-image: url(../img/motif-relief.svg); background-repeat: no-repeat; }
.sr-services-accueil { background-position: right -160px top -120px; background-size: 1600px auto; }
.sr-faq { background-position: left -320px bottom -160px; background-size: 1700px auto; }
@media (max-width: 767px) {
  .sr-services-accueil { background-position: right -420px top -60px; background-size: 1000px auto; }
  .sr-faq { background-position: left -380px bottom -80px; background-size: 1000px auto; }
}