/* ===== hero-cta.css — les deux appels à l'action de l'en-tête ==============
 *
 * Écrit le 21/08/2026 (Lino) : « toutes les pages seront formées de la même
 * manière ». Le hub a deux boutons sous sa promesse ; les pages de métier ont
 * les mêmes, posés sur le bas de la vidéo d'en-tête. Appliqué d'abord à
 * /action et /realestate, prévu pour les suivantes.
 *
 * ⚠️ UN SEUL FICHIER, ET C'EST LE POINT. Recopier ces règles dans chaque page
 * de métier reviendrait à avoir cinq paires de boutons qui divergent au
 * premier réglage. Ce qui est propre à une page (la couleur du bouton vide sur
 * fond clair) tient en une ligne, et cette ligne vit dans la feuille de la
 * page.
 *
 * ⚠️⚠️ LA CLASSE S'APPELLE `.hcta-duo` ET SÛREMENT PAS `.hero-cta`.
 * `.hero-cta` EXISTE DÉJÀ dans hero.css depuis l'ancien accueil : c'est le
 * bouton corail de la vidéo scrollable, avec son fond rose, son `left: 50%` et
 * son `transform: translateX(-50%)`. Écrite sous ce nom, la paire héritait de
 * tout ça : décalée d'une demi-largeur vers la gauche — le premier bouton
 * sortait de l'écran — et étirée sur 617 px de haut avec un aplat rose derrière
 * elle. Une heure perdue le 21/08/2026 à chercher une règle de grille qui
 * n'existait pas.
 * ⚠️ AVANT DE NOMMER UNE CLASSE ICI : `grep -rn "\.le-nom" *.css`. hero.css
 * fait 46 ko et sert quatre pages.
 *
 * ⚠️ LA PAIRE NE SE CASSE JAMAIS EN DEUX LIGNES (`flex-wrap: nowrap`), c'est
 * une consigne et pas un réglage : c'est la règle posée sur le hub le
 * 20/08/2026, et les deux endroits doivent se ressembler. Ce qui s'adapte,
 * c'est la TAILLE des boutons, calée en `clamp()` sur la largeur de la page.
 * Les planchers sont calés sur 320 px, pas sur 375.
 */

/* ===== SUR TÉLÉPHONE : POSÉS SUR LE BAS DE LA VIDÉO =======================
 * ⚠️ `position: absolute` DANS l'en-tête, qui est en `position: relative` sur
 * les deux pages. Vérifié avant d'écrire : `.im-head` et `.sp-head` le sont
 * toutes les deux, et la vidéo est en `z-index: -1` — la paire passe donc
 * au-dessus sans qu'on ait à lui donner un `z-index` qui la ferait passer
 * par-dessus le menu.
 * ⚠️ LA MARGE BASSE DÉGAGE « DÉFILER », qui est lui aussi en absolu, à 45 px
 * du bas et 52 px de haut. Les boutons se posent AU-DESSUS de lui : l'invite à
 * défiler reste la dernière chose avant le bord, c'est sa place. */
/* ⚠️ `align-self: end` N'EST PAS DÉCORATIF, ET C'EST MESURÉ. `.sp-head`, sur
   /action, est une GRILLE. Un enfant en position absolue dans une grille prend
   pour bloc conteneur sa CASE, et il s'y ÉTIRE : la paire faisait 617 px de
   haut pour 45 px de contenu, ses deux boutons flottaient au milieu de
   l'en-tête et le second sortait de l'écran par la gauche. `.im-head`, sur
   /realestate, est un bloc — d'où la même règle qui marchait là-bas et pas
   ici. Cette ligne coupe l'étirement dans les deux cas.
   ⚠️ `justify-self: stretch` pour la même raison, dans l'autre sens : sans
   lui, `left`/`right` ne suffisent pas à occuper la case en largeur. */
.hcta-duo { position: absolute; z-index: 2;
  align-self: end; justify-self: stretch;
  left: clamp(14px, 4vw, 40px); right: clamp(14px, 4vw, 40px);
  bottom: calc(clamp(104px, 14vh, 128px) + env(safe-area-inset-bottom, 0px));
  margin: 0; display: flex; flex-wrap: nowrap;
  align-items: center; justify-content: center; gap: clamp(5px, 1.4vw, 18px); }

/* ⚠️ UNE FOIS DÉPLACÉE DANS LA COLONNE (ordinateur), ELLE REDEVIENT NORMALE.
   Les deux pages déménagent leur texte dans la colonne d'en-tête au-delà de
   900 px, et la paire suit. Laissée en absolu, elle serait restée collée au
   bas de l'en-tête pendant que le texte, lui, aurait bougé. */
/* ⚠️ LA MARGE EST DES DEUX CÔTÉS depuis le 21/08/2026 au soir : la paire n'est
   plus en bas de colonne mais ENTRE le titre et le texte. Elle a donc un
   voisin en dessous, qu'il faut dégager — sans la marge basse, le premier
   paragraphe venait se coller aux boutons. La basse est un peu plus généreuse
   que la haute : au-dessus il y a déjà l'interligne du titre, en dessous rien. */
.im-head-copy .hcta-duo, .sp-head-copy .hcta-duo, .mt-head-copy .hcta-duo {
  position: static; justify-content: flex-start;
  margin: clamp(14px, 2.6vh, 26px) 0 clamp(20px, 3.4vh, 34px); }

/* ===== LA COULEUR DU BOUTON VIDE, UNE LIGNE PAR COLONNE ==================
 * ⚠️ ELLE EST ÉCRITE, PAS HÉRITÉE, et c'est une correction du 21/08/2026.
 * `color: inherit` paraissait élégant : le bouton aurait pris la couleur du
 * texte qui l'entoure, et une page de plus n'aurait rien demandé. Mesuré, il
 * prenait celle de la COLONNE — encre sombre — alors que le texte affiché
 * dedans est blanc à 88 %. Sur le bleu de nuit de /action, le bouton devenait
 * illisible.
 * ⚠️ UNE PAGE DE MÉTIER DE PLUS = UNE LIGNE ICI. C'est le seul endroit du
 * composant qui connaît les pages, et c'est assumé : deux déclarations de
 * couleur valent mieux qu'un héritage qui se trompe en silence. */
.sp-head-copy .hcta-duo { color: #fff; }
.im-head-copy .hcta-duo { color: var(--ink, #26393c); }
/* ⚠️ LES QUATRE PAGES DE MÉTIER DU 21/08/2026 (bâtiment, restauration,
 * commerce, art) PARTAGENT UNE SEULE LIGNE, et c'est la seule exception à la
 * règle « une ligne par colonne » écrite juste au-dessus : leur colonne
 * d'ordinateur est le même gabarit (`metier.css`), et sa couleur d'encre est
 * déjà une variable de palette. Une page de métier de plus n'ajoute donc rien
 * ici — c'est son bloc `body[data-metier=…]` qui décide. */
.mt-head-copy .hcta-duo { color: var(--mt-ink, #26393c); }

.hcta-duo .hcta { display: inline-flex; align-items: center; gap: .5rem;
  white-space: nowrap; cursor: pointer; font: inherit; font-weight: 600;
  border-radius: 12px; border: 1px solid transparent; text-decoration: none;
  font-size: clamp(.62rem, 2.9vw, 1rem);
  padding: clamp(.9rem, 2.2vw, 1.05rem) clamp(.5rem, 3vw, 2.1rem); }

/* ===== LE BOUTON FUMÉE ===================================================
 * ⚠️ IL NE PORTE PAS `.cs-btn-smoky`, comme sur le hub et pour la même raison :
 * cette classe apporte la fumée ET une taille fixe qui casserait la paire. On
 * reprend les trois seules règles dont le canvas a besoin. `overflow: hidden`
 * retient la fumée dans les coins arrondis, `isolation: isolate` empêche son
 * mélange de déborder, et le libellé passe au-dessus — le canvas est inséré en
 * PREMIER enfant, sans `z-index` sur le <span> le texte passerait dessous. */
.hcta-duo .hcta-plein { background: #0d1017; color: #fff;
  position: relative; isolation: isolate; overflow: hidden; }
.hcta-duo .hcta-plein > span { position: relative; z-index: 1; }

/* ===== LE BOUTON VIDE ====================================================
 * ⚠️ SA COULEUR EST CELLE DU TEXTE QUI L'ENTOURE, pas une valeur écrite ici.
 * Posé sur la vidéo il est blanc ; déplacé dans la colonne d'ordinateur, il
 * prend la couleur de cette colonne — encre sombre sur le sable de
 * /realestate, blanc sur l'encre de /action. Une seule règle pour les deux, et
 * rien à retoucher le jour où une page de métier a un autre fond.
 * ⚠️ `border-color` est déclaré DEUX FOIS exprès : la première ligne est le
 * repli pour un navigateur sans `color-mix()`, qui aura un contour franc
 * plutôt qu'aucun contour. Ne pas « nettoyer » en supprimant la première.
 * ⚠️ AUCUN FOND, même très pâle : posé sur une vidéo qui change en
 * permanence, un aplat dessinerait un rectangle visible. Le seul fond
 * acceptable ici est l'absence de fond. */
.hcta-duo .hcta-vide { background: transparent; color: inherit;
  border-color: currentColor;
  border-color: color-mix(in srgb, currentColor 34%, transparent);
  padding-left: clamp(.5rem, 3vw, 1.7rem); padding-right: clamp(.5rem, 3vw, 1.7rem); }
.hcta-duo .hcta-vide .fleche { transition: transform .2s; font-weight: 400; }
.hcta-duo .hcta-vide:hover .fleche { transform: translateX(2px); }

/* Sur la vidéo, la couleur du texte de l'en-tête ne nous appartient pas :
   on la fixe. Dans la colonne d'ordinateur, `inherit` reprend la main. */
.im-head > .hcta-duo, .sp-head > .hcta-duo, .mt-head > .hcta-duo { color: #fff; }

@media (prefers-reduced-motion: reduce) {
  .hcta-duo .hcta-vide .fleche { transition: none; }
}