:root{
  --green-deep:#19322A;
  --green-deep-2:#283C35;
  --ivory:#F7F6F1;
  --sage:#72907E;
  /* Variante texte de --sage : la couleur d'origine ne passe pas le contraste
     WCAG AA (4.5:1) pour du texte normal sur fond clair (--ivory/#fff/--rec-bg) —
     mesuré à 3.23:1. --sage-text (#4C6155) est calibré pour dépasser 4.5:1 sur
     ces trois fonds clairs tout en gardant la même teinte. --sage reste inchangé
     pour les usages non textuels (dégradés, bordures de focus, décor). */
  --sage-text:#4C6155;
  --sand:#E3C394;
  --stone:#E7E7DF;
  --border:#D8D8D0;
  --text-muted:#68716C;
  --rec-bg:#D7E2D9;
  --font-serif:'Instrument Serif', Georgia, serif;
  --font-sans:'DM Sans', Arial, sans-serif;
  --font-mono:'DM Mono', monospace;
  --r-sm:3px;
  --r-md:5px;
  --r-lg:7px;
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-sans);
  background:var(--ivory);
  color:var(--green-deep);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:1240px;margin:0 auto;padding:0 8%}
.eyebrow{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--sage-text);
}
em{font-style:italic;font-family:var(--font-serif)}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 28px;border-radius:var(--r-sm);
  font-size:14px;font-weight:500;
  border:1px solid transparent;
  transition:transform .25s ease, background .25s ease, color .25s ease, border-color .25s ease;
  cursor:pointer;white-space:nowrap;
}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--green-deep);color:var(--ivory)}
.btn-primary:hover{background:var(--green-deep-2)}
.btn-ghost{background:transparent;color:var(--green-deep);border-color:var(--border)}
.btn-ghost:hover{border-color:var(--green-deep)}
.btn-light{background:var(--ivory);color:var(--green-deep)}
.btn-outline-light{background:transparent;color:var(--ivory);border-color:rgba(247,246,241,.35)}
.btn-outline-light:hover{border-color:var(--ivory)}

/* reveal on scroll */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .8s ease, transform .8s ease}
.reveal.in{opacity:1;transform:translateY(0)}

/* SKIP LINK (accessibilité clavier) */
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:300;
  background:var(--green-deep);color:var(--ivory);
  padding:12px 20px;border-radius:0 0 var(--r-sm) 0;font-size:14px;
}
.skip-link:focus{left:0}

/* TOAST parrainage */
.ref-toast{
  display:none;position:fixed;top:78px;right:20px;z-index:190;
  background:var(--green-deep);color:var(--ivory);font-size:13px;
  padding:10px 18px;border-radius:var(--r-sm);box-shadow:0 10px 24px rgba(0,0,0,.18);
  align-items:center;gap:8px;
}
.ref-toast.show{display:flex}
@media (max-width:940px){ .ref-toast{top:auto;bottom:86px;right:16px;left:16px;justify-content:center} }

/* NAV */
header{
  position:fixed;top:0;left:0;right:0;z-index:200;
  background:rgba(247,246,241,.82);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
}
nav{
  max-width:1240px;margin:0 auto;padding:18px 8%;
  display:flex;align-items:center;justify-content:space-between;
}
.logo{font-family:var(--font-mono);font-size:14px;letter-spacing:.14em;text-transform:uppercase}
.logo span{color:var(--sage-text)}
.nav-links{display:flex;gap:32px;font-size:14px}
.nav-links a{color:var(--text-muted);transition:color .2s;white-space:nowrap}
.nav-links a:hover,.nav-links a.active{color:var(--green-deep)}
.nav-cta{display:flex;align-items:center}
/* Entre 941px et 1060px, le logo + les 5 liens + le bouton CTA n'ont plus
   assez de place sur une seule ligne : le lien "À propos" (le seul en deux
   mots) se met à passer à la ligne et casse visuellement le haut de page.
   On bascule sur le menu burger un peu plus tôt pour cette zone intermédiaire,
   avant le point de rupture général à 940px utilisé par le reste des grilles. */
@media (max-width:1060px) and (min-width:941px){
  .nav-links,.nav-cta .btn-ghost{display:none}
  .burger{display:flex}
}
.burger{display:none;background:none;border:none;cursor:pointer;flex-direction:column;gap:5px;padding:4px}
.burger span{width:22px;height:1.5px;background:var(--green-deep);display:block;transition:transform .25s ease, opacity .2s ease}
.burger.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* STICKY MOBILE CTA */
.sticky-cta{
  display:none;position:fixed;left:0;right:0;bottom:0;z-index:150;
  background:var(--green-deep);color:var(--ivory);
  padding:14px 20px;align-items:center;justify-content:space-between;gap:14px;
  box-shadow:0 -10px 26px rgba(0,0,0,.18);
  transform:translateY(100%);transition:transform .3s ease;
}
.sticky-cta.show{transform:translateY(0)}
.sticky-cta span{font-size:13px;line-height:1.3}
.sticky-cta .btn{padding:10px 18px;font-size:13px;flex-shrink:0}
.sticky-cta-close{background:none;border:none;color:rgba(247,246,241,.55);font-size:22px;cursor:pointer;line-height:1;width:44px;height:44px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
@media (max-width:940px){ .sticky-cta{display:flex} }

/* PAGE HERO (pages internes, hero plus court) */
.page-hero{
  position:relative;padding:170px 0 80px;
  background:var(--green-deep);color:var(--ivory);overflow:hidden;
}
.page-hero::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 80% 20%, rgba(114,144,126,.35), transparent 55%),
             radial-gradient(circle at 10% 90%, rgba(227,195,148,.15), transparent 45%);
  pointer-events:none;
}
.page-hero .wrap{position:relative}
.page-hero h1{
  font-family:var(--font-serif);font-weight:400;
  font-size:clamp(34px,4.6vw,58px);line-height:1.1;margin:16px 0 18px;
}
.page-hero p.lead{font-size:16.5px;line-height:1.7;color:rgba(247,246,241,.78);max-width:560px}
.breadcrumb{font-family:var(--font-mono);font-size:11.5px;color:rgba(247,246,241,.55);letter-spacing:.06em}
.breadcrumb a{color:rgba(247,246,241,.75)}
.breadcrumb a:hover{color:var(--ivory)}

/* HERO (accueil) */
.hero{
  position:relative;
  padding:170px 0 100px;
  background:var(--green-deep);
  color:var(--ivory);
  overflow:hidden;
}
.hero::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 80% 20%, rgba(114,144,126,.35), transparent 55%),
             radial-gradient(circle at 10% 90%, rgba(227,195,148,.15), transparent 45%);
  pointer-events:none;
}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:64px;align-items:center;position:relative}
.hero h1{
  font-family:var(--font-serif);
  font-weight:400;
  font-size:clamp(40px,5.2vw,74px);
  line-height:1.05;
  margin:22px 0 26px;
}
.hero p.lead{
  font-size:17px;line-height:1.7;color:rgba(247,246,241,.78);
  max-width:480px;margin-bottom:36px;
}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap}

.mock{
  position:relative;
  border-radius:var(--r-lg);
  border:1px solid rgba(247,246,241,.18);
  background:linear-gradient(155deg, rgba(247,246,241,.08), rgba(247,246,241,.02));
  padding:20px;
}
.mock-bar{display:flex;gap:6px;margin-bottom:16px}
.mock-dot{width:8px;height:8px;border-radius:50%;background:rgba(247,246,241,.25)}
.mock-body{
  border-radius:var(--r-md);
  background:rgba(247,246,241,.05);
  padding:26px;
  display:flex;flex-direction:column;gap:14px;
}
.mock-line{height:9px;border-radius:2px;background:rgba(247,246,241,.18)}
.mock-line.w60{width:60%}
.mock-line.w40{width:40%}
.mock-line.w80{width:80%}
.mock-blocks{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:8px}
.mock-block{
  height:64px;border-radius:var(--r-md);
  background:linear-gradient(140deg, var(--sand), var(--sage));
  opacity:.85;
}
.mock-block:nth-child(2){background:linear-gradient(140deg, var(--sage), var(--green-deep-2))}

/* SECTION HEADINGS */
section{padding:120px 0}
.section-head{max-width:640px;margin-bottom:64px}
.section-head h2{
  font-family:var(--font-serif);
  font-weight:400;
  font-size:clamp(30px,3.6vw,48px);
  line-height:1.12;
  margin-top:14px;
}

/* MANIFESTE */
.manifesto{padding:100px 0;text-align:center}
.manifesto p{
  font-family:var(--font-serif);
  font-size:clamp(28px,4vw,52px);
  line-height:1.28;
  max-width:920px;margin:0 auto;
}

/* REALISATIONS */
.work-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:28px}
.work-card{
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  overflow:hidden;
  background:#fff;
  transition:transform .35s ease, box-shadow .35s ease;
  display:flex;flex-direction:column;
}
.work-card:hover{transform:translateY(-6px);box-shadow:0 24px 48px -28px rgba(25,50,42,.35)}
.work-thumb{
  height:200px;
  position:relative;
  display:flex;align-items:center;justify-content:center;
  padding:24px;
}
.work-thumb .mock{width:100%;border-color:rgba(25,50,42,.1)}
.work-thumb .mock-line, .work-thumb .mock-dot{background:rgba(25,50,42,.15)}
.thumb-nicole{background:linear-gradient(150deg,#EDEAE2,#D7E2D9)}
.thumb-xelor{background:linear-gradient(150deg,#191410,#3A1822)}
.thumb-xelor .mock{border-color:rgba(247,246,241,.15)}
.thumb-xelor .mock-line{background:rgba(247,246,241,.2)}
.thumb-xelor .mock-block{background:linear-gradient(140deg,#C2A26D,#3A1822)}
.thumb-pilot{background:linear-gradient(150deg,#E7E7DF,#E3C394)}
.thumb-helveticars{background:linear-gradient(150deg,#111111,#2A2417)}
.work-thumb.has-img{padding:0;overflow:hidden;height:auto;aspect-ratio:900/437}
.work-thumb.has-img img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
.work-body{padding:26px;display:flex;flex-direction:column;gap:10px;flex:1}
.work-body .eyebrow{margin-bottom:2px}
.work-body h3{font-family:var(--font-serif);font-weight:400;font-size:26px}
.work-body p{color:var(--text-muted);font-size:14.5px;line-height:1.6;flex:1}
.work-link{font-size:13.5px;font-weight:500;display:inline-flex;align-items:center;gap:6px;margin-top:6px}
.work-link .arrow{transition:transform .25s ease}
.work-card:hover .work-link .arrow{transform:translateX(4px)}

/* Case study détaillée (page réalisations) */
.case{border-top:1px solid var(--border);padding:64px 0;display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:start}
.case:first-child{border-top:none}
.case-visual{border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--border)}
.case-visual img{width:100%;display:block}
.case-tags{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0 14px}
.case-tag{font-family:var(--font-mono);font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--sage-text);border:1px solid var(--border);border-radius:var(--r-sm);padding:4px 10px}
.case h3{font-family:var(--font-serif);font-weight:400;font-size:32px;margin-bottom:14px}
.case p{color:var(--text-muted);font-size:15px;line-height:1.75;margin-bottom:12px}
.case-points{list-style:none;display:flex;flex-direction:column;gap:8px;margin:18px 0}
.case-points li{font-size:14px;padding-left:20px;position:relative;color:var(--green-deep-2)}
.case-points li::before{content:"—";position:absolute;left:0;color:var(--sage-text)}
@media (max-width:940px){ .case{grid-template-columns:1fr} }

/* SERVICES (dark) */
.services{background:var(--green-deep);color:var(--ivory)}
.services .eyebrow{color:var(--sand)}
.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(247,246,241,.14);border:1px solid rgba(247,246,241,.14);border-radius:var(--r-lg);overflow:hidden}
.service-item{background:var(--green-deep);padding:44px 34px}
.service-item h3{font-family:var(--font-serif);font-weight:400;font-size:26px;margin:18px 0 12px}
.service-item p{color:rgba(247,246,241,.7);font-size:14.5px;line-height:1.65}
.service-num{font-family:var(--font-mono);font-size:12px;color:var(--sand)}

/* TARIFS */
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.price-card{
  border:1px solid var(--border);border-radius:var(--r-lg);
  padding:36px 30px;background:#fff;
  display:flex;flex-direction:column;
  position:relative;
}
.price-card.highlight{
  border-color:var(--green-deep);
  background:var(--green-deep);color:var(--ivory);
  transform:scale(1.03);
}
.price-card.highlight .price-desc,.price-card.highlight .feat-list li{color:rgba(247,246,241,.75)}
.price-card.highlight .feat-list li::before{color:var(--sand)}
.badge{
  position:absolute;top:-13px;left:30px;
  background:var(--sand);color:var(--green-deep);
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  padding:5px 12px;border-radius:var(--r-sm);
}
.price-name{font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--sage-text)}
.price-card.highlight .price-name{color:var(--sand)}
.price-amount{font-family:var(--font-serif);font-size:46px;margin:14px 0 6px}
.price-desc{color:var(--text-muted);font-size:14px;margin-bottom:6px}
.price-hint{font-family:var(--font-mono);font-size:12.5px;color:var(--sage-text);letter-spacing:.02em;margin-bottom:22px}
.price-card.highlight .price-hint{color:var(--sand)}
.feat-list{list-style:none;display:flex;flex-direction:column;gap:11px;margin-bottom:30px;flex:1}
.feat-list li{font-size:14px;padding-left:20px;position:relative}
.feat-list li::before{content:"—";position:absolute;left:0;color:var(--sage-text)}
.pricing-note{
  margin-top:40px;text-align:center;
  border:1px solid var(--border);border-radius:var(--r-md);
  padding:22px 28px;font-size:14.5px;color:#565F5A;
  background:var(--stone);
}
.pricing-note strong{color:var(--green-deep)}
.price-trust{
  text-align:center;font-size:12.5px;color:var(--text-muted);
  margin-top:12px;
}
.price-card.highlight .price-trust{color:rgba(247,246,241,.65)}
.price-quote-link{
  display:block;text-align:center;font-size:13px;
  color:var(--text-muted);text-decoration:underline;text-underline-offset:3px;
  margin-top:14px;
}
.price-quote-link:hover{color:var(--green-deep)}
.price-card.highlight .price-quote-link{color:rgba(247,246,241,.75)}
.price-card.highlight .price-quote-link:hover{color:var(--ivory)}

/* FAQ (tarifs) */
.faq{max-width:760px;margin:64px auto 0}
.faq-item{border-top:1px solid var(--border);padding:22px 0}
.faq-item summary{cursor:pointer;font-family:var(--font-serif);font-size:19px;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";font-family:var(--font-sans);font-size:20px;color:var(--sage-text);flex-shrink:0}
.faq-item[open] summary::after{content:"–"}
.faq-item p{color:var(--text-muted);font-size:14.5px;line-height:1.7;margin-top:12px;max-width:600px}

/* AFFILIATION */
.affiliation{background:var(--rec-bg)}
.aff-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.aff-steps{display:flex;flex-direction:column;gap:22px}
.aff-step{display:flex;gap:18px;align-items:flex-start}
.aff-step .num{
  font-family:var(--font-serif);font-size:34px;color:var(--sage-text);line-height:1;
}
.aff-step p{font-size:15px;line-height:1.6;color:var(--green-deep-2)}
.aff-card{background:var(--ivory);border-radius:var(--r-lg);padding:40px;border:1px solid rgba(25,50,42,.1)}
.aff-card p{font-size:14.5px;color:var(--text-muted);margin-top:10px}
/* Bloc statistique 20%/20% : deux chiffres séparés et légendés plutôt qu'une
   seule ligne "20% / 20%" ambiguë et visuellement discrète malgré le grand
   corps — la légende clarifie immédiatement lequel est la remise et lequel
   est la commission. */
.aff-stats{display:flex;align-items:center;gap:22px}
.aff-stat{flex:1;text-align:center}
/* Sélecteur à 2 classes (.aff-stats .aff-percent) volontairement plus spécifique
   que ".aff-card p" ci-dessus : sans ça, cette règle générique (font-size:14.5px,
   couleur grise) gagnait le conflit de spécificité CSS et écrasait silencieusement
   la taille/couleur du chiffre statistique — bug confirmé, c'est la vraie raison
   pour laquelle "20%" s'affichait minuscule et gris plutôt qu'en grand caractère
   vert foncé comme prévu. */
.aff-stats .aff-percent{font-family:var(--font-serif);font-size:132px;line-height:1;color:var(--green-deep)}
.aff-percent .pct{font-size:.34em;vertical-align:.42em;margin-left:2px}
.aff-stat-label{display:block;font-family:var(--font-mono);font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--text-muted);margin-top:4px;line-height:1.5}
.aff-stat-divider{width:1px;align-self:stretch;background:rgba(25,50,42,.15)}

/* METHODE */
.method-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
.method-item{border-top:1px solid var(--border);padding-top:22px}
.method-item .num{font-family:var(--font-mono);font-size:12px;color:var(--sage-text)}
.method-item h3{font-family:var(--font-serif);font-weight:400;font-size:24px;margin:14px 0 10px}
.method-item p{color:var(--text-muted);font-size:14.5px;line-height:1.6}

/* CTA */
.cta{background:var(--green-deep-2);color:var(--ivory);text-align:center}
.cta h2{font-family:var(--font-serif);font-weight:400;font-size:clamp(30px,4.4vw,56px);line-height:1.15;max-width:760px;margin:16px auto 34px}

/* FORM */
.form-wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:64px}
form{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.field{display:flex;flex-direction:column;gap:8px}
.field.full{grid-column:1/-1}
label{font-size:13px;color:var(--text-muted)}
input,select,textarea{
  font-family:var(--font-sans);font-size:14.5px;
  padding:13px 16px;border-radius:var(--r-sm);
  border:1px solid var(--border);background:#fff;color:var(--green-deep);
  outline:none;transition:border-color .2s, box-shadow .2s;
}
input:focus,select:focus,textarea:focus{border-color:var(--sage);box-shadow:0 0 0 3px rgba(114,144,126,.15)}
textarea{resize:vertical;min-height:100px}
select{
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  cursor:pointer;padding-right:38px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%2368716C' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:12px 8px;
}
select:hover{border-color:var(--sage)}
::placeholder{color:#9AA29C}
.form-note{margin-top:16px;font-size:13px;color:var(--text-muted)}
.form-side p{color:var(--text-muted);font-size:15px;line-height:1.7;margin-top:14px}
.form-details{border:1px solid var(--border);border-radius:var(--r-md);padding:14px 18px}
.form-details summary{cursor:pointer;font-size:13.5px;color:var(--text-muted);list-style:revert}
.form-details summary:hover{color:var(--green-deep)}
.form-details[open] summary{margin-bottom:16px}
.form-details-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media (max-width:940px){ .form-details-grid{grid-template-columns:1fr} }
/* Entre 941px et 1060px, le burger prend déjà le relais dans la nav (cf. plus
   haut) mais le formulaire gardait sa disposition 2 colonnes (.form-wrap +
   .form-details-grid), ce qui écrase des champs comme "Téléphone" sur trop
   peu de largeur une fois le panneau "Précisions" ouvert. On repasse le
   formulaire en une seule colonne un peu plus tôt pour lui laisser toute la
   largeur disponible dans cette zone intermédiaire. */
@media (max-width:1060px) and (min-width:941px){
  .form-wrap{grid-template-columns:1fr}
  .form-details-grid{grid-template-columns:1fr}
}

footer{background:var(--green-deep);color:rgba(247,246,241,.7);padding:70px 0 40px}
.footer-grid{display:flex;justify-content:space-between;flex-wrap:wrap;gap:40px;border-bottom:1px solid rgba(247,246,241,.14);padding-bottom:40px;margin-bottom:26px}
.footer-brand .logo{color:var(--ivory)}
.footer-brand p{margin-top:10px;font-size:14px;max-width:280px}
.footer-col h4{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--sand);margin-bottom:14px}
.footer-col a{display:block;font-size:14px;margin-bottom:10px;color:rgba(247,246,241,.7)}
.footer-col a:hover{color:var(--ivory)}
.footer-bottom{display:flex;justify-content:space-between;font-size:12.5px;color:rgba(247,246,241,.45);flex-wrap:wrap;gap:10px}

@media (max-width: 940px){
  .nav-links,.nav-cta{display:none}
  .burger{display:flex}
  .hero-grid,.aff-grid,.form-wrap{grid-template-columns:1fr}
  .hero-grid{gap:48px}
  .work-grid,.services-grid,.pricing-grid,.method-grid{grid-template-columns:1fr}
  form{grid-template-columns:1fr}
  .price-card.highlight{transform:none}
  .aff-stats .aff-percent{font-size:84px}
  .aff-stats{gap:12px}
}

/* Démos & concepts */
.demos{padding:96px 0 40px;border-top:1px solid rgba(25,50,42,.12)}
.demos h2{margin:10px 0 14px}
.demos .lead{max-width:640px;margin-bottom:36px}
.demo-grid{grid-template-columns:repeat(2,1fr)}
.work-thumb{position:relative}
.demo-badge{position:absolute;top:12px;left:12px;z-index:2;font-family:'DM Mono',monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;background:rgba(247,246,241,.92);color:#19322A;padding:5px 10px;border-radius:999px}
@media (max-width:940px){.demo-grid{grid-template-columns:1fr}}

/* ── PAGE CONTACT (refonte 15.10.2026) ─────────────────────────────── */
.ref-toast{top:auto;bottom:24px;right:24px;border-radius:999px;padding:12px 20px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.contact-hero h1 em{font-style:italic;color:var(--sand)}
.contact-promises{list-style:none;display:flex;flex-wrap:wrap;gap:12px 40px;margin-top:40px;padding-top:28px;border-top:1px solid rgba(247,246,241,.16)}
.contact-promises li{display:flex;align-items:baseline;gap:12px;color:rgba(247,246,241,.78);font-size:14px}
.contact-promises span{font-family:var(--font-serif);font-size:40px;line-height:1;color:var(--ivory)}
.contact-main{padding:88px 0 120px}
.contact-grid{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:56px;align-items:start}
.contact-aside{position:sticky;top:110px;display:grid;gap:22px}
.contact-card{background:var(--green-deep);color:var(--ivory);border-radius:14px;padding:26px 22px 14px}
.contact-card .eyebrow{color:var(--sand);margin-bottom:10px}
.contact-line{display:grid;grid-template-columns:42px 1fr auto;align-items:center;gap:14px;padding:14px 4px;border-top:1px solid rgba(247,246,241,.12);transition:padding .25s ease}
.contact-line:first-of-type{border-top:0}
.contact-line strong{display:block;font-weight:500;font-size:15.5px}
.contact-line small{display:block;font-size:12.5px;color:rgba(247,246,241,.62);margin-top:2px}
.contact-ico{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:rgba(227,195,148,.14);color:var(--sand)}
.contact-ico svg{width:20px;height:20px}
.contact-arrow{color:var(--sand);transition:transform .25s ease}
.contact-line:hover .contact-arrow{transform:translateX(4px)}
.contact-line:hover{padding-left:8px}
.contact-steps{border:1px solid var(--border);border-radius:14px;padding:24px 22px;background:#fff}
.contact-steps ol{list-style:none;counter-reset:s;margin-top:14px;display:grid;gap:16px}
.contact-steps li{counter-increment:s;display:grid;grid-template-columns:30px 1fr;column-gap:12px}
.contact-steps li::before{content:counter(s);grid-row:span 2;width:28px;height:28px;border-radius:50%;border:1px solid var(--sage);color:var(--sage-text);display:grid;place-items:center;font-family:var(--font-mono);font-size:12px}
.contact-steps b{font-weight:600;font-size:15px}
.contact-steps li span{font-size:14px;color:var(--text-muted);line-height:1.55}
.contact-founder{margin-top:18px;padding-top:16px;border-top:1px dashed var(--border);font-family:var(--font-serif);font-style:italic;font-size:18px;line-height:1.4;color:var(--green-deep)}

.contact-form{display:block;background:#fff;border:1px solid var(--border);border-radius:18px;padding:40px 40px 34px;box-shadow:0 40px 80px -50px rgba(25,50,42,.35);min-width:0}
.cf-step{border:0;margin:0 0 30px;padding:0;min-width:0}
.cf-step legend{display:flex;align-items:baseline;gap:12px;font-family:var(--font-serif);font-size:30px;line-height:1;margin-bottom:22px;padding:0}
.cf-num{font-family:var(--font-mono);font-size:12px;letter-spacing:.12em;color:var(--sage-text)}
.cf-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 18px}
.cf-row-chips{margin:4px 0 18px}
.contact-form .field{min-width:0}
.contact-form label{font-size:13.5px;color:var(--text-muted)}
.contact-form label em{font-style:normal;color:var(--sage-text)}
.contact-form input,.contact-form textarea{width:100%;background:var(--ivory);border-color:transparent;border-radius:10px}
.contact-form input:focus,.contact-form textarea:focus{background:#fff}
.cf-label{font-size:13.5px;color:var(--text-muted);margin:2px 0 10px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.chip{font:inherit;font-size:14px;padding:10px 16px;border-radius:999px;border:1px solid var(--border);background:#fff;color:var(--green-deep);cursor:pointer;transition:background .2s ease,border-color .2s ease,color .2s ease,transform .15s ease}
.chip:hover{border-color:var(--sage)}
.chip:active{transform:scale(.97)}
.chip.on{background:var(--green-deep);border-color:var(--green-deep);color:var(--ivory)}
.chip:focus-visible{outline:2px solid var(--sage);outline-offset:2px}
.cf-referral{margin-top:16px;border-top:1px solid var(--border);padding-top:14px}
.cf-referral summary{cursor:pointer;font-size:14px;color:var(--sage-text);list-style:none;display:inline-flex;gap:8px;align-items:center}
.cf-referral summary::before{content:'+';font-family:var(--font-mono);width:20px;height:20px;border-radius:50%;border:1px solid var(--sage);display:grid;place-items:center;font-size:13px}
.cf-referral[open] summary::before{content:'–'}
.cf-referral summary::-webkit-details-marker{display:none}
.cf-referral .field{margin-top:12px;max-width:320px}
.cf-submit{border-top:1px solid var(--border);padding-top:24px}
.cf-btn{width:100%;justify-content:center;padding:18px 24px;font-size:16px;border-radius:12px}
.cf-btn span{transition:transform .25s ease;display:inline-block;margin-left:6px}
.cf-btn:hover span{transform:translateX(4px)}
.cf-submit .form-note{text-align:center;margin-top:14px}
.cf-submit .form-note a{text-decoration:underline}
.form-note.cf-done{font-family:var(--font-serif);font-size:26px;line-height:1.3;text-align:left;padding:40px;border-radius:18px;background:#fff;border:1px solid var(--border)}
.cf-error{margin-top:14px;padding:14px 16px;border:1px solid #d99;background:#fff4f4;border-radius:10px;color:#7a2020;font-size:14px}
.cf-error p{margin:0 0 10px}
.cf-error-actions{display:flex;gap:10px;flex-wrap:wrap}
@media (max-width:1080px){
  .contact-grid{grid-template-columns:1fr;gap:28px}
  .contact-aside{position:static;order:2}
}
@media (max-width:640px){
  .contact-main{padding:48px 0 80px}
  .contact-form{padding:26px 20px 22px;border-radius:14px}
  .cf-row{grid-template-columns:1fr}
  .cf-step legend{font-size:26px}
  .contact-promises{gap:14px 24px}
  .contact-promises span{font-size:32px}
  .chip{padding:10px 14px}
}
@media (prefers-reduced-motion:reduce){ .chip,.contact-line,.contact-arrow,.cf-btn span{transition:none} }
/* main.js place la note juste après le formulaire (pour qu'elle reste visible après l'envoi) : on la garde sous la carte */
.contact-grid > #devis-note{grid-column:2;text-align:center;margin-top:-34px;font-size:13px}
.contact-grid > #devis-note a{text-decoration:underline}
.contact-grid > #devis-note.cf-done{margin-top:0;text-align:left}
@media (max-width:1080px){ .contact-grid > #devis-note{grid-column:1;margin-top:-14px} }
.cf-btn,.chip{font-family:var(--font-sans)}