/* ============================================================ 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;
  /* L'INDIGO A ÉTÉ ASSOMBRI le 13 septembre 2026, de #5A63E8 à #4A52D4, et c'est le
     seul changement de charte de cette passe. Raison : sur l'ancien, même du blanc
     PUR ne donnait que 4,79:1, et 4,15:1 là où le halo éclaircit le fond, sous le
     seuil AA de 4,5. Aucune opacité de blanc ne pouvait rattraper cela ; seul le
     fond pouvait bouger. Sur le nouveau, le blanc pur donne 5,8:1 en plein et
     4,9:1 au cœur du halo. L'écart se voit à peine côte à côte. */
  --indigo:#4A52D4;
  --noir:#0B0B0E;
  --orange:#E8842A;                /* le bouton de la création BMW, repris tel quel */
  /* Le rouge de la marque YouTube est #FF0000, mais du blanc dessus ne fait que
     4,0:1. Celui-ci en donne 5,0 et reste le même rouge à l'œil. */
  --rouge:#E00000;

  /* LES GRIS SONT UNE SEULE ÉCHELLE, celle de l'encre, et non douze valeurs
     écrites à la main. Avant cette passe, la feuille portait cinq hexadécimaux et
     six réécritures de l'encre en rgba, plus trois quasi-noirs différents dont
     aucun ne valait --noir. */
  --gris-1:#2A2D36;                /* survol du bouton sombre */
  --gris-2:#4A4E5E;
  --gris-3:#5B5F6E;
  --gris-4:#65697A;                /* 5,45:1 sur blanc, 4,58:1 au coeur du halo orange */
  --trait:#E4E5EC;                 /* bordures claires */
  --creme:#F1F1F5;
  --creme-2:#F6F6F9;
  --ombre:rgba(17,19,24,.5);       /* l'encre, en transparence */
  --indigo-f:#3E45BE;              /* l'indigo au survol */
  --vert:#14663E;                  /* ce qui a marché, 7,0:1 sur blanc */
  --brun:#8A5A12;                  /* ce qui n'a pas marché, 5,9:1 sur blanc */
  --voile:rgba(11,11,14,.62);      /* le voile du panneau, dérivé de --noir */
  --duree:.55s;
}

/* LES TAILLES DE TEXTE SONT EN REM, et non en pixels, depuis le 13 septembre 2026 :
   une personne qui agrandit la police par défaut de son navigateur voyait le site
   ignorer son réglage. Les espacements, eux, restent en pixels : ce sont des
   distances de mise en page, pas du texte, et elles doivent tenir quand le texte
   grandit. Les écrans défilent en eux-mêmes si le texte ne tient plus. */
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  font-family:Figtree,Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:0.9375rem;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;
}
/* MOINS DE MOUVEMENT N'EST PAS AUCUN MOUVEMENT. Tout couper à 0,01 ms supprimait
   aussi la pilule qui respire, seul indice disant OÙ répondre, et le visiteur qui
   demande moins d'animation se retrouvait sans repère. Ici les fondus restent,
   très courts ; seuls les mouvements répétés et les déplacements s'arrêtent. */
@media (prefers-reduced-motion:reduce){
  *{animation-iteration-count:1!important}
  .etape,.fond{transition-duration:.12s!important}
  .btn,.consigne,.qui-x,.pas i,.rappel{transition-duration:.08s!important}
  .etape.parti{transform:none!important}
  .apres,.qui-c{animation-duration:.12s!important}
  /* La consigne ne bouge plus, sa flèche reste et le contour la désigne. */
  .consigne svg{animation:none!important;transform:none!important}
  /* Les effets repris d'Aceternity s'arretent aussi : les voiles se figent la ou
     ils sont, le titre parait d'un coup, la bordure ne tourne plus. Le halo du
     curseur, lui, ne bouge que quand la main bouge : il reste. */
  .voile{animation:none!important}
  .q.ecrit .mot{animation-duration:.01s!important;animation-delay:0s!important}
  .vif::before{animation:none!important}
  .consigne{box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.9)}
}

/* ===================================================================== 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;overflow:hidden;
  transition:opacity var(--duree) ease;pointer-events:none}
.fond.on{opacity:1}
/* Les halos sont passés de 20 % et 14 % de blanc à 12 % et 8 %, puis le halo du
   HAUT de 12 à 8 % le 13 septembre au soir : c'est exactement sous lui que vit
   hello@tags.media dans l'en-tête, et le blanc n'y faisait que 4,14:1. Un halo se
   règle sur le texte le plus mal placé qu'il éclaire, pas sur l'effet voulu. */
.fond.indigo{background:var(--indigo);
  background-image:radial-gradient(1100px 720px at 66% -8%,rgba(255,255,255,.08),transparent 62%),
    radial-gradient(820px 560px at 0% 104%,rgba(255,255,255,.08),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%)}

/* ------------------------------------------------------------ LE FOND QUI VIT
   Trois voiles derivent lentement derriere le texte. L'effet vient d'Aceternity UI,
   une bibliotheque React : il est reecrit ici en CSS pur, sans React, sans Tailwind
   et sans Motion, parce que ce site n'a pas de build et ne doit pas en avoir un.
   Un halo qui suivait le curseur sur l'ecran d'Atlas l'accompagnait ; retire le
   13 septembre 2026, il ne servait a rien.

   CE QU'ILS NE FONT PAS : eclaircir le fond sous le texte. La version d'origine
   empile des voiles clairs en « screen » ; mesure faite sur notre indigo, le texte
   courant tombait a 3,07:1 sous un seul voile et a 2,00:1 la ou deux se croisent,
   contre 4,74:1 sans rien. Sur l'indigo les trois voiles sont donc PLUS SOMBRES
   que le fond, et cela se VERIFIE par leur luminance, pas par leur nom : 0,079
   pour le violet, 0,099 pour le bleu roi et 0,060 pour la prune, contre 0,122
   pour l'indigo. La teinte derive du violet au bleu roi, la clarte ne monte jamais,
   et le pire point remonte a 4,95:1. Sur le noir, qui part de 15,60:1, ils peuvent
   eclaircir, mais pas sans mesure : a 30 % le croisement de deux voiles descendait
   a 4,03:1 ; ces valeurs-ci tiennent 5,38:1.

   RIEN SUR LE BLANC. Sur un fond clair un voile ne peut qu'assombrir, donc manger
   le contraste d'un texte sombre, et cet ecran n'a plus de marge : le surtitre y
   est a 4,58:1 au coeur du halo orange, seuil 4,50. */
/* RIEN NE TOURNE DERRIERE UN ECRAN QU'ON NE VOIT PAS. Les six voiles existent en
   permanence, un jeu par fond ; seuls ceux du fond affiche s'animent et occupent
   une couche de la carte graphique. Les autres sont en pause, sans « will-change »,
   donc sans memoire reservee pour rien. */
.voile{position:absolute;inset:-25%;--t:28s;
  transform:translate3d(0,0,0);
  animation:derive var(--t) ease-in-out infinite alternate;
  animation-play-state:paused}
.fond.on .voile{animation-play-state:running;will-change:transform}
.v2{animation-direction:alternate-reverse}
/* On n'anime que « transform » : la carte graphique recompose les couches sans
   repeindre une seule ligne de texte. Une position de fond animee, elle, aurait
   fait repeindre tout l'ecran soixante fois par seconde. */
@keyframes derive{
  from{transform:translate3d(-4%,-3%,0) scale(1)}
  to{transform:translate3d(5%,4%,0) scale(1.14)}}
.fond.indigo .v1{--t:24s;
  background:radial-gradient(38% 46% at 24% 28%,rgba(75,49,200,.42),transparent 68%)}
/* LE VOILE BLEU ROI A ETE RATTRAPE LE 13 SEPTEMBRE AU SOIR, de rgb(44,100,224) a
   rgb(36,86,206). Il avait ete choisi le matin comme « plus sombre que le fond », et
   il l'etait : sur l'ANCIEN indigo. L'indigo a ete assombri dans la meme journee,
   #5A63E8 puis #4A52D4, et le voile est passe du bon cote sans que personne le voie
   (luminance 0,150 contre 0,122 pour le fond) : il ECLAIRCISSAIT desormais la zone
   ou vit l'adresse de l'en-tete.
   LA LECON : un voile n'est pas sombre en soi, il l'est PAR RAPPORT a son fond.
   Deplacer le fond retourne la regle sans toucher a l'effet, et rien ne previent. */
.fond.indigo .v2{--t:31s;
  background:radial-gradient(34% 40% at 76% 22%,rgba(36,86,206,.34),transparent 66%)}
.fond.indigo .v3{--t:38s;
  background:radial-gradient(42% 38% at 62% 88%,rgba(85,48,143,.30),transparent 70%)}
.fond.noir .v1{--t:24s;
  background:radial-gradient(38% 46% at 24% 28%,rgba(146,162,255,.22),transparent 68%)}
.fond.noir .v2{--t:31s;
  background:radial-gradient(34% 40% at 76% 22%,rgba(255,255,255,.16),transparent 66%)}
.fond.noir .v3{--t:38s;
  background:radial-gradient(42% 38% at 62% 88%,rgba(232,132,42,.16),transparent 70%)}

body[data-ton="clair"]{color:var(--encre)}

/* ==================================================================== L'EN-TÊTE
   Le mot-symbole et l'adresse mail, du premier écran au dernier. */
/* LA ZONE SURE DE L'IPHONE. La page est declaree « viewport-fit=cover » : elle
   s'etend donc sous l'encoche et sous la barre d'accueil, et sans ces marges la
   barre du bas passe derriere le trait blanc de l'iPhone, en paysage comme des que
   Safari replie sa propre barre. */
.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;
  padding-top:max(22px,env(safe-area-inset-top));
  padding-left:max(28px,env(safe-area-inset-left));
  padding-right:max(28px,env(safe-area-inset-right))}
/* 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. */
/* LE LIEN DU MOT-SYMBOLE A UNE ZONE DE 44 px, pour une image qui en fait 26. Il
   n'en faisait que 22 sur telephone, sous le minimum de 24 px que WCAG 2.2 demande
   en AA (2.5.8) : c'est le lien du retour a l'accueil, et il se visait au pixel.
   L'en-tete ne grandit pas pour autant, l'adresse mail et la langue a cote font
   deja 44 px de haut. */
.marque-t > a{display:flex;align-items:center;min-height:44px;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:0 10px;min-height:44px;cursor:pointer;font:inherit;
  display:inline-flex;align-items:center;
  font-size:0.84375rem;font-weight:600;color:#fff;transition:color .14s}
.qui-b:hover{color:#fff}
body[data-ton="clair"] .qui-b{color:var(--gris-2)}
body[data-ton="clair"] .qui-b:hover{color:var(--encre)}
.haut .qui-b{margin-left:auto}   /* a droite sur bureau, contre le groupe ; au centre sur telephone, plus bas */
.haut-d{display:flex;align-items:center;gap:8px}
.mail{display:inline-flex;align-items:center;height:44px;padding:0 18px;
  border-radius:999px;text-decoration:none;font-size:0.84375rem;font-weight:600;
/* LE VERRE DE CETTE PILULE ETAIT BLANC, et c'est ce qui rendait sa propre adresse
   illisible : 4,33:1 pour du blanc pur, sous le seuil AA de 4,5. Un voile pose sur
   un fond de clarte moyenne doit jouer l'OMBRE, jamais la clarte ; le halo du haut
   passe justement ici. La bordure claire garde l'arete, le verre s'assombrit. */
  color:#fff;background:rgba(20,22,51,.22);border:1px solid rgba(255,255,255,.34);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:background .16s}
.mail:hover{background:rgba(20,22,51,.34)}
/* 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:44px;min-width:44px;
  min-width:44px;padding:0 12px;border-radius:999px;text-decoration:none;
  font-size:0.78125rem;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}
/* CHAQUE ÉCRAN PEUT DÉFILER EN LUI-MÊME. La page, elle, ne défile pas : c'est le
   principe du site. Mais « pas de défilement » ne doit jamais vouloir dire « du
   texte coupé et inatteignable », ce qui arrivait en paysage court, à forte taille
   de police, ou dès qu'un texte s'allongeait. Le débordement était silencieux. */
.etape{grid-area:1/1;width:min(1120px,100%);display:flex;flex-direction:column;
  align-items:center;gap:22px;text-align:center;
  max-height:100%;
  opacity:0;transform:translateY(28px);pointer-events:none;
  transition:opacity var(--duree) ease,transform var(--duree) cubic-bezier(.2,.8,.2,1)}
/* Le défilement n'est ARMÉ QUE S'IL SERT : une classe posée par le script quand le
   contenu dépasse vraiment. Le poser d'office rognait l'ombre portée du téléphone,
   qui déborde de sa boîte, et laissait une arête grise sous le châssis. */
.etape.deborde{overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
.etape.deborde::-webkit-scrollbar{width:6px}
.etape.deborde::-webkit-scrollbar-thumb{background:rgba(255,255,255,.28);border-radius:99px}
body[data-ton="clair"] .etape.deborde::-webkit-scrollbar-thumb{background:rgba(17,19,24,.2)}
.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. */
/* Les opacites des textes secondaires sont relevees le 13 septembre 2026 : a 62 %
   sur indigo, le surtitre faisait 2,8:1 de contraste, sous le seuil de lecture au
   soleil. 78 % pour les surtitres, 90 % pour les paragraphes, 70 % pour le bas. */
/* BLANC PLEIN pour tout ce qui est petit sur l'indigo. Le 13 septembre, une passe
   avait monté les opacités de 62 % à 78 % en annonçant la correction faite : mesuré,
   cela donnait 3,58:1, toujours sous le seuil AA. La transparence ne pouvait pas y
   arriver, c'est le fond qui a bougé (voir --indigo) et le texte qui est devenu
   plein. Mesuré après coup : 5,8:1 en plein fond, 4,9:1 au cœur du halo. */
.sur{font-size:0.75rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:#fff}
body[data-ton="clair"] .sur{color:var(--gris-4)}
.q{margin:0;font-family:"Bricolage Grotesque",Figtree,sans-serif;font-weight:600;
  font-size:clamp(1.875rem,4.4vw,3.5rem);line-height:1.04;letter-spacing:-.03em;text-wrap:balance}
/* LE TITRE S'ECRIT, MOT A MOT. Repris du « Text Generate Effect » d'Aceternity.
   Le texte entier est dans la page des le depart : site.js ne fait que l'entourer
   de balises, si bien qu'un robot, un lecteur d'ecran et le copier-coller voient
   la phrase complete. Seule la peinture est differee.
   LISIBLE PAR DEFAUT : l'opacite nulle vit dans l'image de depart de l'animation,
   pas sur le mot. Un mot rendu transparent puis rallume par une classe reste
   invisible partout ou la classe n'arrive pas, et c'est le titre qu'on perd. */
.mot{display:inline-block}
.q.ecrit .mot{animation:paraitre .5s cubic-bezier(.2,.8,.2,1) both;
  animation-delay:calc(var(--i) * .07s)}
@keyframes paraitre{
  from{opacity:0;filter:blur(6px);transform:translateY(6px)}
  to{opacity:1;filter:blur(0);transform:none}}
.p{margin:0;font-size:clamp(0.9375rem,1.4vw,1.125rem);line-height:1.6;color:#fff;
  max-width:46ch}
.p b{color:#fff;font-weight:700}
body[data-ton="clair"] .p{color:var(--gris-3)}
body[data-ton="clair"] .p b{color:var(--encre)}

/* -------------------------------------------------------------------- boutons */
/* « flex:none » : sur un ecran de 320 px de large, l'ecran d'Atlas deborde en
   hauteur, et le bouton, dernier d'une colonne flex, se faisait ecraser de 50 px a
   23. L'action principale de l'ecran devenait intouchable au doigt. Une hauteur
   posee ne protege pas d'un retrait : il faut le dire. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  flex:none;height:50px;padding:0 26px;border-radius:999px;text-decoration:none;border:0;
  cursor:pointer;font:inherit;font-size:0.9375rem;font-weight:640;letter-spacing:-.01em;
  background:var(--encre);color:#fff;transition:transform .14s,background .14s,filter .14s}
.btn:hover{transform:translateY(-1px);background:var(--gris-1)}
.btn:focus-visible{outline:2px solid #fff;outline-offset:3px}
/* Le contour de focus appartient au clavier. Un focus pose par le script, lui, ne
   dessine rien : voir focusDoux() dans site.js. */
[data-doux]:focus,[data-doux]:focus-visible{outline:none}
.etape:focus,.etape:focus-visible{outline:none}
.btn.clair{background:#fff;color:var(--encre);box-shadow:inset 0 0 0 1.5px var(--trait)}
.btn.clair:hover{background:var(--creme-2)}
/* 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. */
/* Texte encre sur l'orange : le blanc n'y faisait que 2,7:1. La couleur est celle
   du chassis de l'iPhone d'Engage, pas de son bouton, qui est noir. */
.btn.orange{background:var(--orange);color:var(--encre)}
.btn.orange:hover{background:var(--orange);filter:brightness(1.06)}
.btn.orange svg{stroke:var(--encre)}
/* 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:var(--rouge);color:#fff}
.btn.rouge:hover{background:var(--rouge);filter:brightness(1.08)}
.btn svg{width:16px;height:16px;stroke:currentColor;stroke-width:2.2;fill:none;
  stroke-linecap:round;stroke-linejoin:round}

/* -------------------------------------------------- LA BORDURE QUI TOURNE
   Un trait de lumiere fait le tour du bouton qui fait avancer, et de lui seul :
   un ecran ou tout brille est un ecran ou plus rien n'attire. Repris du « Border
   Beam » d'Aceternity, refait sans Motion : un degrade conique dont l'angle est
   une propriete enregistree, donc animable, et un masque qui n'en garde que
   l'anneau. Le pseudo-element ne recoit aucun clic. */
@property --a{syntax:'<angle>';initial-value:0deg;inherits:false}
.vif{position:relative}
.vif::before{content:"";position:absolute;inset:-1.5px;border-radius:inherit;
  padding:1.5px;pointer-events:none;
  background:conic-gradient(from var(--a),transparent 0deg,
    rgba(255,255,255,.55) 34deg,#fff 62deg,transparent 118deg,transparent 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;
  animation:tourne 3.6s linear infinite}
/* Meme regle pour la bordure : un ecran parti garde ses boutons dans la page, et
   ils n'ont aucune raison de continuer a briller pour personne. */
.etape:not(.on) .vif::before{animation-play-state:paused}
@keyframes tourne{to{--a:360deg}}

/* ============================================================== 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(1.875rem,3.9vw,3.125rem)}
/* 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,.88)}
/* 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. */
/* C'est un BOUTON, depuis le 13 septembre : il en avait l'air et ne faisait rien. Il
   rejoue l'entree du format dans le telephone. */
.consigne{margin:6px 0 0;display:inline-flex;align-items:center;gap:10px;cursor:pointer;
  font:inherit;font-size:0.9375rem;font-weight:700;color:#fff;
  padding:12px 18px;border-radius:999px;background:rgba(20,22,51,.22);
  border:1px solid rgba(255,255,255,.34);
  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}
.consigne:focus-visible{outline:2px solid #fff;outline-offset:3px}
@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}
/* L'OMBRE DU TELEPHONE EST POSEE, PAS FILTREE. Elle etait un drop-shadow sur
   l'image du chassis ; or ce PNG est perce en son milieu, la ou se trouve l'ecran,
   et un drop-shadow suit la forme opaque du fichier : il dessinait donc aussi une
   ombre a l'INTERIEUR du cadre, normalement recouverte par l'iframe posee dessus.
   Sur iPhone, tant que Safari n'avait pas compose l'iframe, cette ombre interieure
   se voyait, et le premier contact avec l'ecran la faisait disparaitre. Signale par
   Fabrice, invisible sur ses captures puisque capturer force une recomposition.
   Le chassis etant un rectangle arrondi, une ombre portee sur un calque pose
   derriere donne exactement le meme dessin, sans filtre a recalculer et sans rien
   a composer : 14 % de rayon en largeur, 7 % en hauteur, soit le meme arrondi
   circulaire sur un cadre deux fois plus haut que large. Le rayon et le retrait
   sont MESURES dans le fichier, canal alpha a l'appui : coins de 163 px sur une
   image de 1038 de large, et un bord qui commence a 13 px. */
.tel::before{content:"";position:absolute;inset:0 1.3%;z-index:0;
  border-radius:16%/7.9%;box-shadow:0 34px 60px rgba(6,8,30,.45)}
.tel img.ch{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:1}
.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(224,0,0,.28))}
.p.grand{font-size:clamp(1.0625rem,1.7vw,1.3125rem);color:#fff}
.atlas .btn{margin-top:8px}

/* ============================================================== 3. LE CONTACT */
.fin{gap:22px;max-width:760px;padding:4px}
.fin .q{max-width:16ch}
.fin .sous{margin:0;font-size:1.0625rem;line-height:1.55;color:var(--gris-3);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 var(--trait);transition:box-shadow .14s}
.rappel:focus-within{box-shadow:inset 0 0 0 1.5px var(--encre)}
/* Le champ lui-même fait 44 px de haut : la pilule qui l'entoure en faisait 56,
   mais un doigt qui vise le champ vise le champ, pas la pilule. */
.rappel input{flex:1;min-width:0;height:44px;border:0;outline:0;background:transparent;
  font:inherit;font-size:0.9375rem;color:var(--encre)}
.rappel input::placeholder{color:var(--gris-4)}
.rappel input[aria-invalid="true"]{color:var(--brun)}
.rappel button{flex:none;height:44px;padding:0 20px;border:0;border-radius:999px;
  background:var(--indigo);color:#fff;cursor:pointer;font:inherit;font-size:0.875rem;
  font-weight:640;transition:background .14s}
.rappel button:hover{background:#3E45BE}
.rappel button[disabled]{opacity:.6;cursor:progress}
/* La ligne de reassurance, juste sous le champ : ce qu'on fait de l'adresse, et le
   lien vers la politique qui le detaille. Sur mobile c'est le seul chemin vers elle. */
.sur-mail{margin:-6px 0 0;font-size:0.78125rem;color:var(--gris-4)}
/* Le lien de la politique est le chemin principal vers elle sur téléphone : il a
   droit à une zone de 44 px de haut, pas à la hauteur d'une ligne de 12,5 px. */
/* Le soulignement suit le texte et non le bas de la boîte : avec une hauteur de
   44 px, un trait posé en ombre intérieure se détachait sous le mot. */
.sur-mail a{display:inline-flex;align-items:center;min-height:44px;padding:0 2px;
  color:var(--encre);font-weight:600;
  text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px;
  text-decoration-color:var(--ombre)}
.sur-mail a:hover{text-decoration-color:var(--encre)}
.dit{margin:0;font-size:0.84375rem;font-weight:560;min-height:20px;color:var(--vert)}
.dit.ko{color:var(--brun)}
/* 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:0.71875rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gris-4)}
.clients-l{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 14px;list-style:none;margin:0;padding:0}
.clients-l li{display:block}
.clients-l img{width:52px;height:52px;display:block;opacity:.85;transition:opacity .16s}
.clients-l img:hover{opacity:1}

/* LA PAGE SANS JAVASCRIPT. Elle ne cherche pas à imiter le site : elle dit, en
   clair et dans l'ordre, ce que les trois écrans racontent, et donne les trois
   liens qui comptent. Elle n'existe que si le script n'a pas tourné. */
/* Elle se pose PAR-DESSUS la scène vide : le <main> occupe déjà toute la hauteur,
   et un bloc placé après lui tombait sous la ligne de flottaison d'une page qui ne
   défile pas. Invisible, donc inutile. */
.sans-js{position:absolute;inset:0;z-index:2;overflow:auto;
  padding:112px 28px 80px;text-align:left}
.sans-js > *{max-width:64ch;margin-left:auto;margin-right:auto}
.sans-js h1{font-family:"Bricolage Grotesque",Figtree,sans-serif;font-weight:600;
  font-size:clamp(1.75rem,4vw,2.75rem);line-height:1.05;letter-spacing:-.03em;
  margin:10px 0 20px}
.sans-js p{margin:0 0 14px;font-size:1rem;line-height:1.65;color:rgba(255,255,255,.94)}
.sans-js .sur{display:block;margin-bottom:18px}
.sans-js a{color:#fff;font-weight:600;text-decoration:none;
  box-shadow:inset 0 -1.5px 0 rgba(255,255,255,.7)}
.sans-js b{font-weight:700}
/* L'avertissement est une note de bas de bloc, pas un titre : c'est le contenu qui
   compte, pas l'excuse. */
.sans-js-note{margin-top:26px;padding-top:18px;font-size:.8125rem;
  border-top:1px solid rgba(255,255,255,.22);color:rgba(255,255,255,.8)!important}
/* Sans script, aucun fond n'est allumé : celui du premier écran est peint ici. */
body:has(.sans-js){background:var(--indigo)}

/* Le texte qui n'est que pour le lecteur d'ecran : l'annonce du titre de l'ecran. */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ====================================================================== 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;
  padding-bottom:max(22px,env(safe-area-inset-bottom));
  padding-left:max(28px,env(safe-area-inset-left));
  padding-right:max(28px,env(safe-area-inset-right))}
/* LES TRAITS SONT DES BOUTONS : chacun mene a son ecran, une fois atteint. La zone
   de clic fait 44 px de haut, le trait n'en montre que 3. */
.pas{display:flex;gap:0}
.pas button{display:flex;align-items:center;width:44px;height:44px;padding:0 4px;
  border:0;background:none;cursor:pointer}
.pas button[disabled]{cursor:default}
.pas button:focus-visible{outline:2px solid currentColor;outline-offset:-4px;border-radius:8px}
.pas i{display:block;width:100%;height:3px;border-radius:99px;
  background:rgba(255,255,255,.45);transition:background .3s}
.pas button.fait i{background:#fff}
.pas button:not([disabled]):hover i{background:rgba(255,255,255,.7)}
body[data-ton="clair"] .pas i{background:rgba(17,19,24,.32)}
body[data-ton="clair"] .pas button.fait i{background:var(--encre)}
.passer{background:none;border:0;padding:0;min-height:44px;cursor:pointer;font:inherit;
  font-size:0.84375rem;font-weight:560;color:#fff;
  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:var(--gris-4)}
body[data-ton="clair"] .passer:hover{color:var(--encre)}
.outils,.confid{font-size:0.78125rem;text-decoration:none;color:#fff;
  display:inline-flex;align-items:center;gap:7px;min-height:44px}
.outils:hover,.confid:hover{color:#fff}
body[data-ton="clair"] .outils,body[data-ton="clair"] .confid{color:var(--gris-4)}
body[data-ton="clair"] .outils:hover,body[data-ton="clair"] .confid:hover{color:var(--encre)}
/* L'icone de « Connexion » n'apparait que sur telephone, ou le mot ne tient pas. */
.outils svg{display:none;width:18px;height:18px;stroke:currentColor;fill:none;
  stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
/* UN SEUL LIEN VERS LA POLITIQUE PAR ECRAN. Sur l'ecran de contact, la ligne sous le
   champ du courriel le porte deja, la ou l'on demande une adresse : celui de la barre
   s'efface. Il y en avait deux, releve par Fabrice le 13 septembre 2026 : ce n'etait
   pas un choix mais une accumulation, le lien du bas d'abord, puis la ligne ajoutee
   a l'audit parce que le lien du bas disparaissait sur telephone, puis le lien du bas
   remis en mode clair par le correctif de la barre. */
body[data-ton="clair"] .confid{display:none}
.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 84px}
  .sur{font-size:0.65625rem;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(1.5rem,6.6vw,2rem)}
  /* Le paragraphe d'accroche cede la place au telephone, mais PAS la phrase
     d'apres la reponse : c'est elle qui explique ce que le visiteur vient de faire.
     Elle etait masquee avec l'autre, et Oui comme Non n'entendaient rien. */
  .format .texte > .p{display:none}
  .apres{align-items:center;gap:10px}
  .apres .p{display:block;font-size:0.875rem;line-height:1.5}
  .tel{flex:1 1 0;min-height:160px;height:auto;width:auto;max-height:60svh}
  .haut{padding:18px 20px;padding-top:max(18px,env(safe-area-inset-top))}
  /* 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}
  /* « QUI SOMMES-NOUS » AU CENTRE DE L'EN-TETE sur telephone, demande de Fabrice du
     13 septembre 2026 : une grille a trois colonnes, la marque a gauche, le groupe a
     droite, le bouton exactement au milieu quelles que soient leurs largeurs. La
     barre du bas ne porte que l'avancement et le lien de l'ecran : a trois, sur un
     iPhone de 393 px, elle passait sur deux lignes et recouvrait le chassis. */
  .haut{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px}
  .marque-t{justify-self:start}
  .haut .qui-b{margin-left:0;justify-self:center;font-size:0.78125rem;padding:0 8px;
    white-space:nowrap}
  .haut-d{justify-self:end}
  /* Cibles tactiles a 44 px, et la fleche de la consigne pointe vers le bas, ou
     est le telephone. */
  .passer{font-size:0.78125rem;white-space:nowrap;padding:12px 0;min-height:44px}
  /* Pas de retour a la ligne : ce qui ne tient pas doit disparaitre, pas s'empiler
     par-dessus le contenu. */
  .bas-d{gap:12px;min-width:0;flex-wrap:nowrap}
  .consigne svg{transform:rotate(90deg)}
  .lang,.mail{height:44px;min-width:44px}
  .mail{width:44px;padding:0;justify-content:center}
  .mail span{display:none}
  .mail svg{display:block}
  .bas{padding:18px 16px;gap:10px;
    padding-bottom:max(18px,env(safe-area-inset-bottom))}
  .pas button{width:34px;padding:0 3px}
  /* « CONNEXION » RESTE SUR TELEPHONE, en icone : il etait masque faute de place, ce
     qui fermait les outils a l'equipe depuis un telephone. Fabrice l'a releve le
     13 septembre 2026. L'icone tient dans 44 px ; sur l'ecran de contact, ou « Passer
     au contact » n'existe plus, le mot revient a cote d'elle. « Confidentialite »,
     lui, n'a pas la place ici : la politique se joint depuis l'ecran de contact, sous
     le champ du courriel. */
  .confid{display:none}
  .outils{width:44px;justify-content:center;padding:0;gap:6px}
  .outils span{display:none}
  .outils svg{display:block}
  body[data-ton="clair"] .outils{width:auto;padding:0 2px}
  body[data-ton="clair"] .outils span{display:inline}
  .fin{gap:16px}
  .actions .btn{width:100%}
  .clients-l li{display:block}
.clients-l img{width:40px;height:40px}
  .clients-l{gap:8px 10px}
  .marque{height:27px}
}

/* SOUS 380 PX, la barre du bas ne tient plus à trois libellés. Mesuré sur un
   iPhone SE à 320 px : « Passer au contact » sortait de 45 px hors de l'écran et
   son libellé était coupé par le bord. Le bouton principal de l'écran passe en
   premier, et « Qui sommes-nous » cède sa place ; il reste atteignable depuis le
   panneau du dernier écran et par le lien de la politique. */
/* Mesure a 375 px, un iPhone SE : l'en-tete y tient encore « Qui sommes-nous »
   (76 px de mot-symbole, 212 pour les trois elements de droite, 304 en tout pour
   335 disponibles). Le seuil est donc a 350 et non a 380. */
@media (max-width:350px){
  /* L'en-tete se resserre pour garder ses trois colonnes : le mot-symbole perd deux
     pixels, les pilules quatre de large, le bouton deux de corps. Les hauteurs, elles,
     restent a 44 px : c'est la largeur qui cede, jamais la cible. */
  .haut{padding:16px 12px;gap:4px}
  .marque-t img{height:20px}
  .haut .qui-b{font-size:0.75rem;padding:0 4px}
  .lang,.mail{min-width:40px}
  .mail{width:40px}
  .lang{padding:0 8px}
  .pas button{width:30px;padding:0 3px}
  .scene{padding:78px 16px 80px}
}

/* ================================================================ 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:var(--voile);
  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(1.75rem,3.4vw,2.5rem);text-wrap:balance;margin-bottom:18px}
.qui-corps p{margin:0 0 14px;font-size:1rem;line-height:1.6;color:var(--gris-2)}
.qui-corps p b{color:var(--encre);font-weight:700}
.qui-corps p:last-child{margin-bottom:0}
.qui-pied{padding-top:14px;font-size:0.84375rem}
.qui-pied a{color:var(--encre);font-weight:600;text-decoration:none;box-shadow:inset 0 -1.5px 0 var(--ombre)}
/* 44 px, comme toutes les autres : la croix en faisait 38, sur mobile aussi. */
.qui-x{position:absolute;top:14px;right:14px;width:44px;height:44px;border:0;border-radius:999px;
  background:var(--creme);color:var(--encre);font-size:1.375rem;line-height:1;cursor:pointer;
  display:grid;place-items:center;transition:background .14s}
.qui-x:hover{background:var(--trait)}
@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}
}