/* ============================================================
   La passerelle

   Les pages intérieures gardent leur contenu — vérifié, traduit, complet —
   et reçoivent l'enveloppe de la maquette : entête, haut de page, bande
   d'appel, pied. Deux vocabulaires de style cohabitent donc dans la même
   page. Ils s'ignorent presque : sur 115 et 329 classes, ils n'en partagent
   que trois.

   Ce fichier ne redessine rien. Il raccorde : même largeur de colonne, même
   respiration entre les sections, même rythme de titre, même carte. Chargé
   après les deux autres, il a le dernier mot.
   ============================================================ */

/* ---------- la colonne ----------
   Le site centre sur 1200 px avec 28 px de marge, la maquette sur
   min(1200px, 100% − 48px). Un écart de quatre pixels se voit à la jointure
   entre le haut de page et la première section. On aligne sur la maquette. */
.subpage #contenu .wrap {
  width: min(1200px, 100% - 48px);
  max-width: none;
  padding: 0;
}

/* ---------- la respiration ----------
   Le site aère ses sections de 84 px, la maquette de 110. C'est ce qui
   sépare une page dense d'une page qui respire. */
.subpage #contenu > section { padding: 110px 0; }
.subpage #contenu > section:first-child { padding-top: 86px; }

/* ---------- le surtitre ----------
   La maquette donne au kicker une marge haute de 32 px, utile sous la
   pastille du haut de page, de trop au-dessus d'un titre de section. Et sur
   fond nuit, le vert émeraude ne se lit pas : le site y met un bleu pâle,
   on le lui rend. */
.subpage #contenu .kicker { margin: 0; }
.subpage #contenu .sect-nuit .kicker { color: #8B96C8; }

/* ---------- le titre de section ----------
   On garde l'échelle de la maquette, mais la ligne de tête du site est un
   bloc en colonne : son titre n'a pas besoin de la marge de 9 px que la
   maquette pose pour détacher le h2 de son surtitre. */
.subpage #contenu .tete h2 { margin: 0; }
.subpage #contenu .tete { gap: 12px; margin-bottom: 46px; }

/* ---------- les cartes ----------
   Même rayon, même trait, même soulèvement au survol que les cartes de la
   maquette. Les cartes de fond nuit gardent leur propre trait. */
.subpage #contenu .carte {
  border-radius: 17px;
  transition: transform .3s, box-shadow .3s, border-color .3s;
}
.subpage #contenu .carte-lien:hover,
.subpage #contenu .g2 > .carte:hover,
.subpage #contenu .g3 > .carte:hover,
.subpage #contenu .g4 > .carte:hover,
.subpage #contenu .g5 > .carte:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 40px #08765314;
}
.subpage #contenu .sect-nuit .carte:hover { box-shadow: 0 18px 40px #0003; }

/* ---------- les boutons du contenu ----------
   Le site et la maquette dessinent leurs boutons presque pareil ; il ne
   manquait que le rayon et la transition. */
.subpage #contenu .btn { border-radius: 11px; transition: all .25s; }

/* ---------- sur un téléphone ---------- */
@media (max-width: 760px) {
  .subpage #contenu > section { padding: 82px 0; }
  .subpage #contenu > section:first-child { padding-top: 62px; }
  .subpage #contenu .tete { margin-bottom: 32px; }
}

/* ---------- le fil d'Ariane ----------
   Il vivait entre l'entête et le titre ; il reprend sa place en tête du haut
   de page. Discret, mais présent : les données structurées le déclarent à
   Google, et un contrôle vérifie qu'il dit la même chose. */
.subpage-hero .ariane {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 20px;
  font-size: 12px; color: #5A6472;        /* 6,00 de contraste sur blanc */
}
.subpage-hero .ariane a { color: #5A6472; text-decoration: none; }
.subpage-hero .ariane a:hover { color: var(--deep-emerald); }
.subpage-hero .ariane span { color: #6B7280; }   /* 4,83 */

/* ---------- les illustrations du haut de page ----------
   Elles portent du texte, et ce texte change de longueur d'une langue à
   l'autre : « AVOIR » fait cinq lettres en français, quinze en espagnol.
   On leur interdit de pousser la page, et on les laisse se réduire. */
.subpage-scene { max-width: 100%; overflow: hidden; }
.subpage-scene > * { max-width: 100%; }
@media (max-width: 760px) {
  .subpage-scene { transform: scale(.92); transform-origin: top center; }
}

/* ---------- les mots trop longs ----------
   L'allemand compose : « Branchenfamilien », « Lagerverwaltung ». Un seul de
   ces mots dans un grand titre pousse la page au-delà de l'écran d'un
   téléphone. On autorise la coupure plutôt que le débordement. */
.subpage h1, .subpage h2, .subpage h3,
.subpage .dsp, .subpage .kicker {
  overflow-wrap: break-word;
  hyphens: auto;
}

/* ---------- la page reste lisible sans JavaScript ----------
   Le site cachait ses blocs (opacity 0) et comptait sur app.js pour les
   révéler. Si le script ne s'exécute pas — JavaScript coupé, erreur réseau,
   robot d'indexation qui ne l'exécute pas — le lecteur voyait une page
   presque vide. Quinze blocs sur dix-neuf, mesuré.

   On inverse, comme sur l'accueil refondu : la page est lisible par défaut,
   et c'est le script qui ARME l'animation en posant « anime » sur la racine.
   Il ne peut plus la désarmer par son absence. */
.rev { opacity: 1; transform: none; }
html.anime .rev { opacity: 0; transform: translateY(18px); }
html.anime .rev.vu { opacity: 1; transform: none; }

/* ---------- rendre ses couleurs à la maquette ----------
   Les deux feuilles ne partagent que trois classes, mais elles se marchent
   dessus par SÉLECTEURS D'ÉLÉMENT, ce qu'un inventaire de classes ne voit
   pas : le site pose « p { color } » et « a { color } » sans classe. Ces
   deux règles battent l'héritage, donc elles repeignaient le texte de
   l'entête, du haut de page, de l'appel, du pied et des illustrations —
   jusqu'à mettre du gris sur fond émeraude, mesuré à 1,99 de contraste pour
   4,5 exigés.

   On rend l'héritage dans les zones qui appartiennent à la maquette. Le
   :where() leur donne une spécificité nulle : elles battent « p » et « a »
   tout nus, qu'elles égalent et dépassent par l'ordre, et elles s'effacent
   devant la moindre règle de classe de la maquette. */
:where(.header, .subpage-hero, .subpage-cta, .final-cta,
       .help-strip, .footer, .subpage-scene) p,
:where(.header, .subpage-hero, .subpage-cta, .final-cta,
       .help-strip, .footer, .subpage-scene) a {
  color: inherit;
}

/* ---------- la conversation d'assistance, lisible ----------
   La maquette posait du blanc sur l'émeraude clair : 3,54 de contraste, pour
   4,5 exigés sur du texte de 12 px. Les deux horodatages de 8 px tombaient à
   3,25 et 2,76. On reste dans la palette de la charte — c'est l'émeraude
   foncé, déjà employé par la maquette — et on remonte les gris. Le dessin ne
   change pas, il devient lisible. */
.support-chat.answer { background: var(--deep-emerald); }   /* 5,64 */
.support-chat small { color: #5A6472; }                     /* 6,00 */
.support-chat.answer small { color: #E6F6EF; }              /* 5,04 */
.support-chat.answer span { color: #D8F0E6; }               /* 4,70 */

/* ---------- la bande photographique ----------
   Une personne par page, détourée, posée sur un panneau de la charte.
   Détourée plutôt que pleine : le fond d'origine ne jure avec rien, et la
   silhouette s'assoit dans la page comme les illustrations de la maquette.
   Le fichier est servi par comza.app ; sans fichier, pas de bande. */
.photo-bande { padding: 0 0 14px; }
.photo-bande .wrap { width: min(1200px, 100% - 48px); max-width: none;
                     padding: 0; margin: 0 auto; }
.portrait-bande {
  position: relative; display: grid; align-items: end;
  grid-template-columns: 1fr;
  gap: 24px; margin: 0;
  height: clamp(200px, 23vw, 290px);
  border-radius: 18px; overflow: hidden;
  padding: 24px 0 0 28px;
}
.portrait-bande.fond-clair {
  background: linear-gradient(118deg, var(--mist) 0%, #EAF4EF 54%, #DCEFE6 100%);
}
.portrait-bande.fond-nuit {
  background: linear-gradient(118deg, #0E1330 0%, #15213F 58%, #11352A 100%);
}
/* La silhouette est calée en bas à droite, hors du flux de la grille :
   dans une grille, « height: 100% » se mesure sur la rangée et non sur le
   panneau, et l'image débordait de 160 px sans qu'on le voie — le panneau
   la rognait. En absolu, elle tient exactement dans la hauteur donnée. */
.portrait-bande img {
  position: absolute; right: 0; bottom: 0; top: 0;
  width: 42%; height: 100%;
  object-fit: contain; object-position: bottom right;
}
/* La légende porte la phrase de la page : elle est écrite comme un titre, pas
   comme une pastille de 9 px perdue dans un panneau de 1 200 px. On annule donc
   la pastille héritée de la maquette (fond, flou, position absolue) et on cale
   la ligne à gauche, à hauteur d'yeux de la silhouette. La largeur est bornée
   pour qu'aucune traduction ne passe sous la personne. */
.portrait-bande .photo-kicker {
  position: static; grid-column: 1; align-self: center; justify-self: start;
  background: none; -webkit-backdrop-filter: none; backdrop-filter: none;
  padding: 0; border-radius: 0;
  max-width: min(54%, 520px);
  gap: 12px; align-items: baseline;
  font-family: var(--display); font-weight: 700;
  font-size: clamp(17px, 1.9vw, 26px); line-height: 1.22;
  letter-spacing: -0.01em;
  color: var(--night);
  overflow-wrap: break-word; hyphens: auto;
}
.portrait-bande .photo-kicker i { flex: 0 0 auto; transform: translateY(-2px); }
.portrait-bande.fond-nuit .photo-kicker { color: #EAF2EE; }

/* ---------- la photographie qui garde sa scène ----------
   Un portrait détouré n'avait pas de décor à perdre. Une photographie de
   situation, si : sans le rayonnage, la réserve ou le bureau, on ne comprend
   plus ce qu'on regarde. Celles-là entrent donc entières, et c'est leur
   COULEUR qui a été mise à celle du panneau, pas leur contenu qui a été
   retiré. Le bord gauche se fond dans le panneau pour qu'il n'y ait pas de
   couture entre la photographie et la page. */
.portrait-bande.avec-decor img {
  width: 46%; object-fit: cover; object-position: center;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 26%, #000 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 26%, #000 100%);
}
/* En écriture de droite à gauche la photographie passe à gauche, mais on ne la
   retourne PAS : une scène réelle porte du texte — une facture, des étiquettes
   de prix — et un texte en miroir se voit. Seul le fondu change de côté. */
[dir="rtl"] .portrait-bande.avec-decor img {
  transform: none;
  -webkit-mask-image: linear-gradient(to left, transparent 0, #000 26%, #000 100%);
          mask-image: linear-gradient(to left, transparent 0, #000 26%, #000 100%);
}

/* En écriture de droite à gauche, « justify-self: start » envoie la ligne à
   DROITE — exactement là où se tient la silhouette, qui est calée en absolu sur
   un bord physique. Mesuré : les deux se superposaient sur les trois pages en
   arabe. On retourne donc tout le panneau : la personne passe à gauche, la
   ligne à droite, et la personne est miroitée pour regarder vers le texte. */
[dir="rtl"] .portrait-bande { padding: 24px 28px 0 0; }
[dir="rtl"] .portrait-bande img {
  right: auto; left: 0;
  object-position: bottom left; transform: scaleX(-1);
}

@media (max-width: 760px) {
  .portrait-bande { height: 180px; padding: 16px 0 16px 16px; }
  [dir="rtl"] .portrait-bande { padding: 16px 16px 16px 0; }
  .portrait-bande img { width: 48%; }
  /* Sur un téléphone la bande ne fait que 342 px : une photographie de
     situation à 54 % laissait la ligne mordre de 16 px sur son cadre.
     Mesuré sur les quinze langues — on rend la place au texte. */
  .portrait-bande.avec-decor img { width: 50%; }
  .portrait-bande.avec-decor .photo-kicker { max-width: 44%; }
  .portrait-bande .photo-kicker { max-width: 46%; font-size: 15px; gap: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  .portrait-bande img { transition: none; }
}

/* ---------- rendre ses couleurs à la maquette ----------
   Les deux feuilles ne partagent que trois classes, mais elles se marchent
   dessus par SÉLECTEURS D'ÉLÉMENT, ce qu'un inventaire de classes ne voit
   pas : le site pose « p { color } » et « a { color } » sans classe. Ces
   deux règles battent l'héritage, donc elles repeignaient le texte de
   l'entête, du haut de page, de l'appel, du pied et des illustrations —
   jusqu'à mettre du gris sur fond émeraude, mesuré à 1,99 de contraste pour
   4,5 exigés.

   On rend l'héritage dans les zones qui appartiennent à la maquette. Le
   :where() leur donne une spécificité nulle : elles battent « p » et « a »
   tout nus, qu'elles égalent et dépassent par l'ordre, et elles s'effacent
   devant la moindre règle de classe de la maquette. */
:where(.header, .subpage-hero, .subpage-cta, .final-cta,
       .help-strip, .footer, .subpage-scene) p,
:where(.header, .subpage-hero, .subpage-cta, .final-cta,
       .help-strip, .footer, .subpage-scene) a {
  color: inherit;
}

/* ---------- la conversation d'assistance, lisible ----------
   La maquette posait du blanc sur l'émeraude clair : 3,54 de contraste, pour
   4,5 exigés sur du texte de 12 px. Les deux horodatages de 8 px tombaient à
   3,25 et 2,76. On reste dans la palette de la charte — c'est l'émeraude
   foncé, déjà employé par la maquette — et on remonte les gris. Le dessin ne
   change pas, il devient lisible. */
.support-chat.answer { background: var(--deep-emerald); }   /* 5,64 */
.support-chat small { color: #5A6472; }                     /* 6,00 */
.support-chat.answer small { color: #E6F6EF; }              /* 5,04 */
.support-chat.answer span { color: #D8F0E6; }               /* 4,70 */

/* ---------- la bande photographique ----------
   Une photographie de mise en situation par page, juste sous le haut de page.
   On réemploie le cadre de la maquette — coin arrondi, fondu vers le bas,
   léger zoom au survol — en lui donnant la largeur de la colonne et une
   hauteur qui suit l'écran. */