/* ============================================================
   Au Clair Digital · pages « Réalisation » du portfolio
   Trame courte : résultat · point de départ · ce que j'ai fait · preuves · contact
   ============================================================ */
:root {
  --night: #1F2F47; --night-soft: #2A3D5A; --night-deep: #15243A;
  --gold: #D4A95A; --gold-soft: #B89048; --gold-texte: #806129;
  --cream: #F4ECD8; --cream-muted: #C9C0AE; --paper: #FBF8F0;
  --charcoal: #2A2A2A; --ash: #5C656E; --border: #E4DECB;
  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans: 'Manrope', system-ui, sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: var(--sans); font-size: 16px; line-height: 1.7; color: var(--charcoal); background: var(--paper); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
.skip-link { position: absolute; left: -9999px; top: 8px; background: var(--night); color: var(--cream); padding: 10px 16px; border-radius: 4px; font-size: 14px; z-index: 200; }
.skip-link:focus { left: 16px; }

/* Navigation */
.site-nav { position: sticky; top: 0; z-index: 100; background: var(--paper); border-bottom: 1px solid var(--border); padding: 18px 40px; display: flex; justify-content: space-between; align-items: center; }
.nav-logo { display: inline-flex; align-items: center; gap: 10px; }
.nav-logo .logo-mark { width: 38px; height: 38px; flex-shrink: 0; }
.nav-logo .logo-word { display: inline-flex; align-items: baseline; gap: 5px; }
.nav-logo .au, .nav-logo .digital { font-size: 12px; letter-spacing: 2.5px; color: var(--night); font-weight: 700; }
.nav-logo .clair { font-family: var(--serif); font-size: 26px; color: var(--gold-texte); font-weight: 600; font-style: italic; }
.nav-back { font-size: 14px; color: var(--ash); transition: color .25s ease; }
.nav-back:hover { color: var(--night); }

/* Éléments communs */
.eyebrow { display: inline-flex; align-items: center; gap: 12px; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-texte); margin-bottom: 18px; font-weight: 600; }
.eyebrow::before { content: ''; width: 26px; height: 1px; background: var(--gold); }
.section-title { font-size: clamp(26px, 3.4vw, 38px); font-weight: 800; color: var(--night); line-height: 1.16; margin-bottom: 20px; letter-spacing: -.025em; }
.section-title em { font-style: normal; color: var(--gold-texte); }
section { padding: 80px 40px; }
.inner { max-width: 1080px; margin: 0 auto; }
.narrow { max-width: 720px; margin: 0 auto; }
.cap { font-size: 12.5px; color: var(--ash); text-align: center; margin-top: 14px; }

/* Ouverture : le résultat et le site en ligne sur téléphone */
.cs-hero { padding: 64px 40px 72px; }
.cs-hero-grid { max-width: 1080px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 56px; align-items: center; }
.cs-hero h1 { font-size: clamp(32px, 4.4vw, 50px); font-weight: 800; color: var(--night); line-height: 1.1; margin-bottom: 20px; letter-spacing: -.03em; }
.cs-hero h1 em { font-style: normal; color: var(--gold-texte); }
.cs-sub { font-size: 17px; color: var(--ash); line-height: 1.7; margin-bottom: 24px; max-width: 580px; }
.cs-facts { display: flex; flex-wrap: wrap; gap: 8px 10px; list-style: none; }
.cs-facts li { font-size: 13px; font-weight: 600; color: var(--night); background: var(--cream); border: 1px solid var(--border); border-radius: 100px; padding: 6px 14px; }
.phone { width: 270px; margin: 0 auto; border: 10px solid var(--night); border-radius: 36px; overflow: hidden; background: var(--night); box-shadow: 0 30px 70px rgba(31,47,71,.25); }

/* Point de départ et travaux */
.cs-depart { background: var(--cream); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.cs-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
.cs-depart p { font-size: 16.5px; line-height: 1.75; margin-bottom: 14px; }
.cs-list { list-style: none; display: grid; gap: 16px; margin-top: 4px; }
.cs-list li { padding-left: 30px; position: relative; font-size: 15.5px; line-height: 1.6; }
.cs-list li::before { content: '\2713'; position: absolute; left: 2px; top: 0; color: var(--gold-texte); font-weight: 700; }
.cs-list strong { color: var(--night); }

/* Résultat : preuves datées et site en ligne sur ordinateur */
.cs-result { background: var(--night); color: var(--cream); }
.cs-result .eyebrow { color: var(--gold); }
.cs-result .eyebrow::before { background: var(--gold); }
.cs-result .section-title { color: var(--cream); max-width: 820px; }
.cs-result .section-title em { color: var(--gold); }
.proofs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 36px 0 44px; }
.proof { background: var(--night-soft); border: 1px solid rgba(212,169,90,.18); border-radius: 14px; padding: 26px; }
.proof-num { font-family: var(--serif); font-style: italic; font-weight: 600; font-size: 44px; color: var(--gold); line-height: 1; margin-bottom: 12px; }
.proof-num sup { font-size: .5em; vertical-align: super; }
.proof p { font-size: 14.5px; color: var(--cream); line-height: 1.55; }
.proof small { display: block; margin-top: 10px; font-size: 12px; color: var(--cream-muted); }
.honnete { max-width: 760px; font-size: 14px; color: var(--cream-muted); border-left: 2px solid var(--gold); padding-left: 16px; margin: -18px 0 44px; }
.browser { max-width: 920px; margin: 0 auto; border-radius: 12px; overflow: hidden; box-shadow: 0 30px 70px rgba(0,0,0,.35); background: #fff; }
.browser-bar { height: 34px; background: var(--night-deep); display: flex; align-items: center; gap: 7px; padding: 0 14px; }
.browser-bar span { width: 10px; height: 10px; border-radius: 50%; background: rgba(244,236,216,.3); flex-shrink: 0; }
.browser-bar .url { margin-left: 10px; font-style: normal; font-size: 12px; color: var(--cream-muted); background: rgba(244,236,216,.08); border-radius: 6px; padding: 2px 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-result .cap { color: var(--cream-muted); }
.visit-wrap { text-align: center; }
.visit { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; color: var(--gold); font-weight: 700; font-size: 15px; border-bottom: 1px solid rgba(212,169,90,.5); padding-bottom: 2px; }
.visit:hover { color: var(--cream); }
.quote { max-width: 760px; margin: 56px auto 0; text-align: center; }
.quote blockquote { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: clamp(21px, 2.6vw, 27px); line-height: 1.45; color: var(--cream); }
.quote figcaption { margin-top: 14px; font-size: 13.5px; color: var(--cream-muted); }

/* Contact */
.cs-cta { text-align: center; }
.cs-cta .sub { font-size: 17px; color: var(--ash); line-height: 1.7; margin: 0 auto 32px; max-width: 560px; }
.cta-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.cta-btn { display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 700; border-radius: 8px; padding: 14px 24px; border: 1.5px solid transparent; transition: transform .2s ease, background .2s ease, border-color .2s ease; }
.cta-gold { background: linear-gradient(120deg, var(--gold), var(--gold-soft)); color: var(--night-deep); box-shadow: 0 8px 22px rgba(212,169,90,.34); }
.cta-gold:hover { transform: translateY(-2px); }
.cta-line { color: var(--night); border-color: var(--border); background: #fff; }
.cta-line:hover { border-color: var(--night); }

/* Pied de page */
.site-footer { background: var(--night-deep); color: var(--cream-muted); padding: 56px 40px 36px; text-align: center; }
.footer-logo { display: inline-flex; align-items: baseline; gap: 6px; margin-bottom: 22px; }
.footer-logo .au, .footer-logo .digital { font-size: 11px; letter-spacing: 2.5px; color: var(--cream-muted); font-weight: 600; }
.footer-logo .clair { font-family: var(--serif); font-size: 22px; color: var(--gold); font-weight: 600; font-style: italic; }
.footer-contact { font-size: 13px; margin-bottom: 22px; }
.footer-contact a { color: var(--cream); }
.footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px 24px; font-size: 12px; padding: 22px 0; border-top: 1px solid rgba(244,236,216,.1); border-bottom: 1px solid rgba(244,236,216,.1); list-style: none; }
.footer-links a:hover { color: var(--gold); }
.footer-meta { font-size: 11px; color: rgba(244,236,216,.62); margin-top: 22px; letter-spacing: .05em; }

@media (max-width: 900px) {
  .cs-hero-grid, .cs-cols { grid-template-columns: 1fr; gap: 36px; }
  .proofs { grid-template-columns: 1fr; gap: 14px; }
  section { padding: 56px 22px; }
  .cs-hero { padding: 40px 22px 52px; }
  .site-nav { padding: 14px 22px; }
  .phone { width: 230px; }
}
/* Sur mobile, la barre fixe du bas porte déjà Appeler et Être rappelé */
@media (max-width: 760px) {
  .cta-desk { display: none; }
  body { padding-bottom: 132px; }
}

/* ============================================================
   Étude de cas complète (MIP Menuiserie) · blocs optionnels,
   sans effet sur les pages qui ne les utilisent pas
   ============================================================ */
.cs-formule { font-size: 14.5px; color: var(--night); line-height: 1.6; margin: -8px 0 26px; max-width: 580px; }
.cs-formule a { font-weight: 700; border-bottom: 1px solid var(--gold); }
.cs-formule a:hover { color: var(--gold-texte); }
.chiffres { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, auto)); gap: 14px 30px; justify-content: start; }
.chiffres li { display: flex; flex-direction: column; }
.chiffres strong { font-size: 30px; font-weight: 800; color: var(--night); line-height: 1.05; letter-spacing: -.02em; }
.chiffres span { font-size: 13px; color: var(--ash); line-height: 1.4; margin-top: 4px; }

/* Avant, maintenant */
.cs-avant { background: var(--cream); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.cs-avant .intro { font-size: 16.5px; line-height: 1.75; max-width: 720px; margin-bottom: 34px; }
.compare { display: grid; gap: 12px; }
.cmp { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1fr) minmax(0, 1.25fr); gap: 22px; align-items: center; background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 18px 24px; }
.cmp-q { font-weight: 800; color: var(--night); font-size: 16px; line-height: 1.35; }
.cmp-lab { display: block; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 3px; }
.cmp-avant { font-size: 14.5px; color: var(--ash); line-height: 1.5; }
.cmp-avant .cmp-lab { color: #6B7076; }
.cmp-apres { font-size: 15px; color: var(--night); font-weight: 600; line-height: 1.5; padding-left: 18px; border-left: 3px solid var(--gold); }
.cmp-apres .cmp-lab { color: #7A5C26; }

/* Ce que le site fait, jour et nuit */
.fait-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-top: 34px; }
.fait { background: #fff; border: 1px solid var(--border); border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; }
.fait-img { height: 280px; background: var(--night); overflow: hidden; flex-shrink: 0; }
.fait-img img { width: 100%; height: 100%; object-fit: cover; }
.fait-img.icone { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; color: var(--cream); }
.fait-img.icone i { font-size: 64px; color: var(--gold); }
.fait-img.icone span { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--cream-muted); }
.fait-txt { padding: 20px 22px 24px; }
.fait h3 { font-size: 18px; font-weight: 800; color: var(--night); line-height: 1.3; margin-bottom: 8px; letter-spacing: -.01em; }
.fait p { font-size: 15px; line-height: 1.6; }

/* Les grandes étapes */
.cs-etapes { background: var(--cream); border-top: 1px solid var(--border); }
.frise { list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 22px; margin-top: 34px; }
.frise li { position: relative; padding-top: 26px; border-top: 2px solid var(--gold); }
.frise li::before { content: ''; position: absolute; top: -7px; left: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 4px var(--cream); }
.frise .quand { display: block; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #7A5C26; margin-bottom: 6px; }
.frise strong { display: block; font-size: 17px; font-weight: 800; color: var(--night); margin-bottom: 6px; }
.frise p { font-size: 14.5px; line-height: 1.55; }
.cs-plus { max-width: 760px; margin: 44px 0 0; background: #fff; border: 1px solid var(--border); border-radius: 14px; }
.cs-plus summary { list-style: none; cursor: pointer; padding: 18px 52px 18px 22px; font-weight: 700; color: var(--night); font-size: 16px; position: relative; }
.cs-plus summary::-webkit-details-marker { display: none; }
.cs-plus summary::after { content: '\002B'; position: absolute; right: 22px; top: 14px; font-size: 24px; font-weight: 300; color: var(--gold-texte); transition: transform .3s ease; }
.cs-plus[open] summary::after { transform: rotate(45deg); }
.cs-plus ul { list-style: none; display: grid; gap: 10px; padding: 0 22px 22px; }
.cs-plus li { padding-left: 28px; position: relative; font-size: 15px; line-height: 1.55; }
.cs-plus li::before { content: '\2713'; position: absolute; left: 2px; top: 0; color: var(--gold-texte); font-weight: 700; }

/* Résultat : la suite prévue */
.suivi { max-width: 760px; font-size: 14.5px; color: var(--cream); line-height: 1.6; background: rgba(244,236,216,.06); border: 1px solid rgba(244,236,216,.12); border-radius: 12px; padding: 16px 20px; margin: 0 0 44px; }
.suivi strong { color: var(--gold); }

@media (max-width: 900px) {
  .fait-grid { grid-template-columns: 1fr 1fr; }
  .frise { grid-template-columns: 1fr; gap: 0; border-left: 2px solid var(--gold); margin-left: 6px; }
  .frise li { border-top: none; padding: 0 0 24px 24px; }
  .frise li::before { top: 4px; left: -7px; }
  .frise li:last-child { padding-bottom: 0; }
}
@media (max-width: 700px) {
  .chiffres { grid-template-columns: 1fr 1fr; gap: 16px 20px; }
  .chiffres strong { font-size: 26px; }
  .cmp { grid-template-columns: 1fr; gap: 8px; padding: 16px 18px; }
  .cmp-apres { padding-left: 14px; }
  .fait-grid { grid-template-columns: 1fr; gap: 14px; }
  .fait { flex-direction: row; }
  .fait-img { width: 116px; height: auto; min-height: 168px; }
  .fait-img.icone i { font-size: 44px; }
  .fait-img.icone span { display: none; }
  .fait-txt { padding: 16px 16px 18px; }
  .fait h3 { font-size: 16.5px; }
  .fait p { font-size: 14.5px; }
}
@media (prefers-reduced-motion: reduce) { .cs-plus summary::after { transition: none; } }

/* Étude de cas complète · version téléphone plus courte */
@media (max-width: 700px) {
  .cs-long .phone { width: 190px; border-width: 8px; border-radius: 30px; }
  .cmp { padding: 14px 16px; gap: 6px; }
  .cmp-avant { font-size: 14px; }
  .proofs.compact { gap: 10px; margin: 28px 0 36px; }
  .proofs.compact .proof { display: grid; grid-template-columns: 70px minmax(0, 1fr); column-gap: 14px; align-items: center; padding: 16px 18px; }
  .proofs.compact .proof-num { font-size: 34px; margin: 0; grid-row: span 2; }
  .proofs.compact .proof small { margin-top: 4px; }
  .browser-desk, .cap-desk { display: none; }
  .suivi { margin-bottom: 20px; }
}