/* L'eau de l'air — feuille de style maison.
   Valeurs reprises de la mesure du site Framer d'origine (cf. DESIGN.md).
   Eastman Regular Offset → Montserrat 350 ; RiccioneSerial Xlight → Spectral 300.
   350 et non 400 : mesuré sur la couverture d'encre, le 400 est 15 % plus gras que l'original.
   Montserrat est chargée en police VARIABLE pour permettre cette graisse intermédiaire. */

:root {
  /* couleurs relevées sur le site d'origine */
  --noir:        #05080c;
  --encre:       #0f0f0f;
  --blanc:       #ffffff;
  --gris-clair:  #f5f5f5;
  --texte-75:    rgba(0, 0, 0, .75);
  --blanc-75:    rgba(255, 255, 255, .75);
  --placeholder: #5b5b5b;

  /* rôles typographiques */
  --titre: "Montserrat", "Helvetica Neue", Arial, sans-serif; /* ex-Eastman */
  /* Graisse qui reproduit l'épaisseur de trait d'Eastman (relevé : +0,6 % contre +15 % en 400). */
  --titre-graisse: 350;
  --serif: "Spectral", Georgia, "Times New Roman", serif;     /* ex-RiccioneSerial Xlight */
  --ui:    "Geist", system-ui, -apple-system, Segoe UI, sans-serif;
  --arabe: "Tajawal", "Noto Sans Arabic", system-ui, sans-serif;

  --page: 1440px;   /* largeur de référence des mesures */
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--blanc);
  color: var(--encre);
  /* L'original rend tout son texte en `antialiased` : sans cette règle, les mêmes polices
     paraissent plus grasses sur macOS/Safari. C'est la cause principale de l'écart perçu. */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: var(--ui);
  overflow-x: hidden;
}

img, video { max-width: 100%; display: block; }

h1, h2, h3, p { margin: 0; }   /* tout l'espacement est posé explicitement, comme dans l'original */

/* ---------- rôles de texte (corps / interlignage / approche mesurés) ---------- */
.t-xl   { font-family: var(--titre); font-weight: var(--titre-graisse); font-size: clamp(26px, 2.8vw, 40px);
          line-height: 1.4;  letter-spacing: -.04em; }
.t-l    { font-family: var(--titre); font-weight: var(--titre-graisse); font-size: clamp(24px, 2.8vw, 40px);
          line-height: 1.3;  letter-spacing: -.03em; color: #000; }  /* noir pur dans l'original */
.t-m    { font-family: var(--titre); font-weight: var(--titre-graisse); font-size: clamp(19px, 1.74vw, 25px);
          line-height: 1.4;  letter-spacing: -.04em; color: var(--encre); }
.s-xl   { font-family: var(--serif); font-weight: 300; font-size: clamp(24px, 2.8vw, 40px);
          line-height: 1.2;  letter-spacing: -.03em; color: var(--texte-75); }
.s-m    { font-family: var(--serif); font-weight: 300; font-size: clamp(17px, 1.39vw, 20px);
          line-height: 1;    letter-spacing: -.03em; color: var(--texte-75); }
.s-s    { font-family: var(--serif); font-weight: 300; font-size: clamp(16px, 1.25vw, 18px);
          line-height: 1;    letter-spacing: -.01em; color: var(--texte-75); }

/* ---------- barre de langues ---------- */
.langues {
  position: absolute; inset-block-start: 25px; inset-inline-start: 56px; z-index: 5;
  display: flex; gap: 32px;
}
.langues a {
  font-family: var(--titre); font-weight: var(--titre-graisse); font-size: 15px; line-height: 30px; letter-spacing: -.013em;
  color: var(--blanc-75); text-decoration: none; transition: color .2s;
}
.langues a:hover        { color: var(--blanc); }
.langues a[aria-current] { color: var(--blanc); }

/* ---------- 1. bandeau d'ouverture ---------- */
.ouverture { position: relative; height: min(717px, 56vw); min-height: 420px; }
.ouverture > img.fond { width: 100%; height: 100%; object-fit: cover; }
.ouverture .logo {
  position: absolute; inset-inline: 0; inset-block-start: 42%;
  width: min(710px, 56vw); height: auto; margin-inline: auto; object-fit: contain;
}

/* ---------- 2. présentation (fond blanc) ---------- */
.presentation { background: var(--blanc); padding-block: clamp(44px, 6.25vw, 90px) 0; }
.bande        { width: min(1052px, 88vw); margin-inline: auto; text-align: center; }
.bande .s-xl  { margin-block-start: 0; }
.bande .s-m   { margin-block-start: 22px; }

/* les 6 atouts : visuel à gauche, liste à droite */
.atouts {
  width: min(1018px, 92vw); margin: clamp(46px, 5.3vw, 76px) auto 0;
  display: grid; grid-template-columns: minmax(0, 405px) minmax(0, 1fr);
  column-gap: 16px; align-items: start;   /* relevé sur l'original : 405 + 16 + 597 = 1018 */
}
.atouts > img { width: 100%; height: auto; aspect-ratio: 405 / 630; object-fit: contain; }
.atouts ul    { list-style: none; margin: 0; padding: 0; }
.atouts li    { display: grid; grid-template-columns: 45px minmax(0, 1fr);
                column-gap: 0; margin-block-end: 30px; row-gap: 10px; }
/* Relevé sur l'original : description 45 px sous son titre (35 de titre + 10 de row-gap),
   et 93 px d'un titre au suivant (+18 de description sur une ligne, +30 de marge). */
.atouts li img { width: 37px; height: 29px; object-fit: contain; grid-row: 1; }
.atouts li .t-m { grid-column: 2; margin: 0; }
.atouts li .s-s { grid-column: 1 / -1; margin: 0 0 0 5px; }  /* relevé : la description
                                        commence 5 px après la puce, pas à son aplomb */   /* l'écart vient du row-gap seul : le cumul des deux
                                                        descendait la description de 10 px de trop */

.benefices { width: min(1052px, 88vw); margin: clamp(12px, 1.25vw, 18px) auto 0;
             padding-block-end: clamp(48px, 6.1vw, 88px); text-align: center; }
.benefices p { margin: 0; }

/* ---------- 3. bloc sombre avec vidéo ---------- */
.sombre { position: relative; background: var(--noir); overflow: hidden;
          padding-block: clamp(78px, 12.6vw, 181px) clamp(73px, 9.3vw, 134px); }
.sombre > video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0; pointer-events: none;
}
.sombre > * { position: relative; z-index: 1; }

.accroche-source { text-align: center; color: var(--blanc); }
.accroche-source img { width: min(388px, 62vw); height: auto; margin: 0 auto 30px; object-fit: contain; }
.accroche-source .t-xl { color: var(--blanc); margin: 0; }
.accroche-source .ordinal { font-size: .55em; vertical-align: super; }

/* ---------- formulaire ---------- */
.carte-form {
  width: min(840px, 92vw); margin: clamp(68px, 9.1vw, 131px) auto 0;
  background: var(--gris-clair); border-radius: 16px; padding: clamp(24px, 3vw, 40px);
}
.carte-form > .t-m { text-align: center; margin: 0 0 30px; }
.grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 20px; }
.champ  { display: flex; flex-direction: column; gap: 9px; }
.pleine-largeur { grid-column: 1 / -1; }   /* vaut pour les champs ET pour le pied de formulaire */
.champ > label {
  font-family: var(--ui); font-weight: 500; font-size: 16px; line-height: 1.2;
  letter-spacing: -.02em; color: var(--noir);
}
.boite {
  background: var(--blanc); border-radius: 10px; border: 1px solid transparent;
  display: flex; align-items: center; transition: border-color .18s;
}
.boite:focus-within { border-color: var(--noir); }
.boite > input, .boite > select, .boite > textarea {
  flex: 1; min-width: 0; width: 100%;
  background: none; border: 0; outline: none; color: var(--noir);
  font-family: var(--ui); font-size: 16px; padding: 10px 20px;
}
.boite > input, .boite > select { height: 50px; }
.boite > textarea { height: 100px; padding-block: 14px; resize: vertical; font-family: var(--ui); }
.boite > select { appearance: none; cursor: pointer;
  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 1l5 5 5-5' fill='none' stroke='%2305080c' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 20px center; padding-inline-end: 46px; }
:where(input, textarea)::placeholder { color: var(--placeholder); }

/* téléphone : indicatif figé + saisie */
.tel { display: flex; align-items: center; gap: 8px; padding-inline-start: 20px; }
.tel .indicatif { font-family: "Inter", var(--ui); font-size: 15px; color: #000; white-space: nowrap; }
.tel .drapeau   { font-family: "Inter", var(--ui); font-size: 18px; }
.tel > input    { padding-inline-start: 8px; }

/* Piège à robots : invisible et hors du parcours clavier. Un humain ne le remplit jamais ;
   le service écarte silencieusement toute demande où il est rempli. */
.piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.pied-form { display: flex; justify-content: flex-end; margin-block-start: 6px; }
.envoyer {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--noir); color: var(--blanc); border: 0; border-radius: 100px;
  padding: 14px 24px; min-height: 52px; cursor: pointer;
  font-family: var(--ui); font-weight: 500; font-size: 16px; letter-spacing: -.02em;
  transition: opacity .18s;
}
.envoyer:hover    { opacity: .85; }
.envoyer:disabled { opacity: .5; cursor: progress; }
.envoyer img      { width: 20px; height: auto; }

.retour-form { margin-block-start: 0; font-family: var(--ui); font-size: 15px; text-align: end; }
.retour-form:empty { display: none; }   /* pas de blanc réservé tant qu'il n'y a rien à dire */
.retour-form.ok     { color: #0b7a4b; }
.retour-form.erreur { color: #b3261e; }

/* ---------- 4. mission ---------- */
.mission { background: var(--gris-clair); padding-block: clamp(70px, 11.88vw, 171px)
            clamp(60px, 13.26vw, 191px); text-align: center; }
.mission .t-xl { margin: 0 0 10px; color: #000; }
.mission .s-xl { width: min(980px, 88vw); margin-inline: auto; }
/* L'original ne coupe PAS ce paragraphe : il coule sur 4 lignes dans 980 px. Les trois segments
   de content/*.json sont donc joints par une espace, à la différence de l'intro et des bénéfices
   qui, eux, portent bien des sauts de ligne (1 et 3 respectivement, relevés sur l'original). */

/* ---------- rubrique engagement / film ----------
   Rubrique ajoutée au site d'origine (demande JB), intercalée entre les bénéfices et le bloc
   sombre. Fond CLAIR volontairement : en sombre elle se confondrait avec le bloc qui suit.

   Elle reprend le schéma exact du bloc d'introduction — surtitre `.t-l`, accroche `.s-xl`,
   paragraphes `.s-m` — donc AUCUNE valeur de police, de corps, d'approche ni de couleur n'est
   définie ici : tout vient des rôles existants. Seuls les espacements et la largeur sont posés. */
.film {
  background: var(--gris-clair); text-align: center;
  padding-block: clamp(56px, 7.3vw, 105px);
}
.film .t-l     { margin: 0 0 14px; }
.film .s-xl    { width: min(900px, 88vw); margin: 0 auto 32px; }
.film .lecteur {
  width: min(848px, 88vw); height: auto; aspect-ratio: 848 / 480;
  margin-inline: auto; border-radius: 12px; background: #000;
}
.film .legende-film { width: min(760px, 88vw); margin: 26px auto 0; }
.film .legende-film + .legende-film { margin-block-start: 16px; }
/* Même exception que pour les petits écrans plus bas : l'original serre l'interligne à 1, ce qui
   ne tient que sur une ligne. Ces paragraphes en font plusieurs, donc on desserre — sans quoi
   le texte devient illisible. */
.film .legende-film { line-height: 1.5; }

/* ---------- arabe ---------- */
/* `justify-content: flex-end` et `text-align: start` se mettent déjà en miroir tout seuls :
   ne rien forcer ici, sous peine d'annuler le miroir. */
[dir="rtl"] .accroche-source .ordinal { vertical-align: baseline; }

/* Aucune des polices latines du site (Montserrat, Spectral, Geist, Inter) n'a de glyphes arabes :
   sans cette règle, toute la page /ar tombe sur une police système indéterminée. */
[lang="ar"] .t-xl, [lang="ar"] .t-l, [lang="ar"] .t-m,
[lang="ar"] .s-xl, [lang="ar"] .s-m, [lang="ar"] .s-s,
[lang="ar"] .langues a, [lang="ar"] .champ > label,
[lang="ar"] .boite > input, [lang="ar"] .boite > select, [lang="ar"] .boite > textarea,
[lang="ar"] .envoyer, [lang="ar"] .retour-form { font-family: var(--arabe); }
/* l'arabe n'a pas de capitales : l'approche négative des titres latins le dessert */
[lang="ar"] .t-xl, [lang="ar"] .t-l, [lang="ar"] .t-m { letter-spacing: 0; }

/* ---------- logo à baseline composée ----------
   La baseline arabe incrustée dans logo-ar.png est illisible (lettres détachées, ordre inversé).
   On ne montre donc que la zone du monogramme et on recompose la baseline en vrai texte.
   Les proportions viennent de `tools/profil-alpha.py` et sont posées en style inline par le
   générateur, image par image. */
.logo-compose      { width: min(710px, 56vw); margin-inline: auto; }
.logo-compose .vue { overflow: hidden; }          /* rogne le bas de l'image, hauteur comprise */
.logo-compose .vue img { width: 100%; height: auto; display: block; }
.logo-compose .baseline {
  margin: 0; text-align: center; color: var(--blanc);
  font-family: var(--arabe); font-weight: 300; line-height: 1;
}

/* ---------- apparition au défilement (équivalent des « appear animations » Framer) ---------- */
/* Le masquage n'est posé QUE si JavaScript tourne (classe .js ajoutée par site.js).
   Sans JS — ou si le script casse — tout le contenu reste visible. */
@media (prefers-reduced-motion: no-preference) {
  .js .apparait    { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
  .js .apparait.vu { opacity: 1; transform: none; }
}

/* ---------- petits écrans ---------- */
@media (max-width: 1100px) {
  /* l'original serre l'interligne à 1 ; c'est tenable tant que chaque phrase tient sur une ligne.
     Dès que ça passe à la ligne, on desserre — sinon le texte devient illisible. */
  .s-m, .s-s { line-height: 1.45; }
}

@media (max-width: 900px) {
  .atouts  { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .atouts > img { max-width: 300px; }
  .grille  { grid-template-columns: minmax(0, 1fr); }
  .langues { inset-inline-start: 20px; gap: 22px; }
  .pied-form { justify-content: stretch; }
  .envoyer { width: 100%; justify-content: center; }
}