/* ============================================================ LE SITE EN TROIS ÉCRANS
   Cinquième version, 12 septembre 2026, et celle que Fabrice a validée dans son
   principe : « J'aime bien l'idée. » Trois écrans, sans défilement.

   1. LE VRAI FORMAT ENGAGE DANS SON IPHONE, pas une imitation plein écran. Le
      rendu est celui d'Engage, chargé depuis Engage ; à côté, une baseline forte,
      le bénéfice en deux phrases, et une seule consigne : répondre.
   2. ATLAS EN UNE QUESTION, UNE RÉPONSE, UN BOUTON. Autre univers de couleur.
   3. LE CONTACT, « parfait, j'adore » : on n'y touche pas.

   Ce qui a sauté : l'écran Self / Managed, « tout le monde s'en fout ».
   -------------------------------------------------------------------------- */
:root{
  --encre:#111318;
  --indigo:#5A63E8;
  --noir:#0B0B0E;
  --orange:#E8842A;                /* le bouton de la création BMW, repris tel quel */
  --duree:.55s;
}

*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  font-family:Figtree,Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:15px;line-height:1.5;color:#fff;background:var(--noir);
  -webkit-font-smoothing:antialiased;
  /* PAS DE DÉFILEMENT. Toute la page tient dans la fenêtre. */
  overflow:hidden;height:100svh;
}
@media (prefers-reduced-motion:reduce){
  *{transition-duration:.01ms!important;animation-duration:.01ms!important}
}

/* ===================================================================== LE FOND
   Un fond par écran : l'indigo à halos de la démo d'Engage, le noir à halos des
   outils pour Atlas, le blanc pour se parler. Ils se fondent l'un dans l'autre. */
.fond{position:fixed;inset:0;z-index:0;opacity:0;
  transition:opacity var(--duree) ease;pointer-events:none}
.fond.on{opacity:1}
.fond.indigo{background:var(--indigo);
  background-image:radial-gradient(1100px 720px at 66% -8%,rgba(255,255,255,.20),transparent 62%),
    radial-gradient(820px 560px at 0% 104%,rgba(255,255,255,.14),transparent 60%)}
.fond.noir{background:var(--noir);
  background-image:radial-gradient(1100px 720px at 64% -6%,rgba(255,255,255,.10),transparent 62%),
    radial-gradient(820px 560px at 2% 104%,rgba(255,255,255,.12),transparent 60%)}
.fond.blanc{background:#fff;
  background-image:radial-gradient(60% 46% at 50% 108%,rgba(255,186,120,.34),
    rgba(255,206,158,.16) 55%,transparent 100%)}
body[data-ton="clair"]{color:var(--encre)}

/* ==================================================================== L'EN-TÊTE
   Le mot-symbole et l'adresse mail, du premier écran au dernier. */
.haut{position:fixed;top:0;left:0;right:0;z-index:5;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:22px 28px}
/* LE MOT-SYMBOLE, SEUL. Trois essais de contexte dans l'en-tête ont été renvoyés
   (une ligne sous le logo, des logos qui se relaient, une baseline qui tourne) : le
   contexte a maintenant sa porte, « Qui sommes-nous », et l'en-tête ne porte plus
   que la marque. Le mot-symbole noir garde 48 % de vide dans son fichier, le blanc
   aucun : 26 px pour l'un, 50 pour l'autre, et les lettres ont la même hauteur. */
.marque-t > a{display:block;line-height:0}
.marque-t img{height:26px;width:auto;display:block}
.marque-t .mk-noir{display:none;height:50px}
body[data-ton="clair"] .marque-t .mk-blanc{display:none}
body[data-ton="clair"] .marque-t .mk-noir{display:block}
/* La porte du contexte : un lien texte, dans la rangée de droite. */
.qui-b{background:none;border:0;padding:8px 10px;cursor:pointer;font:inherit;
  font-size:13.5px;font-weight:600;color:rgba(255,255,255,.78);transition:color .14s}
.qui-b:hover{color:#fff}
body[data-ton="clair"] .qui-b{color:#5B5F6E}
body[data-ton="clair"] .qui-b:hover{color:var(--encre)}
.bas-qui{display:none}
.haut-d{display:flex;align-items:center;gap:8px}
.mail{display:inline-flex;align-items:center;height:38px;padding:0 16px;
  border-radius:999px;text-decoration:none;font-size:13.5px;font-weight:600;
  color:#fff;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.26);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:background .16s}
.mail:hover{background:rgba(255,255,255,.24)}
/* L'enveloppe n'apparaît que sur un téléphone, où l'adresse en toutes lettres ne
   tient plus à côté du mot-symbole long. */
.mail svg{display:none;width:17px;height:17px;stroke:currentColor;stroke-width:1.8;fill:none;
  stroke-linecap:round;stroke-linejoin:round}
.lang{display:inline-flex;align-items:center;justify-content:center;height:38px;
  min-width:44px;padding:0 12px;border-radius:999px;text-decoration:none;
  font-size:12.5px;font-weight:700;color:#fff;border:1px solid rgba(255,255,255,.26);
  transition:background .16s}
.lang:hover{background:rgba(255,255,255,.14)}
body[data-ton="clair"] .mail,body[data-ton="clair"] .lang{
  color:var(--encre);background:rgba(17,19,24,.06);border-color:rgba(17,19,24,.16)}
body[data-ton="clair"] .mail:hover,body[data-ton="clair"] .lang:hover{
  background:rgba(17,19,24,.12)}

/* ===================================================================== LA SCÈNE */
.scene{position:relative;z-index:2;height:100%;display:grid;place-items:center;
  padding:88px 28px 84px}
.etape{grid-area:1/1;width:min(1120px,100%);display:flex;flex-direction:column;
  align-items:center;gap:22px;text-align:center;
  opacity:0;transform:translateY(28px);pointer-events:none;
  transition:opacity var(--duree) ease,transform var(--duree) cubic-bezier(.2,.8,.2,1)}
.etape.on{opacity:1;transform:none;pointer-events:auto}
.etape.parti{opacity:0;transform:translateY(-28px)}

/* Le surtitre, le titre, le paragraphe : les trois pièces de chaque écran. */
.sur{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.62)}
body[data-ton="clair"] .sur{color:#8B8EA0}
.q{margin:0;font-family:"Bricolage Grotesque",Figtree,sans-serif;font-weight:600;
  font-size:clamp(30px,4.4vw,56px);line-height:1.04;letter-spacing:-.03em;text-wrap:balance}
.p{margin:0;font-size:clamp(15px,1.4vw,18px);line-height:1.6;color:rgba(255,255,255,.80);
  max-width:46ch}
.p b{color:#fff;font-weight:700}
body[data-ton="clair"] .p{color:#5B5F6E}
body[data-ton="clair"] .p b{color:var(--encre)}

/* -------------------------------------------------------------------- boutons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  height:50px;padding:0 26px;border-radius:999px;text-decoration:none;border:0;
  cursor:pointer;font:inherit;font-size:15px;font-weight:640;letter-spacing:-.01em;
  background:var(--encre);color:#fff;transition:transform .14s,background .14s,filter .14s}
.btn:hover{transform:translateY(-1px);background:#2A2D36}
.btn:focus-visible{outline:2px solid #fff;outline-offset:3px}
.btn.clair{background:#fff;color:var(--encre);box-shadow:inset 0 0 0 1.5px #E4E5EC}
.btn.clair:hover{background:#F6F6F9}
/* L'orange du format : le bouton qui fait avancer porte la couleur du bouton de la
   création, pour qu'on comprenne qu'il fait la même chose. */
.btn.orange{background:var(--orange);color:#fff}
.btn.orange:hover{background:var(--orange);filter:brightness(1.06)}
/* Le rouge YouTube, sur l'écran qui parle de YouTube : le bouton prend la couleur
   de la marque posée juste au-dessus, comme l'orange prend celle du format. */
.btn.rouge{background:#FF0000;color:#fff}
.btn.rouge:hover{background:#FF0000;filter:brightness(1.08)}
.btn svg{width:16px;height:16px;stroke:currentColor;stroke-width:2.2;fill:none;
  stroke-linecap:round;stroke-linejoin:round}

/* ============================================================== 1. LE FORMAT
   Le texte à gauche, aligné à gauche, le téléphone à droite : les deux se
   regardent. Le téléphone prend la hauteur qu'on lui laisse, jamais plus. */
.format{display:grid;grid-template-columns:1fr auto;gap:clamp(28px,5vw,84px);
  align-items:center;text-align:left;justify-items:start;max-width:1040px}
/* PAS DE LARGEUR MAXIMALE SUR LA COLONNE : 44ch se mesurait dans le corps de 15 px
   de la colonne, soit 375 px, et c'est elle qui cassait le titre en quatre lignes,
   pas le corps du titre. Le paragraphe garde sa propre mesure. */
.format .texte{display:flex;flex-direction:column;align-items:flex-start;gap:18px}
/* CHAQUE PHRASE SUR SA LIGNE. « Posez une question. » fait dix-neuf caracteres en
   Bricolage 600, une graisse large : a 56 px elle ne tenait pas dans la colonne et
   les deux phrases se cassaient en quatre lignes. Le corps descend a 50 px et la
   largeur suit la colonne ; le <br> du texte fait le reste. */
.format .q{max-width:none;font-size:clamp(30px,3.9vw,50px)}
/* DEUX PHRASES, DEUX TONS. « Une question. Vos futurs acheteurs. » se lisait d'un
   trait ; la seconde phrase passe dans le blanc des surtitres, et l'on voit qu'il y
   a une cause et un effet. */
.format .q em{font-style:normal;color:rgba(255,255,255,.72)}
/* LA CONSIGNE. Une seule, et elle pointe le téléphone. Elle disparaît dès qu'on a
   répondu, remplacée par la phrase d'après et le bouton. */
.consigne{margin:6px 0 0;display:inline-flex;align-items:center;gap:10px;
  font-size:15px;font-weight:700;color:#fff;
  padding:12px 18px;border-radius:999px;background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.28);
  animation:respire 2.2s ease-in-out infinite}
.consigne svg{width:16px;height:16px;stroke:currentColor;stroke-width:2.2;fill:none;
  stroke-linecap:round;stroke-linejoin:round}
.consigne[hidden]{display:none}
@keyframes respire{0%,100%{transform:translateX(0)}50%{transform:translateX(6px)}}
.apres{display:flex;flex-direction:column;align-items:flex-start;gap:18px;
  animation:monte .5s cubic-bezier(.2,.8,.2,1) both}
.apres[hidden]{display:none}
@keyframes monte{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* LE TÉLÉPHONE D'ENGAGE. Mêmes proportions et même zone que dans sa démo : le
   rendu fait 1038 x 2061, la page du navigateur occupe la fenêtre ci-dessous, et
   l'aperçu se pose dedans, par-dessus l'écran blanc du rendu. */
.tel{position:relative;height:min(74svh,720px);aspect-ratio:1038/2061;flex:none}
.tel img.ch{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:1;
  filter:drop-shadow(0 34px 60px rgba(6,8,30,.45))}
.tel .zo{position:absolute;overflow:hidden;background:#fff;z-index:2;
  left:4.0462%;top:8.2484%;width:91.9075%;height:74.9636%}
.tel iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:none}

/* ================================================================ 2. ATLAS
   Une colonne centrée : surtitre, question, la marque YouTube, la réponse en deux
   temps, le bouton. Les seize disques d'univers sont partis, « ces logos
   horribles ». */
.atlas{gap:18px;max-width:760px}
.atlas .p{max-width:58ch}
.atlas .q{max-width:18ch}
/* La marque YouTube, le fichier officiel : nom en blanc, pictogramme rouge, fait
   pour un fond sombre. Une hauteur, et la largeur suit. */
.marque{height:36px;width:auto;display:block;margin:6px 0 4px;
  filter:drop-shadow(0 8px 24px rgba(255,0,0,.28))}
.p.grand{font-size:clamp(17px,1.7vw,21px);color:#fff}
.atlas .btn{margin-top:8px}

/* ============================================================== 3. LE CONTACT */
.fin{gap:22px;max-width:760px}
.fin .q{max-width:16ch}
.fin .sous{margin:0;font-size:17px;line-height:1.55;color:#5B5F6E;max-width:44ch}
.actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:6px}
.rappel{display:flex;align-items:center;gap:6px;width:min(440px,100%);margin-top:10px;
  padding:6px 6px 6px 18px;border-radius:999px;background:#fff;
  box-shadow:inset 0 0 0 1.5px #E4E5EC;transition:box-shadow .14s}
.rappel:focus-within{box-shadow:inset 0 0 0 1.5px var(--encre)}
.rappel input{flex:1;min-width:0;border:0;outline:0;background:transparent;
  font:inherit;font-size:15px;color:var(--encre)}
.rappel input::placeholder{color:#9A9DAC}
.rappel button{flex:none;height:40px;padding:0 18px;border:0;border-radius:999px;
  background:var(--indigo);color:#fff;cursor:pointer;font:inherit;font-size:14px;
  font-weight:640;transition:background .14s}
.rappel button:hover{background:#4A53DA}
.rappel button[disabled]{opacity:.6;cursor:progress}
.dit{margin:0;font-size:13.5px;font-weight:560;min-height:20px;color:#14663E}
.dit.ko{color:#8A5A12}
/* LES CLIENTS : vingt-et-un logos noirs, petits, sur une ou deux lignes, sous un
   libellé gris. Les fichiers font 96 px : on les montre à 44, jamais plus grands,
   sinon ils flouteraient sur un écran dense. */
.clients{margin:22px 0 0;display:flex;flex-direction:column;align-items:center;gap:14px;
  width:min(720px,100%)}
.clients-t{font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:#A0A4B4}
.clients-l{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 14px}
.clients-l img{width:44px;height:44px;display:block;opacity:.72;transition:opacity .16s}
.clients-l img:hover{opacity:1}

/* ====================================================================== LE BAS */
.bas{position:fixed;left:0;right:0;bottom:0;z-index:5;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:22px 28px}
.pas{display:flex;gap:6px}
.pas i{display:block;width:34px;height:3px;border-radius:99px;
  background:rgba(255,255,255,.28);transition:background .3s}
.pas i.fait{background:#fff}
body[data-ton="clair"] .pas i{background:rgba(17,19,24,.14)}
body[data-ton="clair"] .pas i.fait{background:var(--encre)}
.passer{background:none;border:0;padding:8px 0;cursor:pointer;font:inherit;
  font-size:13.5px;font-weight:560;color:rgba(255,255,255,.72);
  display:inline-flex;align-items:center;gap:6px;transition:color .14s}
.passer:hover{color:#fff}
.passer svg{width:14px;height:14px;stroke:currentColor;stroke-width:2;fill:none;
  stroke-linecap:round;stroke-linejoin:round}
.passer[hidden]{display:none}
body[data-ton="clair"] .passer{color:#8B8EA0}
body[data-ton="clair"] .passer:hover{color:var(--encre)}
.outils,.confid{font-size:12.5px;text-decoration:none;color:rgba(255,255,255,.45)}
.outils:hover,.confid:hover{color:#fff}
body[data-ton="clair"] .outils,body[data-ton="clair"] .confid{color:#B0B3C0}
body[data-ton="clair"] .outils:hover,body[data-ton="clair"] .confid:hover{color:var(--encre)}
.bas-d{display:flex;align-items:center;gap:18px}

/* ------------------------------------------------------------- écrans étroits
   Sur un téléphone, le texte passe au-dessus, court, et le vrai téléphone prend
   le reste de la hauteur. */
@media (max-width:840px){
  .scene{padding:84px 20px 74px}
  .sur{font-size:10.5px;letter-spacing:.12em}
  /* SUR UN TELEPHONE, LE TELEPHONE PREND LA PLACE QUI RESTE, ET PAS UN PIXEL DE
     PLUS. Il avait une hauteur fixe en fraction de l'ecran ; avec la barre du
     navigateur, la sienne, le texte au-dessus et la barre du bas de la page, la
     somme depassait, et « Qui sommes-nous / Passer au contact » passaient sur son
     chassis. La colonne devient une pile de toute la hauteur : le texte garde la
     sienne, le telephone se fait a ce qu'il reste, et sa largeur suit son ratio. */
  /* La rangee de la grille est BORNEE a la hauteur de la scene : sans cela elle se
     dimensionne sur son contenu, « height:100% » ne vaut rien, et le telephone
     garde sa taille quelle que soit la fenetre. */
  .scene{grid-template-rows:minmax(0,1fr)}
  .etape{height:100%;min-height:0}
  .format{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
    height:100%;min-height:0;text-align:center;gap:12px}
  .format .texte{flex:none;align-items:center;gap:10px}
  .format .q{font-size:clamp(24px,6.6vw,32px)}
  .format .p{display:none}
  .apres{align-items:center}
  .tel{flex:1 1 0;min-height:160px;height:auto;width:auto;max-height:60svh}
  .haut{padding:18px 20px}
  /* Sur 375 px : le mot-symbole, la puce, la baseline, l'EN et une enveloppe. Le
     tout tient si la baseline reste courte et l'adresse devient une icone ; elle
     est ecrite en toutes lettres sur le dernier ecran. */
  .marque-t img{height:22px}
  .marque-t .mk-noir{height:42px}
  /* Sur un telephone, « Qui sommes-nous » quitte l'en-tete, trop etroit, et passe
     dans la barre du bas a cote de « Passer au contact ». */
  .haut .qui-b{display:none}
  .bas-qui{display:inline-flex;font-size:12.5px;padding:8px 0;white-space:nowrap}
  .passer{font-size:12.5px;white-space:nowrap}
  .bas-d{gap:14px}
  .mail{width:38px;padding:0;justify-content:center}
  .mail span{display:none}
  .mail svg{display:block}
  .bas{padding:18px 20px}
  .pas i{width:26px}
  .outils,.confid{display:none}
  .actions .btn{width:100%}
  .clients-l img{width:36px;height:36px}
  .clients-l{gap:8px 10px}
  .marque{height:27px}
}

/* ================================================================ QUI SOMMES-NOUS
   Un panneau par-dessus le format : un voile sombre, une carte blanche, le texte,
   une croix. Il s'ouvre depuis l'en-tête ou la barre du bas, se ferme d'un clic à
   côté ou d'Échap, et ne touche à rien de ce qui est derrière. */
.qui{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:24px}
.qui[hidden]{display:none}
.qui-v{position:absolute;inset:0;background:rgba(8,10,24,.55);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.qui-c{position:relative;width:min(640px,100%);max-height:calc(100svh - 48px);overflow:auto;
  background:#fff;color:var(--encre);border-radius:26px;padding:40px 44px 38px;
  box-shadow:0 50px 100px -40px rgba(0,0,0,.6);text-align:left;
  animation:monte .4s cubic-bezier(.2,.8,.2,1) both}
.qui-c .q{font-size:clamp(28px,3.4vw,40px);text-wrap:balance;margin-bottom:18px}
.qui-corps p{margin:0 0 14px;font-size:16px;line-height:1.6;color:#4A4E5E}
.qui-corps p b{color:var(--encre);font-weight:700}
.qui-corps p:last-child{margin-bottom:0}
.qui-x{position:absolute;top:16px;right:16px;width:38px;height:38px;border:0;border-radius:999px;
  background:#F1F1F5;color:var(--encre);font-size:22px;line-height:1;cursor:pointer;
  display:grid;place-items:center;transition:background .14s}
.qui-x:hover{background:#E4E5EC}
@media (max-width:640px){
  .qui{padding:0;align-items:end}
  .qui-c{max-height:88svh;border-radius:24px 24px 0 0;padding:34px 24px 40px}
}