/* ==========================================================================
   Pages intérieures : en-tête de page, fil d'Ariane, pastilles, page Services.
   Source : design-export (Services, Réalisations, Contrats, L'entreprise).
   ========================================================================== */

/* En-tête sombre de page ------------------------------------------------------ */
.sr-entete-page { background: var(--navy-900); padding: 88px 0 104px; }
.sr-entete-page__contenu { display: flex; flex-direction: column; gap: var(--sp-3); }
.sr-entete-page__titre {
  max-width: 860px;
  font-size: var(--fs-56);
  line-height: var(--lh-tight);
  font-weight: 800;
  letter-spacing: var(--ls-h1);
  color: var(--white);
}
.sr-entete-page__intro { max-width: 680px; font-size: var(--fs-18); line-height: 1.65; color: var(--on-dark-300); }
.sr-entete-page__boutons { display: flex; flex-wrap: wrap; gap: 12px; margin-top: var(--sp-1); }
.sr-entete-page__appel { padding: 0 26px 0 20px; gap: 12px; font-size: var(--fs-18); }
.sr-entete-page__secondaire { padding: 0 26px; font-size: var(--fs-16); }

/* Fil d'Ariane : « Accueil / Services » */
.sr-fil ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; font-size: var(--fs-14); line-height: normal; color: var(--on-dark-300); }
.sr-fil li + li::before { content: "/"; margin: 0 10px; color: var(--sep-dark); }
.sr-fil a, .sr-fil a:hover { color: var(--on-dark-300); text-decoration: none; }
.sr-fil [aria-current="page"] { color: var(--white); }

/* Pastilles (raccourcis vers les domaines, filtres) ---------------------------- */
.sr-pastilles { display: flex; flex-wrap: wrap; gap: var(--sp-1); }
.sr-pastille {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  height: var(--btn-chip);
  padding: 0 var(--sp-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  background: var(--white);
  color: var(--navy-900);
  font-size: var(--fs-15);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease, border-color var(--dur-fast) ease, transform var(--dur-fast) ease;
}
.sr-pastille:hover { color: var(--navy-900); }
@media (hover: hover) and (pointer: fine) { .sr-pastille:hover { border-color: var(--navy-900); } }
@media (prefers-reduced-motion: no-preference) { .sr-pastille:active { transform: scale(.98); transition-duration: var(--dur-press); } }

/* Page Services : 6 domaines ---------------------------------------------------- */
.sr-domaines { background: var(--white); padding: 56px 0 var(--sp-12); }
.sr-domaines .sr-pastilles { padding-bottom: 40px; }
.sr-domaine {
  display: grid;
  grid-template-columns: 380px minmax(0, 1fr);
  gap: 80px;
  padding: var(--sp-8) 0;
  border-top: 1px solid var(--line);
}
.sr-domaine__tete { display: flex; flex-direction: column; gap: 20px; align-self: start; }
.sr-domaine__icone {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--gold-600);
}
.sr-domaine__titre { font-size: var(--fs-30); line-height: 1.15; font-weight: 700; letter-spacing: var(--ls-h2); color: var(--navy-900); }
.sr-domaine__corps { display: flex; flex-direction: column; }
.sr-domaine__bouton { align-self: flex-start; margin-top: 28px; font-size: var(--fs-15); }

/* Liste à coches dorées */
.sr-coches { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.sr-coches li {
  display: flex;
  gap: 14px;
  padding: var(--sp-2) 0;
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-17);
  line-height: 1.55;
  color: var(--navy-900);
}
.sr-coches .sr-icone { flex-shrink: 0; margin-top: 3px; color: var(--gold-600); }

/* Tablette ------------------------------------------------------------------------ */
@media (max-width: 1023px) {
  .sr-domaine { grid-template-columns: 1fr; gap: var(--sp-3); }
}

/* Téléphone ----------------------------------------------------------------------- */
@media (max-width: 767px) {
  .sr-entete-page { padding: 40px 0 48px; }
  .sr-entete-page__contenu { gap: 20px; padding-inline: var(--sp-3); }
  .sr-entete-page__titre { font-size: var(--fs-40); line-height: 1.08; letter-spacing: var(--ls-display); }
  .sr-entete-page__intro { font-size: var(--fs-16); }
  .sr-fil ol { font-size: var(--fs-13); }
  .sr-fil li + li::before { margin: 0 var(--sp-1); }
  .sr-entete-page__boutons { flex-direction: column; gap: 10px; margin-top: 4px; }
  .sr-entete-page__boutons .btn { width: 100%; }
  .sr-entete-page__appel { padding: 0; font-size: var(--fs-20); }
  .sr-entete-page__secondaire { height: var(--btn); }

  /* Pastilles sur une ligne qui défile de côté */
  .sr-domaines { padding: 28px 0 56px; }
  .sr-domaines .sr-pastilles {
    flex-wrap: nowrap;
    overflow-x: auto;
    margin: 0 calc(-1 * var(--gutter));
    padding: 0 var(--gutter) 4px;
    scrollbar-width: none;
  }
  .sr-domaines .sr-pastilles::-webkit-scrollbar { display: none; }

  .sr-domaine { display: flex; flex-direction: column; gap: 0; padding: 40px 0 8px; border-top: 0; }
  .sr-domaine__tete { flex-direction: row; align-items: center; gap: 14px; margin-bottom: 12px; }
  .sr-domaine__icone { width: 52px; height: 52px; border-radius: var(--r-sm); flex-shrink: 0; }
  .sr-domaine__icone .sr-icone { width: 28px; height: 28px; }
  .sr-domaine__titre { font-size: var(--fs-22); line-height: 1.2; letter-spacing: var(--ls-card); }
  .sr-coches li { padding: 14px 0; font-size: var(--fs-16); }
  .sr-domaine__bouton { align-self: stretch; margin-top: 20px; }
}

/* ==========================================================================
   Page Réalisations — liste type « Robert » (vignette, titre, catégorie, +)
   Source : design-export/pages/Realisations.html et Realisations-Mobile.html
   ========================================================================== */
.sr-entete-page--realisations { padding-bottom: var(--sp-12); }
.sr-entete-page--realisations .sr-entete-page__contenu { gap: 22px; }
.sr-entete-page--realisations .sr-entete-page__intro { max-width: 560px; line-height: var(--lh-body); }

.sr-liste-real { background: var(--surface); padding: 72px 0 var(--sp-16); }
.sr-liste-real__contenu { display: flex; flex-direction: column; gap: 40px; }
.sr-liste-real__barre { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); }
.sr-liste-real__total { font-size: var(--fs-15); color: var(--ink-600); }

/* Pastilles de filtre : active = fond bleu nuit, texte blanc */
.sr-filtre.est-actif, .sr-filtre.est-actif:hover { background: var(--navy-900); border-color: var(--navy-900); color: var(--white); }
.sr-filtre__nb { font-size: var(--fs-13); font-weight: 500; opacity: .6; }
.sr-filtre.est-actif .sr-filtre__nb { opacity: .75; }

/* En-tête du tableau */
.sr-real-entete {
  display: grid;
  grid-template-columns: 168px minmax(0, 1fr) 180px 44px;
  gap: var(--sp-4);
  padding: 0 var(--sp-2) var(--sp-2);
  border-bottom: 1px solid var(--line-strong);
  font-size: var(--fs-14);
  font-weight: 600;
  color: var(--ink-600);
}
.sr-real-liste { list-style: none; margin: 0; padding: 0; }
.sr-real { border-bottom: 1px solid var(--line); }
.sr-real[hidden] { display: none; }

/* Ligne cliquable (élément « summary » des détails) */
.sr-real__ligne {
  display: grid;
  grid-template-columns: 168px minmax(0, 1fr) 180px 44px;
  gap: var(--sp-4);
  align-items: center;
  padding: 18px var(--sp-2);
  border-radius: var(--r-sm);
  list-style: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--dur-fast) ease;
}
.sr-real__ligne::-webkit-details-marker { display: none; }
.sr-real__ligne::marker { content: ""; }
.sr-real__vignette {
  width: 168px;
  height: 112px;
  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 12px);
  color: var(--placeholder-icon);
  transition: transform var(--dur-thumb) ease;
}
.sr-real__vignette-img { width: 100%; height: 100%; object-fit: cover; }
.sr-real__textes { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.sr-real__titre { font-size: var(--fs-22); font-weight: 600; letter-spacing: var(--ls-card); color: var(--navy-900); }
.sr-real__exemple { font-size: var(--fs-13); font-weight: 500; color: var(--gold-text); }
.sr-real__plus {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: var(--white);
  color: var(--navy-900);
}
.sr-real__plus svg { transition: transform var(--dur-card) ease; }
.sr-real__details[open] .sr-real__plus svg { transform: rotate(45deg); }
/* Retour visuel au toucher (téléphone) */
.sr-real__ligne:active { background-color: var(--white); }
@media (hover: hover) and (pointer: fine) {
  .sr-real__ligne:hover { background-color: var(--white); }
  .sr-real__ligne:hover .sr-real__vignette { transform: scale(1.03); }
}

/* Grande photo ouverte sous la ligne */
.sr-real__photo {
  position: relative;
  height: 520px;
  margin: 0 var(--sp-2) 28px 216px;
  overflow: hidden;
  border-radius: var(--r-md);
  background-color: var(--placeholder);
  background-image: repeating-linear-gradient(135deg, rgba(11,31,58,.04) 0 1px, transparent 1px 12px);
}
.sr-real__photo-img { width: 100%; height: 100%; object-fit: contain; } /* la photo entière reste visible */
/* Avec une vraie photo : fond blanc uni autour (demande de Gioele, 23.10.2026) ; les hachures restent pour les emplacements vides */
.sr-real__photo.a-une-photo { background: var(--white); }
.sr-real__legende {
  position: absolute;
  left: 20px;
  bottom: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: var(--r-btn);
  background: rgba(255,255,255,.92);
  font-size: var(--fs-13);
  color: var(--ink-600);
}
.sr-real__legende svg { width: 18px; height: 18px; color: var(--navy-900); flex-shrink: 0; }

.sr-real-vide { padding: var(--sp-3) 0; font-size: var(--fs-17); color: var(--ink-600); }
.sr-real-vide[hidden] { display: none; }
.sr-real-plus { align-self: center; padding: 0 28px; background: var(--white); font-size: var(--fs-15); }
.sr-real-plus[hidden] { display: none; }

/* Micro-interactions (ui-ux-pro-max) : ouverture de la photo, lignes qui entrent */
@media (prefers-reduced-motion: no-preference) {
  .sr-real__details[open] .sr-real__photo { animation: sr-photo-ouvre .28s var(--ease-ui) both; }
  .sr-real.est-entree { animation: sr-real-entre .35s var(--ease-ui) both; animation-delay: calc(var(--i, 0) * 40ms); }
}
@keyframes sr-photo-ouvre { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@keyframes sr-real-entre { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

@media (max-width: 767px) {
  .sr-entete-page--realisations { padding-bottom: 48px; }
  .sr-entete-page--realisations .sr-entete-page__contenu { gap: 18px; }

  .sr-liste-real { padding: var(--sp-4) 0 var(--sp-8); }
  .sr-liste-real__contenu { gap: 20px; }
  .sr-liste-real__barre { flex-direction: column; align-items: stretch; gap: 20px; }
  .sr-liste-real__total { font-size: var(--fs-14); }
  .sr-filtres {
    flex-wrap: nowrap;
    overflow-x: auto;
    margin: 0 calc(-1 * var(--gutter));
    padding: 0 var(--gutter) 4px;
    scrollbar-width: none;
  }
  .sr-filtres::-webkit-scrollbar { display: none; }

  .sr-real-liste { border-top: 1px solid var(--line-strong); }
  .sr-real__ligne {
    grid-template-columns: 84px minmax(0, 1fr) 20px;
    grid-template-areas: "vignette textes plus" "vignette cat plus";
    column-gap: 14px;
    row-gap: var(--sp-1);
    padding: var(--sp-2) 0;
    border-radius: 0;
  }
  .sr-real__vignette { grid-area: vignette; width: 84px; height: 84px; }
  .sr-real__vignette svg { width: 18px; height: 18px; }
  .sr-real__textes { grid-area: textes; align-self: end; display: block; }
  .sr-real__titre { font-size: var(--fs-16); line-height: 1.3; letter-spacing: 0; }
  .sr-real__exemple { margin-left: 4px; font-size: var(--fs-12); }
  .sr-real__cat { grid-area: cat; align-self: start; }
  .sr-real__plus { grid-area: plus; width: 20px; height: 20px; border: 0; background: none; }
  .sr-real__plus svg { width: 20px; height: 20px; }
  .sr-real__photo { height: 240px; margin: 0 0 18px; border-radius: var(--r-sm); }
  .sr-real__legende { left: 12px; bottom: 12px; gap: 8px; padding: 7px 10px; font-size: var(--fs-12); }
  .sr-real__legende svg { width: 15px; height: 15px; }
  .sr-real-plus { align-self: stretch; }
}

/* Galerie d'une réalisation (validée par Gioele le 23.10.2026)
   Vignettes visibles plutôt qu'un glissement du doigt (ui-ux-pro-max : pas de geste caché,
   cibles ≥ 44 px, 8 px d'écart). Alignée sur la colonne du titre, comme la grande photo. */
.sr-real__compteur {
  position: absolute;
  right: var(--sp-2);
  bottom: var(--sp-2);
  padding: 6px 10px;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,.92);
  font-size: var(--fs-13);
  font-weight: 600;
  color: var(--navy-900);
  font-variant-numeric: tabular-nums;
}
.sr-real__details[open] .sr-real__photo:has(+ .sr-real__galerie) { margin-bottom: 12px; }
.sr-real__galerie {
  display: flex;
  gap: var(--sp-1);
  margin: 0 var(--sp-2) 28px 216px;
  padding: 4px;
  overflow-x: auto;
  scrollbar-width: thin;
}
.sr-real__mini {
  flex-shrink: 0;
  width: 88px;
  height: 64px;
  padding: 0;
  border: 0;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--placeholder);
  cursor: pointer;
  opacity: .65;
  -webkit-tap-highlight-color: transparent;
  transition: opacity var(--dur-fast) ease, transform var(--dur-fast) ease;
}
.sr-real__mini img { width: 100%; height: 100%; object-fit: cover; }
.sr-real__mini[aria-pressed="true"] { opacity: 1; outline: 2px solid var(--gold-600); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .sr-real__mini:hover { opacity: 1; } }
@media (prefers-reduced-motion: no-preference) {
  .sr-real__mini:active { transform: scale(.96); transition-duration: var(--dur-press); }
  .sr-real__photo-img.est-change { animation: sr-photo-change .2s ease-out both; }
}
@keyframes sr-photo-change { from { opacity: .35; filter: blur(2px); } to { opacity: 1; filter: none; } } /* le flou adoucit le passage d'une photo à l'autre */

@media (max-width: 767px) {
  .sr-real__compteur { right: 12px; bottom: 12px; font-size: var(--fs-12); }
  .sr-real__details[open] .sr-real__photo:has(+ .sr-real__galerie) { margin-bottom: 10px; }
  .sr-real__galerie { margin: 0 0 18px; }
  .sr-real__mini { width: 64px; height: 48px; }
}

/* ==========================================================================
   Page Contrats de maintenance
   Source : design-export/pages/Contrats.html et Contrats-Mobile.html
   ========================================================================== */

/* En-tête avec une photo d'immeuble en fond (demande de Gioele, 23.10.2026, remplace le sceau
   « Garantie ») : texte à gauche sur un dégradé bleu nuit, comme le Hero de l'accueil, l'immeuble à droite.
   Le dégradé reste opaque (≥ 90 %) sous les petits textes, pour un contraste suffisant sur n'importe quelle photo. */
.sr-entete-page--photo {
  position: relative;
  overflow: hidden;
  min-height: 560px;
  display: flex;
  align-items: center;
}
.sr-entete-page--photo .sr-entete-page__contenu { position: relative; }
.sr-entete-page__photo { position: absolute; inset: 0; }
.sr-entete-page__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}
.sr-entete-page__voile {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    rgba(11,31,58,.94) 0%,
    rgba(11,31,58,.9) max(calc(50% - 60px), 600px),
    rgba(11,31,58,.55) max(calc(50% + 140px), 800px),
    rgba(11,31,58,0) max(calc(50% + 400px), 1060px));
}
.sr-entete-page--photo .sr-entete-page__titre { max-width: 640px; }
.sr-entete-page--photo .sr-entete-page__intro { color: var(--on-dark-200); }
.sr-entete-page--contrats .sr-entete-page__intro { max-width: 520px; line-height: var(--lh-body); }
.sr-entete-page--contrats .sr-entete-page__secondaire { height: var(--btn); }

/* Les deux contrats (clair) */
.sr-contrats { background: var(--surface); padding: var(--sp-16) 0; }
.sr-contrats__contenu { display: flex; flex-direction: column; gap: 56px; }
.sr-contrats__grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); align-items: stretch; }
.sr-contrat__cadre { display: flex; }
.sr-contrat {
  flex: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding: 44px 40px;
  border-radius: var(--r-lg);
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-soft);
  color: var(--navy-900);
}
.sr-contrat--recommande {
  background: var(--navy-900);
  border: 1.5px solid var(--gold);
  box-shadow: var(--shadow-strong);
  color: var(--white);
}
.sr-contrat__badge {
  position: absolute;
  top: 28px;
  right: 28px;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  background: var(--gold);
  color: var(--navy-900);
  font-size: var(--fs-13);
  font-weight: 700;
  line-height: normal;
}
.sr-contrat__tete { display: flex; flex-direction: column; gap: var(--sp-1); }
.sr-contrat--recommande .sr-contrat__tete { padding-right: 110px; }
/* Hauteur de ligne « normal » comme dans l'export (aucune valeur imposée) */
.sr-contrat__nom { font-size: var(--fs-26); font-weight: 700; line-height: normal; letter-spacing: var(--ls-h3); color: inherit; }
.sr-contrat__phrase { font-size: var(--fs-16); line-height: normal; color: var(--ink-600); }
.sr-contrat__prix {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--line);
}
.sr-contrat__des { font-size: var(--fs-18); font-weight: 600; line-height: normal; color: var(--ink-600); } /* « dès » : prix de départ */
.sr-contrat--recommande .sr-contrat__des { color: var(--on-dark-300); }
.sr-contrat__montant { font-size: var(--fs-56); font-weight: 800; letter-spacing: var(--ls-price); line-height: 1; }
.sr-contrat__unite { font-size: var(--fs-15); line-height: normal; color: var(--ink-600); }
.sr-contrat__liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; flex: 1; }
.sr-contrat__liste li { display: flex; gap: 12px; font-size: var(--fs-16); line-height: 1.55; }
.sr-contrat__liste .sr-icone { flex-shrink: 0; margin-top: 2px; color: var(--gold-600); }
.sr-contrat__note { font-size: var(--fs-13); line-height: 1.5; color: var(--on-dark-300); }
.sr-contrat__bouton { width: 100%; }
.sr-contrat--recommande .sr-contrat__phrase,
.sr-contrat--recommande .sr-contrat__unite { color: var(--on-dark-300); }
.sr-contrat--recommande .sr-contrat__prix { border-bottom-color: var(--line-dark); }
.sr-contrat--recommande .sr-contrat__liste .sr-icone { color: var(--gold); }

/* Survol (export) : la carte se soulève de 4 px, seulement avec une souris. */
.sr-contrat { transition: transform var(--dur-card) ease, box-shadow var(--dur-card) ease; }
@media (hover: hover) and (pointer: fine) { .sr-contrat:hover { transform: translateY(var(--lift-card)); } }

/* Dans les deux contrats (sombre) */
.sr-gains { background: var(--navy-900); padding: var(--sp-16) 0; }
.sr-gains__contenu { display: flex; flex-direction: column; gap: 56px; }
.sr-gains .sr-section-titre { max-width: 640px; color: var(--white); }
.sr-gains__grille { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.sr-gain {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-4) 28px;
  border-radius: var(--r-md);
  background: var(--navy-800);
  border: 1px solid rgba(255,255,255,.1);
}
.sr-gain .sr-icone { flex-shrink: 0; color: var(--gold); }
.sr-gain__textes { display: flex; flex-direction: column; gap: var(--sp-1); }
.sr-gain__titre { font-size: var(--fs-20); font-weight: 700; line-height: normal; color: var(--white); }
.sr-gain__texte { font-size: var(--fs-15); line-height: var(--lh-body); color: var(--on-dark-300); }

/* Comment ça se passe (3 étapes) */
.sr-etapes { background: var(--white); padding: var(--sp-16) 0; }
.sr-etapes__contenu { display: flex; flex-direction: column; gap: 56px; } /* étapes : base.css */

/* Tablette et téléphone : la photo en haut (340 px), le texte en dessous sur le bleu nuit ;
   la photo se fond dans le bleu (31.10.2026, Gioele : le sujet n'était plus caché derrière le titre).
   Le cadrage se règle dans « Photos du site ». Avantages sur 2 colonnes. */
@media (max-width: 1023px) {
  .sr-entete-page--photo { display: block; min-height: 0; padding-top: 300px; background-color: var(--navy-900); }
  .sr-entete-page--photo .sr-entete-page__photo { bottom: auto; height: 340px; }
  .sr-entete-page--photo .sr-entete-page__img { object-position: var(--sr-cadrage-mobile, 50% 50%); }
  .sr-entete-page--photo .sr-entete-page__voile {
    background: linear-gradient(180deg,
      rgba(11,31,58,0) 0,
      rgba(11,31,58,0) 190px,
      rgba(11,31,58,.75) 290px,
      rgba(11,31,58,1) 340px);
  }
  .sr-gains__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sr-contrat { padding: 36px 28px; }
}

/* Téléphone */
@media (max-width: 767px) {
  .sr-entete-page--contrats .sr-entete-page__contenu { gap: 22px; }
  .sr-entete-page--contrats .sr-entete-page__titre { line-height: var(--lh-heading); }
  .sr-entete-page--contrats .sr-entete-page__boutons { margin-top: 0; }

  .sr-contrats { padding: var(--sp-8) 0; }
  .sr-contrats__contenu { gap: 28px; }
  .sr-contrats .sr-section-tete { gap: 20px; }
  .sr-contrats__grille { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .sr-contrat { gap: 20px; padding: 28px 22px; }
  .sr-contrat__badge { top: 20px; right: 20px; }
  .sr-contrat__nom { font-size: var(--fs-22); }
  .sr-contrat__prix { padding-bottom: 20px; }
  .sr-contrat__montant { font-size: var(--fs-44); }
  .sr-contrat__liste li { font-size: var(--fs-15); }

  .sr-gains { padding: var(--sp-8) 0; }
  .sr-gains__contenu { gap: var(--sp-3); }
  .sr-gains__grille { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .sr-gain { flex-direction: row; gap: var(--sp-2); padding: 20px; }
  .sr-gain .sr-icone { width: 30px; height: 30px; }
  .sr-gain__titre { font-size: var(--fs-18); }

  .sr-etapes { padding: var(--sp-8) 0 40px; }
  .sr-etapes__contenu { gap: var(--sp-3); }
}

/* ==========================================================================
   Page L'entreprise
   Source : design-export/pages/Entreprise.html et Entreprise-Mobile.html
   ========================================================================== */

/* Paragraphes de texte courant (histoire, savoir-faire, développement) */
.sr-prose p { font-size: var(--fs-18); line-height: 1.7; color: var(--ink-600); }


/* Notre histoire : photo + texte, puis la frise Italie / Suisse / 2024 */
.sr-histoire { background: var(--white); padding: var(--sp-16) 0; }
.sr-histoire__contenu { display: flex; flex-direction: column; gap: 80px; }
.sr-histoire__grille { display: grid; grid-template-columns: 500px minmax(0, 1fr); gap: var(--sp-12); align-items: center; }
.sr-histoire__photo {
  position: relative;
  height: 600px;
  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__img { width: 100%; height: 100%; object-fit: cover; }
.sr-histoire__textes { display: flex; flex-direction: column; gap: var(--sp-3); max-width: 600px; }

.sr-frise { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); }
.sr-frise__etape { display: flex; flex-direction: column; gap: 12px; }
.sr-frise__repere { display: flex; align-items: center; gap: 14px; }
.sr-frise__point {
  box-sizing: content-box; /* comme l'export : la bordure s'ajoute à la taille (16 + 2 × 2 px) */
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--white);
  border: 2px solid var(--gold);
}
.sr-frise__etape--fin .sr-frise__point { background: var(--navy-900); } /* 2024 : aujourd'hui */
.sr-frise__trait { flex: 1; height: 1.5px; background: var(--line-strong); }
.sr-frise__textes { display: flex; flex-direction: column; gap: 12px; }
.sr-frise__titre { font-size: var(--fs-20); font-weight: 700; line-height: normal; color: var(--navy-900); }
.sr-frise__texte { max-width: 260px; font-size: var(--fs-15); line-height: var(--lh-body); color: var(--ink-600); }

/* Frise qui se remplit (Gioele, 02.11.2026) : même effet que les étapes (base.css). Le trait vers
   l'étape suivante se remplit en or quand l'étape arrive à l'écran, redevient gris quand elle en sort,
   et se remplit de nouveau au retour (classe « est-rempli », assets/js/main.js). */
.sr-frise__trait { position: relative; }
.sr-js .sr-frise__trait::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left center;
}
.sr-js .sr-frise__etape.est-rempli .sr-frise__trait::after { transform: none; }
@media (prefers-reduced-motion: no-preference) {
  .sr-js .sr-frise__etape.est-rempli .sr-frise__trait::after { transition: transform .6s var(--ease-ui) calc(.3s + var(--reveal-i, 0) * .45s); }
}
@media (max-width: 767px) {
  .sr-js .sr-frise__trait::after { transform: scaleY(0); transform-origin: center top; }
  .sr-js .sr-frise__etape.est-rempli .sr-frise__trait::after { transform: none; }
}
@media (max-width: 767px) and (prefers-reduced-motion: no-preference) {
  .sr-js .sr-frise__etape.est-rempli .sr-frise__trait::after { transition-delay: .2s; }
}

/* Blocs « titre à gauche, texte à droite » (savoir-faire, développement) */
.sr-bloc-texte { background: var(--white); padding: var(--sp-16) 0; }
.sr-bloc-texte--surface { background: var(--surface); }
.sr-bloc-texte__grille { display: grid; grid-template-columns: 420px minmax(0, 1fr); gap: var(--sp-12); align-items: start; }
.sr-bloc-texte__corps { display: flex; flex-direction: column; gap: 22px; max-width: 640px; }
.sr-prose .sr-signature {
  margin-top: var(--sp-3);
  padding-top: var(--sp-4);
  border-top: 2px solid var(--gold);
  font-size: var(--fs-30);
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--navy-900);
}

/* Proche de ses clients (sombre, 3 engagements) */
.sr-proche { background: var(--navy-900); padding: var(--sp-16) 0; }
.sr-proche__contenu { display: flex; flex-direction: column; gap: 56px; }
.sr-proche__tete { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 80px; align-items: end; }
.sr-proche .sr-section-titre { color: var(--white); }
.sr-proche__intro { font-size: var(--fs-17); line-height: 1.7; color: var(--on-dark-300); }
.sr-engagements { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.sr-engagement {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-4) 28px;
  border-radius: var(--r-md);
  background: var(--navy-800);
  border: 1px solid rgba(255,255,255,.1);
}
.sr-engagement .sr-icone { flex-shrink: 0; color: var(--gold); }
.sr-engagement__textes { display: flex; flex-direction: column; gap: var(--sp-2); }
.sr-engagement__titre { font-size: var(--fs-20); font-weight: 700; line-height: normal; color: var(--white); }
.sr-engagement__texte { font-size: var(--fs-15); line-height: var(--lh-body); color: var(--on-dark-300); }
.sr-proche__note { padding-top: var(--sp-4); border-top: 1px solid var(--line-dark); font-size: var(--fs-20); line-height: 1.5; color: var(--white); }

/* Écrans moyens : les blocs à deux colonnes passent l'un sous l'autre */
@media (max-width: 1023px) {
  .sr-histoire__grille { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--sp-6); }
  .sr-histoire__photo { height: 480px; }
  .sr-bloc-texte__grille,
  .sr-proche__tete { grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); }
  .sr-engagements { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .sr-engagement { flex-direction: row; }
}

/* Téléphone */
@media (max-width: 767px) {
  .sr-prose p { font-size: var(--fs-16); }


  .sr-histoire { padding: 56px 0; }
  .sr-histoire__contenu { gap: 36px; }
  .sr-histoire__grille { display: flex; flex-direction: column; align-items: stretch; gap: 28px; }
  .sr-histoire__photo { height: 280px; }
  .sr-histoire__textes { gap: 20px; }

  .sr-frise { display: flex; flex-direction: column; gap: 0; }
  .sr-frise__etape { flex-direction: row; gap: var(--sp-2); }
  .sr-frise__repere { flex-direction: column; gap: 0; }
  .sr-frise__point { width: 14px; height: 14px; margin-top: 4px; }
  .sr-frise__trait { width: 1.5px; height: auto; min-height: 28px; }
  .sr-frise__textes { gap: 4px; padding-bottom: 22px; }
  .sr-frise__titre { font-size: var(--fs-18); }
  .sr-frise__texte { line-height: 1.55; }

  .sr-bloc-texte { padding: 56px 0; }
  .sr-bloc-texte__grille { display: flex; flex-direction: column; gap: 18px; }
  .sr-bloc-texte__corps { gap: 18px; }
  .sr-prose .sr-signature { margin-top: 20px; padding-top: var(--sp-3); font-size: var(--fs-22); line-height: 1.35; letter-spacing: var(--ls-card); }

  .sr-proche { padding: 56px 0; }
  .sr-proche__contenu { gap: 26px; }
  .sr-proche__tete { display: flex; flex-direction: column; gap: 18px; }
  .sr-proche__intro { font-size: var(--fs-16); }
  .sr-engagements { display: flex; flex-direction: column; gap: 12px; }
  .sr-engagement { flex-direction: row; gap: var(--sp-2); padding: 20px; }
  .sr-engagement .sr-icone { width: 28px; height: 28px; }
  .sr-engagement__textes { gap: 6px; }
  .sr-engagement__titre { font-size: var(--fs-18); }
  .sr-engagement__texte { line-height: 1.55; }
  .sr-proche__note { padding-top: 20px; font-size: var(--fs-16); line-height: var(--lh-body); }
}

/* ==========================================================================
   Pages légales (mentions légales, confidentialité) — pas de design dans
   l'export : en-tête sombre des pages intérieures, puis le texte sur une colonne.
   ========================================================================== */
.sr-legal { background: var(--white); padding: var(--sp-12) 0 var(--sp-16); }
.sr-legal__texte { display: flex; flex-direction: column; gap: var(--sp-2); max-width: 760px; }
.sr-legal__texte h2 {
  margin-top: var(--sp-4);
  font-size: var(--fs-26);
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: var(--ls-h3);
  color: var(--navy-900);
}
.sr-legal__texte h2:first-child { margin-top: 0; }
.sr-legal__texte ul { margin: 0; padding-left: 1.2em; font-size: var(--fs-18); line-height: 1.7; color: var(--ink-600); }
.sr-legal__texte a { color: var(--navy-900); text-decoration: underline; text-underline-offset: 3px; }
.sr-legal__texte a:hover { color: var(--gold-text); }
.sr-prose .sr-legal__attente { font-size: var(--fs-22); font-weight: 700; color: var(--navy-900); }

@media (max-width: 767px) {
  .sr-legal { padding: var(--sp-6) 0 var(--sp-8); }
  .sr-legal__texte h2 { margin-top: var(--sp-3); font-size: var(--fs-22); }
  .sr-legal__texte ul { font-size: var(--fs-16); }
  .sr-prose .sr-legal__attente { font-size: var(--fs-20); }
}

/* ==========================================================================
   Page introuvable (404) — pas de design dans l'export
   ========================================================================== */
.sr-perdu { background: var(--white); padding: var(--sp-8) 0 var(--sp-12); }
.sr-perdu__contenu { display: flex; flex-direction: column; gap: var(--sp-3); }
.sr-perdu__titre { font-size: var(--fs-22); font-weight: 700; line-height: normal; color: var(--navy-900); }
.sr-perdu__liens { list-style: none; margin: 0; padding: 0; }

@media (max-width: 767px) {
  .sr-perdu { padding: 40px 0 56px; }
  .sr-perdu__contenu { gap: 20px; }
  .sr-perdu__titre { font-size: var(--fs-20); }
}

/* Très petits téléphones (320 px) : un mot trop long dans un grand titre est coupé avec un trait
   d'union (« confiden-tialité ») au lieu de dépasser de l'écran (02.11.2026). */
.sr-entete-page__titre { overflow-wrap: break-word; }
@media (max-width: 400px) { .sr-entete-page__titre { -webkit-hyphens: auto; hyphens: auto; } }