/* ============================================================ accueil, V2
Recréé d'après les captures d'anthropic.com (Site dev V2/Maquettes/01-hero-pc/), avec les
couleurs et la police de la piste C (marque.css).
Toutes les cotes sont en « unités de maquette » : 1 u = un pixel de la capture, qui fait
2000 px de large. --u s'adapte à la largeur de la fenêtre, donc la page garde exactement
les proportions de la référence sur n'importe quel écran de PC.
cqw = 1 % de la largeur de la page sans la barre de défilement (100vw la compte, d'où une
page trop large de 15 px). */

html{container-type:inline-size}
body{--u:calc(100cqw / 2000);background:var(--fond)}

/* ------------------------------------------------------------ nav
Fixée en haut, 96 u de haut, fond plein : le texte d'intro passe dessous en remontant. */
.nav{
  position:fixed;inset-inline:0;top:0;z-index:50;height:calc(96 * var(--u));
  display:flex;align-items:flex-start;justify-content:space-between;
  padding:calc(32 * var(--u)) calc(93 * var(--u)) 0;
  background:var(--fond);
  transition:background-color .35s ease;
  /* couleurs des pilules en version claire ; la version sombre les remplace plus bas */
  --pilule-fond:color-mix(in srgb, var(--encre) 3.5%, var(--fond));
  --pilule-bord:color-mix(in srgb, var(--encre) 7%, var(--fond));
  --pilule-texte:color-mix(in srgb, var(--encre) 82%, var(--fond));
}
.nav__gauche,.nav__droite{display:flex;gap:calc(8 * var(--u));list-style:none}
.nav__gauche{flex:1}
.nav__droite{flex:1;justify-content:flex-end}

.pilule,.icone{
  height:calc(36 * var(--u));display:inline-flex;align-items:center;
  background:var(--pilule-fond);color:var(--pilule-texte);
  border:1px solid var(--pilule-bord);
  transition:background-color .35s ease,border-color .35s ease,color .35s ease;
}
.pilule{
  gap:calc(10 * var(--u));padding:0 calc(21 * var(--u));border-radius:var(--rayon-pilule);
  font-size:calc(17 * var(--u));letter-spacing:.01em;white-space:nowrap;
}
.pilule:hover,.icone:hover{background:color-mix(in srgb, var(--pilule-fond) 80%, var(--pilule-texte))}
.chevron{width:calc(9 * var(--u));height:calc(6 * var(--u));fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}

/* les deux boutons carrés de droite (WhatsApp, menu) */
.icone{width:calc(35 * var(--u));justify-content:center;border-radius:calc(8 * var(--u))}
.icone svg{width:calc(21 * var(--u));height:calc(21 * var(--u));fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* le logo, au centre exact de la page : complet en haut, symbole seul dès qu'on descend */
.nav__logo{position:absolute;left:50%;top:calc(36 * var(--u));translate:-50% 0;height:calc(28 * var(--u))}
.nav__logo img{height:calc(28 * var(--u));width:auto;max-width:none;transition:opacity .3s ease}
.nav__logo-symbole{position:absolute;top:0;left:50%;translate:-50% 0}
.nav__logo-symbole{opacity:0}
.nav.est-defilee .nav__logo-complet{opacity:0}
.nav.est-defilee .nav__logo-symbole{opacity:1}

/* nav sombre : quand la carte vidéo passe dessous */
.nav.est-sombre{
  background:var(--encre);
  --pilule-fond:color-mix(in srgb, var(--blanc) 9%, var(--encre));
  --pilule-bord:color-mix(in srgb, var(--blanc) 14%, var(--encre));
  --pilule-texte:var(--blanc);
}
.nav.est-sombre .nav__logo img{filter:brightness(0) invert(1)}

/* ------------------------------------------------------------ intro */
.intro{padding:calc(155 * var(--u)) calc(94 * var(--u)) 0;min-height:calc(463 * var(--u))}
.intro__texte{
  max-width:calc(1812 * var(--u));
  font-size:calc(56 * var(--u));line-height:calc(65.5 * var(--u));
  font-weight:400;letter-spacing:-.025em;color:var(--texte);
}
.intro__texte strong{font-weight:600}

/* ------------------------------------------------------------ la carte vidéo
--ouverture va de 0 (en haut de page, marge de 53 u) à 1 (bord à bord). */
.carte{
  --ouverture:0;
  position:relative;overflow:hidden;isolation:isolate;
  height:calc(1126 * var(--u));
  margin-inline:calc(53 * var(--u) * (1 - var(--ouverture)));
  background:var(--nuit);color:var(--blanc);
}
.carte__video{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;z-index:-1}
/* Un voile bleu nuit par-dessus la vidéo : la vidéo d'attente a une bande jaune très claire
qui rendait le sous-titre illisible. À réduire, voire retirer, avec la vraie démo. */
.carte::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(to bottom, color-mix(in srgb, var(--nuit) 25%, transparent), color-mix(in srgb, var(--nuit) 70%, transparent) 75%)}

.carte__contenu{
  padding-top:calc(408 * var(--u));
  display:flex;flex-direction:column;align-items:center;text-align:center;
}
.carte__etiquette{display:flex;align-items:center;gap:calc(19 * var(--u));font-size:calc(15.5 * var(--u));letter-spacing:.02em;line-height:1}
.points{
  width:calc(42 * var(--u));height:calc(21 * var(--u));border-radius:var(--rayon-pilule);
  background:var(--blanc);color:var(--encre);display:grid;place-items:center;
  font-size:calc(15 * var(--u));line-height:0;letter-spacing:.05em;font-weight:700;
}
.carte__titre{
  margin-top:calc(36 * var(--u));
  font-size:calc(84 * var(--u));line-height:1;font-weight:500;letter-spacing:-.03em;
}
.carte__texte{margin-top:calc(36 * var(--u));font-size:calc(25 * var(--u));line-height:calc(37 * var(--u));letter-spacing:.005em}
.carte__boutons{margin-top:calc(29 * var(--u));display:flex;gap:calc(12 * var(--u))}
.bouton{
  height:calc(41 * var(--u));padding:0 calc(29 * var(--u));border-radius:calc(8 * var(--u));
  display:inline-flex;align-items:center;font-size:calc(19.5 * var(--u));
}
.bouton--blanc{background:var(--blanc);color:var(--encre)}
.bouton--contour{color:var(--blanc);box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--blanc) 55%, transparent)}
.bouton--blanc:hover{background:var(--brume)}
.bouton--contour:hover{background:color-mix(in srgb, var(--blanc) 12%, transparent)}

/* lecture / pause, en bas à droite */
.carte__lecture{
  position:absolute;inset-inline-end:calc(20 * var(--u));bottom:calc(19 * var(--u));
  width:calc(41 * var(--u));height:calc(41 * var(--u));border-radius:calc(10 * var(--u));
  display:grid;place-items:center;color:var(--blanc);
  background:color-mix(in srgb, var(--blanc) 8%, transparent);
  border:1px solid color-mix(in srgb, var(--blanc) 18%, transparent);
}
.carte__lecture svg{width:calc(21 * var(--u));height:calc(21 * var(--u));fill:none;stroke:currentColor;stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round}
.carte__lecture .icone-lecture{display:none}
.carte.est-en-pause .icone-lecture{display:block}
.carte.est-en-pause .icone-pause{display:none}

/* ------------------------------------------------------------ en arabe
La mise en page se retourne toute seule (dir="rtl") ; on retire seulement le resserrement
des lettres, que l'arabe ne supporte pas (déjà fait dans socle.css). */

/* ------------------------------------------------------------ tablette et téléphone
Provisoire : le mobile attend sa référence. En dessous de 1024 px on garde un hero lisible,
sans les pilules de gauche, avec des unités plus grosses. */
@media (max-width:1023px){
  body{--u:calc(100cqw / 900)}
  .nav{padding-inline:calc(30 * var(--u))}
  .nav__gauche{visibility:hidden}
  .nav__droite .pilule:first-child,.nav__droite .icone:first-of-type{display:none}
  .intro{padding-inline:calc(30 * var(--u));min-height:0;padding-bottom:calc(60 * var(--u))}
  .carte{height:min(calc(1126 * var(--u)), 100svh)}
  .carte__contenu{padding-top:calc(220 * var(--u));padding-inline:calc(30 * var(--u))}
}

/* ------------------------------------------------------------ provisoire
Tant que le reste de l'accueil n'est pas codé, la page serait trop courte pour défiler
jusqu'à la carte bord à bord et la nav sombre. On laisse de la place sous la carte ;
à retirer quand les sections suivantes arrivent. */
main{padding-bottom:calc(700 * var(--u))}