/* FUNNEL SANS — Dicotype/Funnel — SIL OFL 1.1 */
@font-face {
    font-family: 'Funnel Sans';
    src: url('/assets/fonts/funnel-sans/FunnelSans-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Funnel Sans';
    src: url('/assets/fonts/funnel-sans/FunnelSans-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Funnel Sans';
    src: url('/assets/fonts/funnel-sans/FunnelSans-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Funnel Sans';
    src: url('/assets/fonts/funnel-sans/FunnelSans-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* RESET GLOBAL

   Les deux hauteurs de barre étaient redéclarées ici, et cette feuille est la
   DERNIÈRE des trois communes : c'est donc elle qui gagnait, partout, y
   compris sur les pages qui n'ont pas de hero. Retirées le 1er septembre 2026
   (A4) — `topbar.css` porte la hauteur du haut, `bottombar.css` celle du bas,
   et chacune peut enfin varier sur téléphone sans être écrasée un cran plus
   loin dans la cascade. Les valeurs effectives ne changent pas : 43 et 43. */

/* Pas de `height: 100%` ici, et c'est un correctif, pas un oubli.
   Clouer `html` et `body` à la hauteur de l'écran fait de `body` le conteneur
   de défilement à la place de la fenêtre : tout ce qui dépasse d'une page de
   contenu part dans un second défilement, sous la barre du bas qui est fixe.
   Mesuré le 10 août 2026 sur `/contact` — `document.scrollHeight` valait
   exactement `innerHeight`, et le bouton d'envoi tombait 320 px plus bas.
   La pleine hauteur de l'accueil ne vient pas d'ici : `body` porte
   `min-height: 100vh` et `.homepage-bg` un `flex: 1`, ce qui suffit.

   `clip` et non `hidden` (18 septembre 2026, TD63) : `hidden` fait de body un
   conteneur de defilement — un axe cache force l autre en `auto` — et tout
   element `position: sticky` du site se cale alors sur body, qui ne defile
   jamais puisque c est la fenetre qui defile : la barre de l Espace client
   partait avec la page (mesure : y = -417 px a 500 px de defilement). `clip`
   coupe exactement pareil ce qui deborde en largeur, sans faire de body un
   conteneur de defilement. Les pages publiques ont ete remesurees a 390 px
   apres le changement (aucun debordement, aucune barre horizontale). */
html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    overflow-x: clip;
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-family: 'Funnel Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* Background */
/* Le haut du batiment etait coupe. L image fait 1920x1079, la zone visible
   entre les deux barres environ 1920x950 : `cover` la cale sur la largeur et
   rogne 129 px en hauteur, auxquels `center -90px` en ajoutait 90 pris tout en
   haut. La ville etait donc tronquee juste au-dessus des tours.

   Un dezoom litteral de 5 % n est pas possible ici : la zone est plus large que
   l image ne l est en proportion, et descendre sous `cover` laisserait deux
   bandes vides sur les cotes. On rend la hauteur autrement, en calant l image
   par le haut : les 90 px reviennent la ou ils manquaient, le rognage restant
   se fait par le bas, sur des toits. */
/* L'image a quitté cet élément pour une couche à elle, `::before`, le
   7 septembre 2026. Le cadrage n'a PAS changé, et c'est démontrable plutôt que
   promis : `.homepage-bg` mesure exactement la fenêtre — mesuré à 0 → 901 sur
   une fenêtre de 901, les deux barres étant `position: fixed` et translucides,
   donc posées PAR-DESSUS lui. Une couche en `inset: 0` dans cet élément a donc
   le même cadre de référence que `background-attachment: fixed`, qui cadrait
   sur la fenêtre. Les réglages ci-dessous sont repris au caractère près. */
.homepage-bg {
    position: relative;
    flex: 1;
    /* La couche d'image est agrandie pendant son entrée : sans ce découpage,
       les 6 % de débord sortiraient de l'élément — 27 px sous le bas de la
       fenêtre, donc une barre de défilement verticale pendant l'animation.

       Ce que ça coûte, et il faut le savoir avant de retirer cette ligne : le
       contenu du hero est désormais rogné s'il déborde au lieu de sortir. Tout
       y est en unités d'écran précisément pour qu'il ne déborde pas — voir le
       commentaire de `.homepage-hero` — mais si un jour une ligne de trop
       apparaît sur une petite fenêtre, elle sera coupée et non visible.

       **Et c'est un progrès malgré cela** : avant, le zoom portait sur CET
       élément, donc sur le hero entier. Le titre, le blason et les logos
       partenaires rétrécissaient de 5 % en même temps que la ville. Une bonne
       part de ce qu'Arnaud décrivait comme « des mouvements chaotiques » était
       là : ce n'était pas un fond qui bougeait, c'était toute la page. */
    overflow: hidden;
}

.homepage-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: url('/assets/brand/luxhawk_background.webp');
    /* Cadrage calé sur le faucon, demandé à la recette du 12 août 2026.
       Le bout de sa queue tombe cinq pixels au-dessus de la barre du bas.
       Le calcul, pour qui devra le refaire : l'image fait 1920 × 1079 et
       `background-attachment: fixed` la cadre sur la FENÊTRE, pas sur
       l'élément. En 1604 × 711, `cover` la met à l'échelle 0,8354 — rendue en
       1604 × 901 pour 711 de haut, soit 190 px de débord. Le bout de la queue
       est à la ligne 914 de la source, donc à 764 px du haut de l'image
       rendue ; la barre commence à 668, la cible est donc 663. Il faut décaler
       de 764 − 663 = 101 px sur 190, c'est-à-dire 53 %.
       Ce que ce réglage coûte, et il faut le savoir : le haut des tours part
       hors cadre. Avec un ratio d'image de 1,78 pour une fenêtre de 2,26, on
       a le faucon ou les tours, pas les deux — il faudrait une image plus
       large, autour de 2200 × 1050. */
    /* CADRAGE REFAIT LE 29 AOÛT 2026, sur mesure de l'image et non à l'œil.

       Demande d'Arnaud : voir le ras du haut de l'immeuble, ET la queue du
       faucon en entier. Les deux paraissaient contradictoires — le commentaire
       ci-dessus l'affirmait même : « on a le faucon ou les tours, pas les
       deux ». C'était faux, et c'est la mesure qui le dit.

       Ce qui a été mesuré dans l'image elle-même, en la lisant sur un canvas :

         hauteur de l'image ......................... 1079 px
         première ligne bâtie (haut de la tour) ..... ligne 168
         le faucon descend jusqu'à .................. la dernière ligne

       À 1920 × 970, `cover` rend l'image à l'échelle 1 : le débord vertical
       n'est que de **109 px**, et `background-position-y` choisit lesquels des
       109 sont rognés en haut.

       À 53 %, on rognait 58 px en haut — et 51 px EN BAS, c'est-à-dire dans la
       queue du faucon. Descendre l'image aurait montré plus de ciel, pas plus
       d'immeuble : c'est l'inverse du geste qu'il fallait.

       À 100 %, l'image est calée par le bas : plus rien n'est rogné en bas, la
       queue est entière, et le haut de la tour tombe à 16 px sous la barre du
       haut — « le ras du haut de l'immeuble ». Les deux demandes sont servies
       par le même réglage, parce que remonter l'image éloigne la queue de la
       barre du bas.

       CE QUE CE RÉGLAGE COÛTE, et il faut le savoir : il dépend de la hauteur
       de fenêtre. Le haut de la tour tombe sous la barre en dessous de 954 px
       de haut — `168 = hauteur − 911`. Au-dessus, il est visible. En dessous,
       c'est le faucon qui est privilégié, et c'est le bon arbitrage : le faucon
       est la marque, la ville est le décor.

       La vraie réponse reste une image plus large, autour de 2200 × 1050, qui
       rendrait le cadrage insensible à la hauteur — c'est TD19, et c'est un
       fichier à produire, pas une feuille de style à écrire. */
    /* 29 août : **l'image descend de 40 px**. Valeur réglée par Arnaud dans
       l'inspecteur, après un premier essai à 15 px — c'est la seule façon de
       trancher un cadrage, et elle vaut mieux que trois allers-retours.

       `calc(100% + 40px)` et non `bottom` : la part en pourcentage cale l'image
       par le bas comme avant, les 40 px la décalent vers le bas depuis cette
       position. Le réglage reste donc exprimé par rapport au calage précédent,
       et il suit la hauteur de fenêtre.

       C'est le seul levier de cadrage : `position: relative` sur cet élément
       sert au voile `::before` et ne déplace pas le fond. Pour l'ajuster dans
       l'inspecteur, c'est bien `background-position` sur `.homepage-bg` qu'il
       faut toucher, pas `top` ni `transform`. */
    background-position: center calc(100% + 40px);
    background-size: cover;
    background-repeat: no-repeat;

    /* LE ZOOM EST DE RETOUR, ET IL NE SAUTE PLUS.
       Il n'a jamais été le défaut : le défaut était sa PLACE. Posé sur
       `.homepage-bg`, qui portait `background-attachment: fixed`, le `transform`
       faisait peindre le fond par rapport à l'élément au lieu de la fenêtre —
       puis le transform disparaissait à la fin et le fond sautait à sa vraie
       place. Ici il n'y a plus de `background-attachment` du tout : la couche
       est une boîte ordinaire, la transformer ne change le référentiel de rien,
       et `both` garde l'état final au lieu de le lâcher.

       2,4 s et non 1,8 : plus long, donc plus lent, donc moins visible comme
       mouvement et plus proche d'un plan qui se pose. La courbe est fortement
       décélérée — l'essentiel du chemin est fait dans la première seconde, et
       la fin est presque immobile, ce qui est exactement ce qui manquait à la
       version précédente pour ne pas se faire remarquer en s'arrêtant. */
    animation: bgZoomIn 2.4s cubic-bezier(0.16, 1, 0.3, 1) both;
    transform-origin: center center;
}

@keyframes bgZoomIn {
    from { transform: scale(1.06); }
    to { transform: scale(1); }
}

/* L'ENTRÉE DE LA PAGE, REFAITE LE 7 SEPTEMBRE 2026.
   ------------------------------------------------
   Ce qu'elle était : `bgZoomIn`, un `transform: scale(1.05 → 1)` de 1,8 s
   posé sur CET élément — celui qui porte `background-attachment: fixed`.

   **Deux défauts, et le second est celui qu'on voyait sans savoir le nommer.**

   1. Un fond `fixed` sur un élément TRANSFORMÉ n'est plus peint par rapport à
      la fenêtre mais par rapport à l'élément. Pendant 1,8 s le cadrage n'était
      donc pas celui qui a été réglé à la main ; à la fin, le `transform`
      disparaissait — `animation-fill-mode` valant `none` — et le fond
      **sautait** d'un coup à sa vraie place. C'est « l'image du fond qui
      remonte à la fin » ;
   2. l'animation durait 1,8 s alors que rien d'autre ne bougeait avec elle :
      le mouvement se terminait longtemps après que la page semblait posée, ce
      qui le faisait lire comme un défaut plutôt que comme une entrée.

   **Ce qu'elle est maintenant.** Aucun `transform` sur le fond : le cadrage
   réglé au pixel près le 29 août ne bouge plus jamais, et le voile s'éclaircit
   pendant que le contenu monte. Trois mouvements qui vont dans le même sens,
   décalés de 120 ms, terminés en moins d'une seconde.

   L'autre moitié du désordre n'était pas ici : elle venait des images sans
   `width`/`height`, dont l'arrivée poussait le titre vers le bas. Corrigée
   dans les gabarits — voir le commentaire de `topbar.html.twig`. */

/* Le voile s'éclaircit : on entre sur une image plus sombre, elle se découvre.
   `opacity` et non `background-color` : la première est composée par le GPU,
   la seconde repeint à chaque image. */
@keyframes heroVeil {
    from { opacity: 0.62; }
    to { opacity: 0.38; }
}

/* Quatorze pixels, pas davantage. Un bloc qui monte de cinquante pixels attire
   l'œil sur le mouvement ; un bloc qui monte de quatorze donne l'impression
   qu'il se pose. */
@keyframes heroRise {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: translateY(0); }
}

.hero-left {
    animation: heroRise 700ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

.hero-right {
    animation: heroRise 700ms cubic-bezier(0.22, 0.61, 0.36, 1) 120ms both;
}

/* Le mouvement est un agrément, jamais une information : quand le système en
   demande moins, tout arrive posé, et rien n'est perdu. */
@media (prefers-reduced-motion: reduce) {
    .homepage-bg::before,
    .homepage-bg::after,
    .hero-left,
    .hero-right {
        animation: none;
    }
}

/* Sur téléphone, le cadrage se cale par le haut. La règle vise `::before` et
   non plus `.homepage-bg` : l'image a changé d'élément, et une surcharge restée
   sur le parent ne surchargerait plus rien — elle aurait l'air d'exister et
   n'aurait aucun effet. `background-attachment` a disparu avec la couche, il
   n'y a plus rien à ramener à `scroll`. */
@media (max-width: 768px) {
    .homepage-bg::before {
        background-position: center top;
    }
}

/* LE VOILE EST PASSÉ DE `::before` À `::after`, et l'ordre est tout le sujet.
   `::before` porte désormais l'image ; deux pseudo-éléments de même `z-index`
   se peignent dans l'ordre du document, donc `::after` couvre `::before`. Les
   inverser mettrait l'image PAR-DESSUS le voile, et la page perdrait d'un coup
   le contraste sur lequel tout le texte blanc repose. */
.homepage-bg::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* Noir plein plus `opacity`, et non un `rgba` : c'est ce qui permet au
       voile de s'éclaircir à l'ouverture sans repeindre la page à chaque
       image. La valeur finale — 0.38 — est exactement celle d'avant. */
    background: #000000;
    opacity: 0.38;
    animation: heroVeil 900ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
    z-index: 0;
    pointer-events: none;
}

/* Hero */
/* Le hero tient dans l'écran, barres comprises.
   Il cumulait des marges fixes — 60, 100 puis 190 px — calées sur un grand
   écran : à 720 px de haut il mesurait 856 px, et les logos partenaires
   passaient 58 px sous la barre du bas (mesuré le 10 août 2026).
   Tout l'espacement est désormais en unités d'écran, et les tailles de texte en
   `clamp()` : le contenu grossit et se resserre avec la fenêtre, au lieu de
   disparaître par le bas. C'est le comportement du quiz, étendu au site. */
.homepage-hero {
    position: relative;
    z-index: 1;
    min-height: 100vh;
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    padding: calc(var(--topbar-height) + 3vh) 40px calc(var(--bottombar-height) + 15px);
    box-sizing: border-box;
    width: 100%;
    font-family: 'Funnel Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.hero-left {
    max-width: 640px;
    color: #ffffff;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
    /* Bloc de marque : 10 px plus bas et 10 px vers la droite (9 août), puis
       10 px de plus le 11 août, puis 10 px de plus le 12, puis **10 px de plus
       le 29 août** — demande d'Arnaud sur capture annotée. Le décalage vertical
       suit la hauteur de fenêtre ; seule la part fixe bouge. */
    /* 29 août, second réglage : **remonté de 15 px** (50 → 35). */
    /* 17 septembre 2026, capture annotée d'Arnaud : **descendu de 20 px**
       (35 → 55) — « il est trop haut, il faut le redescendre ». */
    margin-top: calc(4vh + 55px);
    margin-left: 10px;
}

.hero-brand {
    display: flex;
    align-items: center;
    gap: 16px;
}

.hero-logo {
    margin: 0;
}

/* Blason en relief : lumière chaude en haut à gauche, ombre portée décalée en
   bas à droite, et une très légère mise en perspective. Le fichier source
   n'est pas touché — tout se joue en CSS. */
.hero-logo-img {
    width: clamp(104px, 11vw, 180px);
    height: auto;
    margin-top: 2vh;
    transform: perspective(900px) rotateY(-9deg) rotateX(5deg);
    transform-origin: 60% 50%;
    filter:
        drop-shadow(-2px -2px 0 rgba(255, 255, 255, 0.45))
        drop-shadow(1px 1px 0 rgba(0, 0, 0, 0.35))
        drop-shadow(2px 3px 1px rgba(0, 0, 0, 0.3))
        drop-shadow(10px 16px 18px rgba(0, 0, 0, 0.55))
        drop-shadow(0 0 22px rgba(255, 255, 255, 0.18))
        contrast(1.06)
        saturate(1.08);
    will-change: transform;
    transition: transform 0.35s ease;
}

.hero-logo-img:hover {
    transform: perspective(900px) rotateY(-4deg) rotateX(2deg) scale(1.02);
}

/* Le titre et les deux lignes du sous-titre forment une colonne centrée :
   « LuxHawk » est centré au-dessus du sous-titre, pas aligné à gauche. */
.hero-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.hero-title {
    color: #ffffff;
    margin: 0;
    font-size: clamp(2.8rem, 6.2vw, 6.3rem);
    font-weight: 600;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
    line-height: 1.15;
    font-family: 'Funnel Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.hero-subtitle {
    color: #ffffff;
    margin: 0;
    /* 16 septembre 2026 (D95) : l'accroche est passee de 41 + 45 caracteres a
       58 + 66. A 1.35rem en dur, la seconde ligne faisait 640 px — la largeur
       exacte de `.hero-left` — et, insecable, debordait des deux cotes sous
       1200 px : mesure a 390 px, les deux lignes commencaient a -48 px et se
       lisaient « ersecurite … numeriq ». La taille suit desormais la largeur,
       et sous 1200 px les lignes ont le droit de se replier (plus bas). */
    font-size: clamp(1rem, 1.25vw, 1.35rem);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
    opacity: 0.95;
    font-family: 'Funnel Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-weight: 400;
}

.hero-subtitle span {
    display: block;
    white-space: nowrap;
}

.hero-right {
    display: flex;
    flex-direction: column;
    max-width: 560px;
    padding-top: 0;
    /* Recalé le 12 août : l'accroche s'aligne désormais sur le milieu du logo
       LuxHawk, mesuré à 56 px au-dessus de sa position précédente. Comme la
       valeur qu'elle remplace, elle est réglée à la main sur 1604 × 767 ; la
       part en `vh` la fait suivre la hauteur de fenêtre.
       **29 août : descendue de 30 px de plus**, demande d'Arnaud sur capture
       annotée. Le bloc de marque descendant de 10 px dans le même geste,
       l'accroche passe donc 20 px SOUS le milieu du logo — l'alignement du
       12 août est délibérément abandonné, et il faut le savoir avant de
       « rétablir » quoi que ce soit. */
    /* 29 août : descendue de 20 px, puis **de 15 px de plus** (4 → 24 → 39).
       30 août, sur capture annotée d'Arnaud : **15 px de plus** (39 → 54). */
    /* 7 septembre 2026 : **descendue de 20 px de plus** (54 → 74), demande
       d'Arnaud sur capture annotée. */
    /* 11 septembre 2026, capture annotee d'Arnaud : tout remonte de 20 px
       (74 -> 54) - le bloc etait colle a la barre du bas. */
    margin-top: calc(7vh + 54px);
    text-align: center;

    /* Le décalage vers la gauche appartient à la COLONNE, pas au paragraphe.
       Posé le 9 août sur `.hero-claim` seule, il laissait le bloc de confiance
       centré sur la colonne pendant que le texte s'en écartait : les deux logos
       partenaires tombaient 40 px à droite de l'accroche qu'ils sont censés
       accompagner. Trouvé à la recette du 12 août 2026, test 2. */
    position: relative;
    right: 40px;
}

/* Le bloc de confiance s'ancre au **bas** du hero, dont le rembourrage laisse
   15 px avant la barre. Une marge haute fixe — 190 px sur la capture annotée du
   9 août — le poussait sous la barre dès que la fenêtre était basse, et laissait
   180 px de vide dès qu'elle était haute. Ancré, il se place tout seul. */
.hero-right .hero-trust {
    margin-top: auto;
    /* 11 septembre : 20 -> 40 px, meme geste - le bloc entier remonte. */
    margin-bottom: 40px;
}

.hero-claim {
    color: #ffffff;
    /* Deux agrandissements successifs le 9 août : 1.4 → 1.68 → 2.02rem. Le
       décalage de 40 px qui vivait ici est remonté sur `.hero-right` : il
       concerne toute la colonne, logos partenaires compris. */
    /* 16 septembre 2026 (D95) : 2.02rem → 1.5rem. Le texte est passe d'un
       paragraphe de 195 caracteres a deux paragraphes, 400 caracteres ; a
       32 px ils faisaient 609 px a eux seuls, et le bouton « Voir les
       formations » tombait a 933 px sur un ecran de 1080, a 911 px sur un
       ecran de 889 — sous le pli, ce que D86 interdit a l'accueil. Mesure
       apres : le bouton remonte sous 700 px a 1920 × 1080 et a 1600 × 900. */
    /* 17 septembre 2026, capture annotee d'Arnaud : « c'est trop gros, ca fait
       trop de texte ». 1.5rem → 1.3rem, et le second paragraphe prend sa
       propre taille plus bas. Ce que cela rend aussi : la colonne de droite
       tient de nouveau dans 100vh — a 1604 × 767 le hero faisait 795 px, et
       chaque pixel de trop montrait un pixel de ciel de plus en haut du fond
       (`cover` sur une boite plus haute que la fenetre) : c'est pour cela
       qu'Arnaud voyait « le haut du batiment » et « l'image rebaissee ». */
    font-size: clamp(1.05rem, 1.2vw, 1.3rem);
    line-height: 1.4;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
    margin-bottom: 20px;
    font-weight: 500;
    font-family: 'Funnel Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    text-align: center;
}


/* Le second paragraphe de l'accueil (D95) : un complement, pas une seconde
   accroche. Plus petit, plus leger, un peu en retrait — sinon deux blocs de
   meme poids se lisent comme un seul pave (capture annotee du 17 septembre
   2026). */
.hero-claim-secondary {
    font-size: clamp(0.95rem, 1.02vw, 1.1rem);
    font-weight: 400;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.9);
    margin-top: 4px;
    margin-bottom: 26px;
}
.hero-partner {
    color: #bbb;
    font-size: 1.1rem;
    font-style: italic;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    font-family: 'Funnel Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-weight: 400;
}

.hero-trust {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 32px;
    align-items: center;
    text-align: center;
}

.trust-logos {
    display: flex;
    gap: 24px;
    align-items: center;
    justify-content: center;
}

.trust-captions {
    display: flex;
    flex-direction: column;
    /* Interligne resserré de moitié, bloc descendu de 5 px. */
    gap: 3px;
    margin-top: 5px;
    align-items: center;
    text-align: center;
}

.trust-caption {
    /* Blanc, comme le texte marketing au-dessus : le gris se perdait sur la
       photographie. */
    color: #ffffff;
    font-size: 0.9rem;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    margin: 0;
    font-family: 'Funnel Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-weight: 400;
}

.trust-item {
    opacity: 1;
}

.trust-link {
    display: inline-block;
}

/* Halo posé SOUS les logos partenaires : le drop-shadow seul ne suffisait pas
   à les détacher de la photographie, les deux marques se confondaient avec le
   ciel et la ville. Le halo est un voile blanc doux, sans bord net ni cadre. */
.trust-mark {
    position: relative;
    width: 120px;
    height: 40px;
    padding: 10px 14px;
    box-sizing: content-box;
}

.trust-mark::before {
    content: "";
    position: absolute;
    inset: -6px;
    /* Intensité divisée par trois le 10 août — le premier essai faisait un pâté
       blanc — puis relevée de 20 % le 11 : les deux marques se lisaient encore
       mal sur le ciel clair de la photographie. Le fondu vers zéro est
       conservé : c'est lui qui évite le cadre. */
    background: radial-gradient(
        ellipse at center,
        rgba(255, 255, 255, 0.372) 0%,
        rgba(255, 255, 255, 0.30) 45%,
        rgba(255, 255, 255, 0.144) 70%,
        rgba(255, 255, 255, 0) 100%
    );
    filter: blur(2px);
    z-index: 0;
    pointer-events: none;
}

.trust-mark img {
    position: relative;
    z-index: 1;
}

.trust-mark img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 0 4px rgba(255, 255, 255, .1))
            drop-shadow(0 0 8px rgba(255, 255, 255, .7))
            drop-shadow(0 2px 4px rgba(0, 0, 0, .55));
}

/* Responsive */
@media (max-width: 1200px) {
    /* ENTRE 769 ET 1200 PX, LES DEUX COLONNES S'EMPILENT — 16 septembre 2026.
       Jusque-la elles restaient cote a cote a 80 % de largeur chacune, ce
       qui ne tient que si leur contenu est court : mesure a 1024 px avec
       l'accroche de D95, le bloc de marque faisait 743 px (deux lignes
       insecables) et partait a -22 px sous le texte de droite ; et des qu'on
       l'autorisait a retrecir, il tombait a 190 px et le titre passait sous
       l'accroche. C'est ce qu'Arnaud voyait en zoomant. La mise en page du
       palier 768 — une colonne centree — vaut pour tout ce qui est plus
       etroit qu'un poste de travail. */
    .homepage-hero {
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        text-align: center;
    }
    .hero-left, .hero-right {
        max-width: 80%;
    }
    .hero-subtitle span {
        white-space: normal;
    }
    .hero-left {
        margin-left: 0;
    }
    .hero-right {
        margin-top: 32px;
        right: 0;
    }
    .hero-claim {
        font-size: 1.15rem;
    }
    .hero-claim-secondary {
        font-size: 1rem;
    }
}

@media (max-width: 992px) {
    .homepage-hero {
        /* La réserve de la barre du bas, absente ici aussi (A3). Ce palier a
           été trouvé par le test et non à l'œil : il ne se déclenche qu'entre
           769 et 992 px, une largeur qu'on ne regarde jamais parce qu'elle
           n'est ni un téléphone ni un poste de travail. */
        padding: calc(var(--topbar-height) + 32px) 32px calc(var(--bottombar-height) + 24px);
    }
    .hero-title {
        font-size: 2.4rem;
    }
    .hero-subtitle {
        font-size: 1.2rem;
    }
    .hero-claim {
        font-size: 1.15rem;
    }
}

@media (max-width: 768px) {
    .homepage-bg {
        background-position: center top;
    }
    .homepage-hero {
        /* LE REMBOURRAGE, REPRIS LE 1er SEPTEMBRE 2026 (A3).

           Il valait `calc(var(--topbar-height) + 140px)` en haut et **40 px en
           dur** en bas. Les deux étaient faux, et pour la même raison : ils
           avaient été réglés sans regarder ce qu'il y a au-dessus et en
           dessous.

           En haut, 183 px de vide sur un écran de 812 : mesuré, le blason
           commençait à 327 px alors que le hero commence à 80. Un quart de
           l'écran ne servait à rien, et tout le contenu était poussé vers le
           bas — d'où « il faut descendre pour voir la fin ».

           En bas, 40 px **fixes** là où la règle de bureau, deux cents lignes
           plus haut, réserve `calc(var(--bottombar-height) + 15px)`. La barre
           du bas est en position fixe : elle ne pousse rien, elle recouvre. Ne
           pas réserver sa hauteur, c'est écrire du texte sous elle. Mesuré :
           les mentions partenaires finissaient à 764 px et la barre commençait
           à 769 — cinq pixels, sur une barre qui débordait elle-même de dix
           (A4).

           `min-height` revient, en `svh` : `auto` laissait un hero de 736 px
           dans une fenêtre de 812, donc une bande de page sous la photo. Et
           `100vh` sur un téléphone mesure la fenêtre BARRE D'ADRESSE REPLIÉE —
           c'est-à-dire plus que ce qu'on voit à l'arrivée. `svh` mesure la
           plus petite des deux, celle qui est vraie tout de suite. Le repli en
           `vh` reste pour les navigateurs qui ne connaissent pas l'unité.

           `min-` et non `height` : le hero peut toujours grandir et la page
           défiler. Un hero qui défile sur un téléphone est normal ; un hero
           qui coupe son dernier bloc ne l'est pas. */
        padding: calc(var(--topbar-height) + 48px) 24px calc(var(--bottombar-height) + 24px);
        flex-direction: column;
        align-items: center;
        text-align: center;
        min-height: 100vh;
        min-height: 100svh;
    }
    .hero-left, .hero-right {
        max-width: 100%;
        text-align: center;
    }
    /* LES DÉCALAGES DE BUREAU SE NEUTRALISENT ICI, et ils ne l'étaient pas.
       Mesuré le 30 août 2026 sur un écran de 375 px : le bloc d'accroche
       commençait à −24 px et le bloc de marque finissait à 444 px, pour une
       fenêtre de 376. Du texte sortait de l'écran des DEUX côtés, et la page
       défilait horizontalement.

       `.hero-right` porte `right: 40px` pour aligner l'accroche sur les logos
       partenaires — un réglage qui n'a de sens qu'en deux colonnes. Sur
       téléphone la mise en page passe en une colonne centrée, et ce décalage
       n'a plus rien à aligner : il ne fait que pousser le texte hors du cadre.
       Même chose pour les 10 px de `.hero-left`. */
    .hero-right {
        margin-top: 32px;
        right: 0;
    }
    .hero-left {
        margin-left: 0;
    }
    /* Le logo et le nom passent l'un SOUS l'autre. Cote à cote, ils demandent
       la largeur du logo plus celle du texte : sur 375 px, le nom debordait de
       68 px a droite. Ils restent centres, ce qui est deja la regle du bloc. */
    .hero-brand {
        flex-direction: column;
        align-items: center;
        gap: 12px;
    }
    .hero-logo {
        display: flex;
        justify-content: center;
    }
    .hero-title {
        font-size: 2.1rem;
    }
    .hero-subtitle {
        font-size: 1.1rem;
    }
    .hero-claim {
        font-size: 1rem;
        text-align: center;
    }
    .hero-trust {
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .homepage-hero {
        /* Même correction qu'au palier précédent (A3) : le haut cesse de
           pousser le contenu vers le bas, le bas réserve la barre. */
        padding: calc(var(--topbar-height) + 32px) 16px calc(var(--bottombar-height) + 20px);
    }
    .hero-title {
        font-size: 1.8rem;
    }
    .hero-subtitle {
        font-size: 1rem;
    }
    .hero-logo-img {
        width: 64px;
        height: 64px;
    }
    .hero-claim {
        font-size: 0.95rem;
    }
}

/* Pages internes */
/* La barre du bas est en position fixe : elle ne pousse rien et recouvre le bas
   du document. La place qu'elle occupe se reserve donc ici, en padding, et non
   par une marge basse ronde qui ne suivait pas sa hauteur reelle — c'est ce qui
   faisait passer le bouton « Creer la session » a moitie dessous. */
.page-container {
    max-width: 1200px;
    margin: calc(var(--topbar-height) + 40px) auto 0;
    padding: 0 24px calc(var(--bottombar-height) + 32px);
    color: #333;
    min-height: calc(100vh - var(--topbar-height) - var(--bottombar-height) - 100px);
    font-family: 'Funnel Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.page-container h1 {
    color: #111;
    margin-bottom: 24px;
    font-size: 2rem;
    font-family: 'Funnel Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-weight: 600;
}

@media (max-width: 768px) {
    .page-container {
        margin: calc(var(--topbar-height) + 32px) auto 0;
        padding: 0 16px calc(var(--bottombar-height) + 24px);
    }
    .page-container h1 {
        font-size: 1.6rem;
    }
}

/* Les deux appels du premier ecran — D86, 10 septembre 2026. Le premier est
   plein, le second n a qu un filet : deux poids, pour que l oeil sache ou
   aller. Blanc sur la photo sombre, comme l accroche au-dessus. */
.hero-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin: 0 0 28px;
}

.hero-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 22px;
    border: 1px solid #ffffff;
    border-radius: 0;
    color: #ffffff;
    font-weight: 500;
    font-family: 'Funnel Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    text-decoration: none;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    background: rgba(0, 0, 0, 0.25);
}

.hero-cta-primary {
    background: #ffffff;
    color: #16181d;
    text-shadow: none;
}

.hero-cta:hover,
.hero-cta:focus-visible {
    opacity: 0.88;
    outline: 2px solid #ffffff;
    outline-offset: 2px;
}