/* ==========================================================================
   Serrures Riviera — styles communs (base.css)
   Toutes les valeurs viennent de tokens.css (voir DESIGN.md). Jamais de valeur
   brute ici : pour changer une couleur ou une taille, on change tokens.css.
   ========================================================================== */

/* Police auto-hébergée (Schibsted Grotesk, licence OFL : assets/fonts/OFL.txt) */
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(../fonts/schibsted-grotesk-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(../fonts/schibsted-grotesk-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Bases ------------------------------------------------------------------ */
:root { --gutter: 20px; }
@media (min-width: 768px) { :root { --gutter: 32px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-16);
  line-height: var(--lh-body);
  color: var(--navy-900);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, p, figure, ul, ol { margin: 0; }
img, svg { display: block; }
img { max-width: 100%; height: auto; }
a { color: var(--navy-900); }
@media (hover: hover) and (pointer: fine) { a:hover { color: var(--gold-text); } }
button, input, select, textarea { font: inherit; }

/* Largeur du contenu : 1200 px, marges latérales sur les petits écrans. */
.container {
  width: 100%;
  max-width: calc(var(--content) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Ordinateur / mobile : certains éléments n'existent que sur l'un des deux dans le design. */
@media (max-width: 767px) { .sr-ordi { display: none !important; } }
@media (min-width: 768px) { .sr-mobile { display: none !important; } }

/* Accessibilité -------------------------------------------------------- */
.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.skip-link:focus {
  clip: auto;
  width: auto; height: auto;
  margin: 0;
  top: var(--sp-1); left: var(--sp-1);
  z-index: 1000;
  padding: 12px 16px;
  border-radius: var(--r-btn);
  background: var(--navy-900);
  color: var(--white);
  font-weight: 600;
  text-decoration: none;
}

/* Titres de section (H2) : bleu nuit sur fond clair, blanc sur fond sombre ------ */
.sr-section-tete { display: flex; flex-direction: column; gap: var(--sp-2); max-width: 680px; }
.sr-section-titre {
  font-size: var(--fs-46);
  line-height: 1.08;
  font-weight: 700;
  letter-spacing: var(--ls-h2);
  color: var(--navy-900);
}
.sr-section-intro { font-size: var(--fs-17); line-height: 1.65; color: var(--ink-600); }
@media (max-width: 767px) {
  .sr-section-titre { font-size: var(--fs-30); line-height: var(--lh-heading); }
  .sr-section-intro { font-size: var(--fs-16); line-height: var(--lh-body); }
}

/* Titre de section à gauche, texte à droite, alignés en bas (accueil : Process, Services) */
.sr-section-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-8); align-items: end; }
@media (max-width: 1023px) { .sr-section-duo { grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); } }
@media (max-width: 767px) { .sr-section-duo { gap: 28px; } }

/* Étapes numérotées (accueil : « Ce qui se passe quand vous appelez » ; Contrats : « Comment ça se passe ») */
.sr-etapes__liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); }
.sr-etapes__liste--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sr-etape { display: flex; flex-direction: column; gap: 14px; }
.sr-etape__repere { display: flex; align-items: center; gap: var(--sp-2); }
.sr-etape__numero {
  box-sizing: content-box; /* comme l'export : la bordure s'ajoute à la taille (48 + 2 × 1,5 px) */
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1.5px solid var(--gold);
  background: var(--white);
  font-size: var(--fs-17);
  font-weight: 700;
  color: var(--navy-900);
}
.sr-etape--fin .sr-etape__numero { background: var(--navy-900); color: var(--white); } /* dernière étape de l'accueil */
.sr-etape__trait { flex: 1; height: 1px; background: var(--line-strong); }
.sr-etape__textes { display: flex; flex-direction: column; gap: 14px; }
.sr-etape__titre { font-size: var(--fs-20); font-weight: 700; line-height: normal; color: var(--navy-900); }
.sr-etape__texte { font-size: var(--fs-15); line-height: var(--lh-body); color: var(--ink-600); }
@media (max-width: 1023px) { .sr-etapes__liste--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; } }
@media (max-width: 767px) {
  .sr-etapes__liste { display: flex; flex-direction: column; gap: 0; }
  .sr-etape { flex-direction: row; gap: var(--sp-2); }
  .sr-etape__repere { align-self: flex-start; }
  .sr-etape__numero { width: 40px; height: 40px; font-size: var(--fs-15); }
  .sr-etape__trait { display: none; }
  .sr-etape__textes { gap: 6px; padding: var(--sp-1) 0 20px; }
  .sr-etape__titre { font-size: var(--fs-18); }
  .sr-etape__texte { line-height: 1.55; }
  /* Accueil : un trait vertical relie les étapes */
  .sr-etapes__liste--relie .sr-etape__repere { align-self: stretch; flex-direction: column; gap: 0; }
  .sr-etapes__liste--relie .sr-etape__trait { display: block; flex: 1; width: 1px; height: auto; min-height: var(--sp-3); }
  .sr-etapes__liste--relie .sr-etape__textes { padding-bottom: 28px; }
}

/* Étapes qui se remplissent (Gioele, 02.11.2026) : quand une étape arrive à l'écran, le trait gris
   qui mène à la suivante se remplit en or (l'un après l'autre sur ordinateur, vertical sur téléphone).
   À chaque passage : quand l'étape sort complètement de l'écran, le trait redevient gris sans
   animation, et il se remplit de nouveau au retour (classe « est-rempli », assets/js/main.js).
   Sans JavaScript, le trait reste gris ; avec « réduire les animations », il devient or d'un coup. */
.sr-etape__trait { position: relative; }
.sr-js .sr-etape__trait::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left center;
}
.sr-js .sr-etape.est-rempli .sr-etape__trait::after { transform: none; }
@media (prefers-reduced-motion: no-preference) {
  .sr-js .sr-etape.est-rempli .sr-etape__trait::after { transition: transform .6s var(--ease-ui) calc(.3s + var(--reveal-i, 0) * .45s); }
}
@media (max-width: 767px) {
  .sr-js .sr-etapes__liste--relie .sr-etape__trait::after { transform: scaleY(0); transform-origin: center top; }
  .sr-js .sr-etapes__liste--relie .sr-etape.est-rempli .sr-etape__trait::after { transform: none; }
}
@media (max-width: 767px) and (prefers-reduced-motion: no-preference) {
  /* Sur téléphone, chaque étape arrive seule en défilant : pas besoin d'attendre les précédentes. */
  .sr-js .sr-etape.est-rempli .sr-etape__trait::after { transition-delay: .2s; }
}

/* Étiquette de catégorie (réalisations : page Réalisations et accueil) */
.sr-etiquette {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis; /* un nom de catégorie très long reste sur une ligne (« … ») */
  white-space: nowrap;
  vertical-align: middle;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-strong);
  background: var(--white);
  font-size: var(--fs-13);
  font-weight: 500;
  line-height: normal;
  color: var(--ink-600);
}
@media (max-width: 767px) { .sr-etiquette { padding: 3px 9px; font-size: var(--fs-12); font-weight: 400; } }

/* Emplacement photo vide : légende avec le nom du fichier attendu */
.sr-legende-photo {
  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);
  color: var(--navy-900);
}
.sr-legende-photo svg { flex-shrink: 0; }
.sr-legende-photo__textes { display: flex; flex-direction: column; line-height: 1.3; }
.sr-legende-photo__titre { font-size: var(--fs-13); font-weight: 700; }
.sr-legende-photo__fichier { font-size: var(--fs-12); color: var(--ink-600); }
@media (max-width: 767px) {
  .sr-legende-photo { left: 12px; bottom: 12px; gap: var(--sp-1); padding: 8px 12px; }
  .sr-legende-photo__titre { font-size: var(--fs-12); }
}

/* Boutons (hauteurs : 44 / 48 / 52 / 60 / 64) ------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  height: var(--btn);
  padding: 0 24px;
  border: 1px solid transparent;
  border-radius: var(--r-btn);
  font-size: var(--fs-16);
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--dur-fast) ease, border-color var(--dur-fast) ease, color var(--dur-fast) ease, transform var(--dur-fast) var(--ease-ui);
}
/* Soulèvement au survol : seulement avec une souris (sur téléphone, l'effet resterait « bloqué » après le toucher). */
@media (hover: hover) and (pointer: fine) { .btn:hover { transform: translateY(var(--lift-btn)); } }
.btn svg { flex-shrink: 0; }
a, button { touch-action: manipulation; }

/* Effet « pressé » : retour immédiat au toucher ou au clic (remplace le carré gris des téléphones). */
.btn { -webkit-tap-highlight-color: transparent; }
@media (prefers-reduced-motion: no-preference) {
  .btn:active { transform: scale(.98); transition-duration: var(--dur-press); }
  html { scroll-behavior: smooth; } /* défilement doux vers « Écrivez-nous », « Contact »… */
}

.btn--sm { height: var(--btn-sm); }
.btn--md { height: var(--btn-md); padding: 0 22px; font-size: var(--fs-15); }
.btn--lg { height: var(--btn-lg); padding: 0 28px; font-size: var(--fs-17); }
.btn--xl { height: var(--btn-xl); padding: 0 32px 0 26px; font-size: var(--fs-26); font-weight: 700; gap: 14px; }

/* Principal : bleu nuit sur fond clair */
.btn--primary { background: var(--navy-900); border-color: var(--navy-900); color: var(--white); }
.btn--primary:hover { color: var(--white); }

/* Principal sur fond sombre : blanc, texte bleu nuit */
.btn--light { background: var(--white); border-color: var(--white); color: var(--navy-900); }
.btn--light:hover { color: var(--navy-900); }

/* Secondaire : contour */
.btn--secondary { background: transparent; border-color: var(--line-strong); color: var(--navy-900); }
.btn--secondary:hover { color: var(--navy-900); }
@media (hover: hover) and (pointer: fine) { .btn--secondary:hover { border-color: var(--navy-900); } }

/* Secondaire sur fond sombre */
.btn--secondary-dark { background: transparent; border-color: rgba(255,255,255,.25); color: var(--white); }
.btn--secondary-dark:hover { color: var(--white); }
@media (hover: hover) and (pointer: fine) { .btn--secondary-dark:hover { border-color: rgba(255,255,255,.5); } }

/* Appel d'urgence : rouge, pulsation douce. Le rouge est réservé aux appels. */
.btn--call {
  background: var(--red);
  border-color: var(--red);
  color: var(--white);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  animation: sr-pulse 2.6s var(--ease-pulse) infinite;
}
.btn--call:hover { color: var(--white); }
@media (hover: hover) and (pointer: fine) { .btn--call:hover { background: var(--red-hover); border-color: var(--red-hover); } }
.btn--call:active { background: var(--red-hover); border-color: var(--red-hover); } /* au toucher : le rouge fonce pendant l'appui */

@keyframes sr-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(215,38,61,.42); }
  70%  { box-shadow: 0 0 0 var(--pulse-spread) rgba(215,38,61,0); }
  100% { box-shadow: 0 0 0 0 rgba(215,38,61,0); }
}

/* Apparition douce au défilement (décision du 22.10.2026 : 30 px, 0,5 s, décélération).
   Le contenu n'est caché que si JavaScript fonctionne ET si le visiteur n'a pas
   demandé de réduire les animations. Jamais sur les numéros ni les boutons d'appel. */
@media (prefers-reduced-motion: no-preference) {
  .sr-js [data-reveal] {
    opacity: 0;
    transform: translateY(var(--reveal-distance));
    transition: opacity var(--dur-reveal) var(--ease-ui), transform var(--dur-reveal) var(--ease-ui);
    transition-delay: calc(var(--reveal-i, 0) * var(--reveal-step));
  }
  .sr-js [data-reveal].is-visible { opacity: 1; transform: none; }
}

/* Cartes qui se soulèvent au survol (demande de Gioele, 23.10.2026) : avantages des contrats,
   engagements de L'entreprise, contrats de l'accueil. Même mouvement que les cartes Services et
   Contrats (4 px), seulement avec une souris et si le visiteur n'a pas réduit les animations.
   « translate » (et non « transform ») : transform sert déjà à l'apparition au défilement,
   les deux mouvements s'additionnent sans se gêner. */
.sr-gain, .sr-engagement, .sr-regie-contrat {
  transition: translate var(--dur-card) var(--ease-ui), border-color var(--dur-card) ease, background-color var(--dur-card) ease, box-shadow var(--dur-card) ease;
}
@media (prefers-reduced-motion: no-preference) {
  /* Avec l'apparition au défilement : son délai ne s'applique qu'à l'apparition, pas au survol. */
  .sr-js :is(.sr-gain, .sr-engagement, .sr-regie-contrat)[data-reveal] {
    transition:
      opacity var(--dur-reveal) var(--ease-ui) calc(var(--reveal-i, 0) * var(--reveal-step)),
      transform var(--dur-reveal) var(--ease-ui) calc(var(--reveal-i, 0) * var(--reveal-step)),
      translate var(--dur-card) var(--ease-ui),
      border-color var(--dur-card) ease,
      background-color var(--dur-card) ease,
      box-shadow var(--dur-card) ease;
  }
}
@media (hover: hover) and (pointer: fine) {
  /* Cartes sombres : comme les cartes Services de l'accueil (bordure or, fond un peu plus clair). */
  .sr-gain:hover, .sr-engagement:hover { border-color: rgba(221,174,42,.45); background-color: var(--navy-700); }
  /* Cartes claires : une ombre douce sous la carte soulevée. */
  .sr-regie-contrat:hover { box-shadow: var(--shadow-soft); }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .sr-gain:hover, .sr-engagement:hover, .sr-regie-contrat:hover { translate: 0 var(--lift-card); }
}

/* Solidité face aux contenus saisis dans WordPress (vérification du 02.11.2026) :
   un mot très long, une adresse e-mail très longue ou un prix à 5 chiffres passent à la ligne
   au lieu de déborder de l'écran. Rien ne change avec les contenus actuels. Dans base.css : chargé sur toutes les pages. */
a[href^="mailto:"] { overflow-wrap: anywhere; }
.sr-real__titre, .sr-contrat__nom, .sr-regie-contrat__nom, .sr-etiquette { overflow-wrap: anywhere; }
.sr-contrat, .sr-contrat__tete, .sr-regie-contrat__textes { min-width: 0; }
.sr-contrat__montant, .sr-regie-contrat__montant { overflow-wrap: anywhere; }