/* ==========================================================================
   REMIND — section1.css
   Section 1 UNIQUEMENT : hero « Déposez une pensée » (colonne pitch, téléphone
   central, colonne « charge mentale »). Tout est scopé sous .hero → aucune
   fuite vers les autres sections. Le composant .phone vient de base.css.
   ========================================================================== */

.hero{
  display: grid;
  grid-template-columns: 1.02fr 0.86fr 1.02fr;
  gap: clamp(28px, 3.4vw, 64px);
  align-items: center;
  padding: clamp(24px, 4vw, 56px) 0 clamp(40px, 6vw, 80px);
}
/* Empêche le verbe (nowrap) d'élargir sa colonne et de déformer la grille */
.hero > section{ min-width: 0; }

/* ---- Colonne gauche : pitch ---- */
.hero .pitch__title{
  margin: 0;
  font-weight: 600;
  font-size: clamp(34px, 3.7vw, 60px);   /* auto-ajusté par section1.js */
  line-height: 1.03;
  letter-spacing: -.01em;
  white-space: nowrap;
}
.hero .pitch__title span{ display: block; }
.hero .pitch .rule{ margin: clamp(14px, 1.6vw, 22px) 0; }

.hero .lede,
.hero .lede-b,
.hero .lede-c{
  margin: 0;
  font-size: clamp(19px, 1.55vw, 24px);
  color: var(--ink);
}
.hero .lede-b{ margin: 14px 0 0; }

/* Slot de hauteur fixe : le verbe change sans jamais décaler la page */
.hero .vivre{
  margin: 4px 0 8px;
  height: clamp(50px, 5vw, 82px);
  display: flex;
  align-items: center;
  overflow: hidden;
}
/* Verbe qui tourne : doré (couleur du logo), une ligne, fondu + glissement */
.hero .vivre__word{
  display: inline-block;
  font-weight: 600;
  font-size: clamp(46px, 4.8vw, 78px);
  line-height: 1;
  letter-spacing: .12em;
  color: var(--gold);
  text-transform: uppercase;
  white-space: nowrap;
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.hero .vivre__word.is-swapping{ opacity: 0; transform: translateY(-.22em); }

.hero .pitch__body{
  margin: clamp(16px, 1.9vw, 26px) 0 0;
  font-size: clamp(17px, 1.4vw, 21px);
  line-height: 1.45;
  color: var(--ink-72);
}

/* CTA WhatsApp + Telegram */
.hero .cta-row{
  display: flex;
  flex-wrap: nowrap;             /* toujours sur une ligne (desktop/tablette) */
  gap: 12px;
  margin: clamp(20px, 2.2vw, 30px) 0 0;
}
.hero .btn{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 17px;
  border-radius: 9px;
  font-family: var(--sans);
  color: #fff;
  white-space: nowrap;
  transition: transform .2s ease, filter .2s ease;
}
.hero .btn:hover{ transform: translateY(-2px); filter: brightness(1.06); }
.hero .btn--wa{ background: var(--green-btn); }
.hero .btn--tg{ background: var(--tg); }
.hero .btn__ico{ width: 22px; height: 22px; flex: none; }
.hero .btn__txt{ display: flex; flex-direction: column; line-height: 1.15; }
.hero .btn__txt strong{ font-weight: 600; font-size: 14px; }
.hero .btn__txt em{ font-style: normal; font-weight: 400; font-size: 13px; opacity: .92; }

/* Mentions de confiance */
.hero .trust{
  display: flex;
  flex-wrap: wrap;               /* une ligne si possible, sinon retour propre */
  gap: clamp(10px, 1.1vw, 18px);
  margin-top: clamp(18px, 2vw, 26px);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-72);
}
.hero .trust li{ display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.hero .trust svg{ width: 16px; height: 16px; color: var(--green); flex: none; }

/* ---- Colonne centrale : téléphone (composant partagé, wrapper local) ---- */
.hero .device{ display: flex; justify-content: center; }

/* ---- Colonne droite : charge mentale ---- */
.hero .load__lead{
  margin: 0;
  font-size: clamp(19px, 1.5vw, 24px);
  line-height: 1.28;
}
.hero .load__lead span{ display: block; }
.hero .load__lead .is-terra{ margin-top: .5em; }

.hero .load__list{
  display: flex;
  flex-direction: column;
  gap: clamp(15px, 1.6vw, 21px);
  margin: clamp(26px, 2.8vw, 38px) 0;
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 500;
  color: var(--ink);
}
.hero .load__list li{ display: flex; align-items: center; gap: 16px; }
.hero .load__list svg{ width: 24px; height: 24px; flex: none; color: var(--ink); }
.hero .load__list li span{ line-height: 1.25; }

.hero .load .rule{ margin: clamp(20px, 2.2vw, 30px) 0; }

.hero .load__foot{
  margin: 0;
  font-size: clamp(19px, 1.55vw, 25px);
  line-height: 1.3;
}
.hero .load__foot span{ display: block; }

/* ---- Responsive Section 1 ---- */
@media (max-width: 1080px){
  .hero{ grid-template-columns: 1fr; gap: 48px; text-align: left; }
  /* ordre naturel : titre + CTA, puis le téléphone, puis la charge mentale */
}
@media (max-width: 560px){
  .hero .cta-row{ flex-wrap: wrap; }        /* boutons empilés sur mobile */
  .hero .cta-row .btn{ flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce){
  .hero .vivre__word.is-swapping{ opacity: 1; transform: none; }
}