/* ══════════════════════════════════════════════════════════
   site-base.css — styles communs à toutes les pages (hors menu/footer)
   Couleurs, titres, sections, cartes, boutons, apparition au scroll.
   Référence visuelle : la page d'accueil (index.html).
   Modifier ce fichier met à jour toutes les pages qui l'utilisent.

   ÉCHELLE TYPOGRAPHIQUE (police unique : Plus Jakarta Sans) — toute taille du site doit en faire partie :
     Titre de page (h1)        clamp(2.5rem, 5vw, 4.5rem)    · 800 · -.04em
     Titre de section (h2)     clamp(2rem, 3.2vw, 2.75rem)   · 700 · -.035em
     Accroche (grand texte)    clamp(1.75rem, 2.8vw, 2.75rem)· 400 · -.035em
     Phrase-titre (accueil)    clamp(2.1rem, 3.4vw, 3.25rem)  · 500 · -.035em
     Sous-titre / carte (h3)   1.35rem                        · 700 · -.02em
     Texte d'introduction      1.15rem
     Texte courant             1rem
     Petit texte               .875rem
     Étiquette (majuscules)    .75rem
     Boutons                   grand 1rem / normal .9rem      · 700 (voir plus bas)
   ══════════════════════════════════════════════════════════ */

:root {
  --c-ink: #1d1d1f;          /* texte principal */
  --c-muted: #5f5f64;        /* texte secondaire */
  --c-blue: #178bff;         /* bleu du site (boutons principaux) */
  --c-green: #27ba7d;
  --c-red: #e00;             /* urgence */
  --c-gray: #f1f1f4;         /* gris standard (fonds de section, cartes) */
  --c-gray-soft: #f7f7f8;    /* gris clair (alternance) */
  --c-line: #e5e5ea;
  --radius: 20px;
  --ease: cubic-bezier(.16,1,.3,1);
  --gutter: max(1.25rem, calc((100% - 1320px) / 2)); /* marges latérales : contenu centré, 1320px max */
}

/* ── Sections ── */
.sb-section { padding: 100px var(--gutter); background: #fff; }
.sb-section.is-gray { background: var(--c-gray); }
.sb-section.is-soft { background: var(--c-gray-soft); }
.sb-head { max-width: 760px; margin: 0 auto 56px; text-align: center; }

/* Petit titre souligné (identique à l'accueil) */
.section-eyebrow { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .7rem; font-size: .95rem; font-weight: 700; letter-spacing: .25em; color: rgba(0,0,0,.4); margin-bottom: 32px; }
.section-eyebrow::after { content: ""; display: block; width: 64px; height: 1px; background: rgba(0,0,0,.2); }

/* Grand titre de section (même taille que « Ce que disent nos clients. » sur l'accueil) */
.sb-title { font-size: clamp(2rem, 3.2vw, 2.75rem); font-weight: 700; letter-spacing: -.035em; line-height: 1.1; color: var(--c-ink); margin: 0 0 1.1rem; }
.sb-lead { font-size: 1.15rem; line-height: 1.65; color: rgba(0,0,0,.6); margin: 0; }

/* ── Grilles ── */
.sb-grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: 1.5rem; }
.sb-grid-4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)); gap: 1.5rem; }

/* ── Carte lien (ex. Appartement / Maison / Chalet) ── */
.sb-card { display: flex; flex-direction: column; padding: 2.5rem; border-radius: var(--radius); background: var(--c-gray); color: var(--c-ink); text-decoration: none; transition: transform .45s var(--ease), box-shadow .45s var(--ease), background-color .3s ease; }
.sb-section.is-gray .sb-card { background: #fff; }
a.sb-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(20,30,60,.08); }
.sb-card-icon { width: 52px; height: 52px; border-radius: 14px; background: var(--c-ink); color: #fff; display: flex; align-items: center; justify-content: center; margin-bottom: 1.75rem; }
.sb-card-title { font-size: 1.35rem; font-weight: 700; letter-spacing: -.02em; margin: 0 0 .7rem; }
.sb-card-text { font-size: 1rem; line-height: 1.6; color: var(--c-muted); margin: 0 0 1.5rem; }
.sb-card-link { margin-top: auto; display: inline-flex; align-items: center; gap: .5rem; font-size: .95rem; font-weight: 600; color: var(--c-ink); }
.sb-card-link svg { transition: transform .25s ease; }
a.sb-card:hover .sb-card-link svg { transform: translateX(4px); }

/* ── Étapes numérotées (01 / 02 / 03) ── */
.sb-step { padding: 2.5rem; border-radius: var(--radius); background: #fff; }
.sb-section:not(.is-gray):not(.is-soft) .sb-step { background: var(--c-gray); }
.sb-step-num { display: block; font-size: 1rem; font-weight: 700; color: rgba(0,0,0,.35); margin-bottom: 1.25rem; }
.sb-step-title { font-size: 1.35rem; font-weight: 700; letter-spacing: -.02em; margin: 0 0 .7rem; color: var(--c-ink); }
.sb-step-text { font-size: 1rem; line-height: 1.6; color: var(--c-muted); margin: 0; }

/* ── Arguments « Pourquoi nous » : icône + titre + texte, sans cadre ── */
.sb-point { text-align: center; padding: 0 .5rem; }
.sb-point-icon { width: 56px; height: 56px; border-radius: 50%; background: var(--c-gray); color: var(--c-ink); display: flex; align-items: center; justify-content: center; margin: 0 auto 1.25rem; }
.sb-section.is-gray .sb-point-icon { background: #fff; }
.sb-point-title { font-size: 1.35rem; font-weight: 700; margin: 0 0 .5rem; color: var(--c-ink); }
.sb-point-text { font-size: 1rem; line-height: 1.55; color: var(--c-muted); margin: 0; }

/* ── Boutons : 2 tailles seulement, 5 couleurs ──
   Taille « grand » (.btn-lg) : héros, bandeaux d'appel, action principale d'une page.
   Taille « normal » (.btn)   : boutons dans les cartes, sections, formulaires secondaires.
   Mêmes valeurs à reporter dans tout bouton qui garde sa propre classe (hero-photo-btn, site-cta-btn…) :
     grand  → font-size 1rem  · padding 1.15rem 2.4rem
     normal → font-size .9rem · padding .8rem 1.7rem
   Couleurs : noir, blanc, bleu (#178bff), contour (foncé ou clair sur fond sombre), rouge (pannes / urgence). */
:root {
  --btn-lg-font: 1rem;   --btn-lg-pad: 1.15rem 2.4rem;
  --btn-md-font: .9rem;  --btn-md-pad: .8rem 1.7rem;
}
.btn, .sb-btn { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; padding: var(--btn-md-pad); border-radius: 999px; font-family: inherit; font-size: var(--btn-md-font); font-weight: 700; line-height: 1.2; text-decoration: none; text-align: center; white-space: nowrap; cursor: pointer; border: 1.5px solid transparent; transition: transform .3s var(--ease), filter .2s ease, background-color .2s ease, color .2s ease, border-color .2s ease; }
.btn:hover, .sb-btn:hover { transform: translateY(-2px); }
.btn-lg, .sb-btn { padding: var(--btn-lg-pad); font-size: var(--btn-lg-font); }
.btn-black, .sb-btn-dark { background: #000; color: #fff; }
.btn-black:hover, .sb-btn-dark:hover { background: #2a2a2d; }
.btn-white { background: #fff; color: #000; }
.btn-white:hover { background: var(--c-gray); }
.btn-blue, .sb-btn-blue { background: var(--c-blue); color: #fff; }
.btn-blue:hover, .sb-btn-blue:hover { filter: brightness(1.08); }
.btn-outline, .sb-btn-outline { background: transparent; color: var(--c-ink); border-color: var(--c-ink); }
.btn-outline:hover, .sb-btn-outline:hover { background: var(--c-ink); color: #fff; }
.btn-outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.7); }
.btn-outline-light:hover { background: #fff; color: #000; }
.btn-red { background: var(--c-red); color: #fff; }
.btn-red:hover { filter: brightness(1.1); }
.btn-block { display: flex; width: 100%; }

/* ── Héro photo : apparition du texte (même effet que l'accueil) ── */
@keyframes sbFadeUp { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
.hero-photo .hero-photo-badge, .hero-photo .hero-photo-title, .hero-photo .hero-photo-sub, .hero-photo .hero-photo-actions { opacity: 0; animation: sbFadeUp 1.1s var(--ease) forwards; }
.hero-photo .hero-photo-badge { animation-delay: .1s; }
.hero-photo .hero-photo-title { animation-delay: .2s; }
.hero-photo .hero-photo-sub { animation-delay: .32s; }
.hero-photo .hero-photo-actions { animation-delay: .44s; }
.hero-photo .hero-photo-btn { transition: transform .3s var(--ease), filter .2s ease, background-color .2s ease, color .2s ease; }
.hero-photo .hero-photo-btn:hover { transform: translateY(-3px); }

/* ── Apparition au scroll (classe .reveal, gérée par site-base.js) ── */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.reveal.is-revealed { opacity: 1; transform: none; }
.section-eyebrow.reveal::after { width: 0; transition: width .9s var(--ease) .35s; }
.section-eyebrow.reveal.is-revealed::after { width: 64px; }
@media (prefers-reduced-motion: reduce) {
  .reveal, .hero-photo .hero-photo-badge, .hero-photo .hero-photo-title, .hero-photo .hero-photo-sub, .hero-photo .hero-photo-actions { opacity: 1; transform: none; animation: none; transition: none; }
}

/* ── Écrans étroits : les grilles s'empilent (même comportement qu'avant sur les pages) ── */
@media (max-width: 900px) {
  .sb-section { padding-top: 60px; padding-bottom: 60px; }
  .sb-head { margin-bottom: 40px; }
  .section-eyebrow { margin-bottom: 40px; }
  .sb-title { font-size: 2.1rem; }
  .sb-lead { font-size: 1rem; }
  .sb-grid-3, .sb-grid-4 { grid-template-columns: 1fr; }
  .sb-card, .sb-step { padding: 2rem; }
}
@media (min-width: 901px) and (max-width: 1200px) {
  .sb-grid-4 { grid-template-columns: repeat(2, 1fr); row-gap: 2.5rem; }
}

/* Champs de saisie à 16 px minimum sur mobile : sinon Safari (iPhone) zoome sur le champ à chaque saisie — nécessaire depuis que le zoom de la page est autorisé (accessibilité) */
@media (max-width: 900px) { input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea { font-size: 16px !important; } }