/* ==========================================================================
   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);
  /* Taille INTERMÉDIAIRE unique de TOUS les textes du hero (lede, lede-c, corps,
     verbe animé « Vivre ») — SEUL le pitch__title (H1) garde sa grande taille.
     Un point de réglage unique pour harmoniser le bloc. */
  --hero-text: clamp(16px, 1.3vw, 19px);
}
/* Empêche le verbe (nowrap) d'élargir sa colonne et de déformer la grille */
.hero > section{ min-width: 0; }
/* Pitch collé plus à gauche : marge gauche réduite de moitié (déborde dans la
   gouttière, sans toucher au téléphone centré ni à la photo pleine à droite) */
.hero .pitch{ margin-left: calc(var(--gutter) / -2); }
/* Aligne le logo de l'en-tête sur le bord gauche du pitch (mêmes décalages :
   -gutter/2 de la marge + -20px du translateX de .hero > .pitch) */
.site-header .brand{ margin-left: calc(var(--gutter) * -0.5 - 20px); }

/* ---- 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;
  /* Taille commune du hero (cf. --hero-text) : tout le texte hors titre au même corps. */
  font-size: var(--hero-text);
  line-height: 1.38;
  color: var(--ink);
}
.hero .lede-b{ margin: 14px 0 0; }
/* Pas d'espace vertical entre la ligne « … pour VIVRE » et « Pas pour se rappeler… »
   (demande) : .lede-c garde margin: 0 (règle groupée ci-dessus). */

/* Slot de hauteur fixe : le verbe change sans jamais décaler la page.
   Hauteur ramenée à la taille harmonisée du verbe (--hero-text). */
.hero .vivre{
  margin: 4px 0 8px;
  height: clamp(26px, 2.1vw, 32px);
  display: flex;
  align-items: center;
  overflow: hidden;
}
/* Verbe qui tourne : doré (couleur du logo), une ligne, fondu + glissement */
.hero .vivre__word{
  display: inline-block;
  /* Espace supplémentaire après « … fait pour » avant le verbe. */
  margin-left: .4em;
  font-weight: 600;
  font-size: var(--hero-text);
  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(9px, 1.1vw, 15px) 0 0;
  font-size: var(--hero-text);
  line-height: 1.38;
  color: var(--ink);
}

/* 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);
  /* logique inversée : fond transparent, liseret + texte + icône en couleur */
  background: transparent;
  border: 2px solid currentColor;
  white-space: nowrap;
  transition: transform .2s ease, background-color .2s ease, color .2s ease;
}
/* survol : remplissage plein (couleur), texte en crème → feedback net */
.hero .btn:hover{ transform: translateY(-2px); color: #fff; }
.hero .btn--wa{ color: var(--green); border-color: var(--green-wa); }
.hero .btn--wa:hover{ background: var(--green-wa); }
.hero .btn--tg{ color: var(--tg); }
.hero .btn--tg:hover{ 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: nowrap;             /* TOUJOURS sur une seule ligne */
  align-items: center;
  gap: clamp(6px, 0.7vw, 10px);
  margin-top: clamp(18px, 2vw, 26px);
  font-family: var(--sans);
  font-size: clamp(10px, 0.78vw, 11.5px);
  font-weight: 500;
  color: var(--ink-72);
}
.hero .trust li{ display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; flex: none; }
.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: flex-start; }

/* ---- Colonne droite : grande photo plein-cadre + message flottant (maquette v2) ---- */
.hero{ position: relative; }
.hero > .pitch, .hero > .device{ position: relative; z-index: 1; }
/* décalage vers la gauche : le téléphone franchement, le texte juste un peu */
.hero > .pitch{ transform: translateX(-20px); }
.hero > .device{ transform: translateX(-55px); }
/* le téléphone est placé un peu plus bas ET plus petit, comme sur la maquette */
.hero .device{ align-self: center; margin-top: clamp(0px, 1vw, 16px); }
.hero .device .phone{ width: min(240px, 21vw); }
/* Chat défilable : le défilement auto (section1.js) révèle les cartes plus
   hautes que l'écran (ex. les notes) ; barre de défilement masquée. */
.hero .device .phone .chat{ overflow-y: auto; scrollbar-width: none; -ms-overflow-style: none; }
.hero .device .phone .chat::-webkit-scrollbar{ width: 0; height: 0; }

/* Grande photo à droite : déborde jusqu'au bord droit du viewport et couvre
   toute la hauteur du hero, derrière les colonnes. .hero étant centré,
   right:calc(50% - 50vw) cale son bord droit sur le bord droit du viewport. */
.hero__bg{
  position: absolute;
  top: 0; bottom: 0;
  right: calc(50% - 50vw);
  width: 60vw;                 /* plus large → on voit plus de matière (dézoom) */
  z-index: 0;
  overflow: hidden;
}
.hero__img{
  position: absolute;
  right: 0;
  /* Ancrage par le BAS : le bas de la photo est calé sur le cadre bas du
     téléphone. --hero-photo-bottom est le SEUL réglage vertical (l'augmenter
     REMONTE la photo). Le zoom grandit désormais vers le HAUT : le bas ne bouge
     pas quand on rezoome. */
  top: auto;
  bottom: var(--hero-photo-bottom, 20px);
  /* zoom +15% (largeur 115% ; était 100%). Photo ancrée en bas -> s'agrandit
     vers le haut sans décaler la ligne du bas. */
  width: 115%; height: auto; max-width: none;
  /* bord droit PLEIN (jusqu'au bord de l'écran) ; léger fondu en haut + bas atténué */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 3%, #000 90%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0%, #000 3%, #000 90%, transparent 100%);
}
/* Fondu à gauche → l'image se fond dans le crème derrière le téléphone */
.hero__img-fade{
  position: absolute; inset: 0;
  pointer-events: none;
  background: linear-gradient(to right,
              var(--cream) 0%,
              rgba(247,238,228,.7) 12%,
              rgba(247,238,228,0) 38%);
}

/* Surimpression sur la photo (fond transparent) : icônes dorées + signature,
   dans la zone supérieure droite (fenêtre lumineuse), contraste renforcé */
.hero__overlay{
  position: absolute;
  z-index: 2;
  top: 14%;
  right: clamp(20px, 4vw, 70px);
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;        /* 4 pictos+texte empilés l'un sous l'autre */
  align-items: flex-end;         /* alignés sur le bord droit */
  gap: clamp(6px, 0.7vw, 10px);  /* espacement réduit entre les 4 lignes */
  pointer-events: none;
}
.hero__overlay li{
  display: flex;
  align-items: center;
  gap: clamp(8px, 0.9vw, 12px);
}
.hero__overlay svg{
  width: clamp(24px, 2.1vw, 30px);
  height: clamp(24px, 2.1vw, 30px);
  color: var(--gold);
  flex: none;
  /* ombre sombre subtile → les pictos dorés ressortent sur le fond clair */
  filter: drop-shadow(0 1px 3px rgba(24,26,20,.28));
}
.hero__overlay span{
  font-family: var(--sans);
  font-weight: 700;                        /* plus gras → meilleur contraste */
  font-size: clamp(15px, 1.25vw, 19px);    /* police un peu augmentée */
  white-space: nowrap;
  color: var(--ink);
  /* léger halo clair pour rester net sur les zones de verdure de la fenêtre */
  text-shadow: 0 1px 3px rgba(247,238,228,.75), 0 0 1px rgba(247,238,228,.9);
}

/* ---- Responsive Section 1 ---- */
@media (max-width: 1080px){
  .hero{ display: flex; flex-direction: column; gap: 0; text-align: left; }
  /* Le pitch se "dissout" (display:contents) : ses enfants (texte, boutons, trust)
     deviennent des items du hero -> on peut intercaler le téléphone (sibling)
     ENTRE le texte et les boutons via order. Les marges propres des éléments texte
     préservent leur espacement (pas besoin de gap). */
  .hero .pitch{ display: contents; }
  .hero .device{ order: 1; margin: clamp(22px, 4.5vw, 34px) 0 0; }  /* téléphone après le texte, AVANT les boutons « Essayer » */
  .hero .cta-row{ order: 2; }
  .hero .trust{ order: 3; }
  /* align-items:center (hérité du desktop) centre TOUS les items en flex column :
     le téléphone + les boutons/garanties du bas restent centrés (OK), mais le TEXTE
     du haut doit rester à GAUCHE -> align-self:stretch (pleine largeur, texte à gauche). */
  .hero .pitch__title,
  .hero .pitch .rule,
  .hero .lede,
  .hero .lede-c,
  .hero .vivre,
  .hero .pitch__body{ align-self: stretch; }
  .site-header .brand{ margin-left: 0; }   /* logo à la gouttière en mobile */
  /* Réinitialise les décalages horizontaux desktop et recentre le téléphone. */
  .hero > .pitch, .hero > .device{ transform: none; }
  .hero .device{ justify-content: center; }
  /* 22vw devient minuscule sous 1080px → largeur lisible en pile mobile */
  .hero .device .phone{ width: min(300px, 74vw); }
  /* En mobile, la photo famille ne flotte plus (inutile) en fin de section :
     elle devient le FOND D'ÉCRAN du téléphone (wallpaper WhatsApp), derrière les
     bulles. On masque donc le bloc image flottant + ses pictos (enfants de .hero__bg). */
  .hero__bg{ display: none; }
  .hero .device .phone .chat{
    background-image:
      linear-gradient(rgba(247,238,228,.40), rgba(247,238,228,.40)),
      url("../assets/hero-image.jpg");
    background-size: cover;
    background-position: 50% 32%;
    background-repeat: no-repeat;
  }
}
@media (max-width: 560px){
  /* Les 2 CTA tiennent CÔTE À CÔTE sur mobile : boutons compactés (padding,
     police et icône réduits, largeur partagée), plutôt qu'empilés pleine largeur. */
  .hero .cta-row{ flex-wrap: nowrap; gap: 8px; }
  .hero .cta-row .btn{ flex: 1 1 0; min-width: 0; padding: 9px 10px; gap: 7px; }
  .hero .cta-row .btn__ico{ width: 18px; height: 18px; }
  .hero .cta-row .btn__txt strong{ font-size: 12.5px; }
  .hero .cta-row .btn__txt em{ font-size: 11px; }
}
@media (prefers-reduced-motion: reduce){
  .hero .vivre__word.is-swapping{ opacity: 1; transform: none; }
}