/* ===== carrousel.css — LES EXEMPLES QUI DÉFILENT ==========================
 *
 * Écrit le 25/08/2026 avec `carrousel.js`. Commun aux SIX pages qui portent des
 * offres : les quatre métiers, /entreprise/immobilier et /entreprise/surf.
 *
 * ⚠️ AUCUNE COULEUR EN DUR, AUCUNE VARIABLE DE PALETTE EMPRUNTÉE. Même règle
 * que `menu.css`, et pour la même raison : chaque monde a la sienne
 * (`--mt-*` sur les métiers, `--im-*` sur l'immobilier, `--sp-*` sur l'action),
 * et une feuille commune qui irait piocher dans l'une d'elles serait morte sur
 * les deux autres. Cette feuille déclare ses PROPRES variables `--carr-*` avec
 * un repli neutre ; c'est la feuille du monde qui les remplit.
 * ⚠️ Les replis ne sont pas décoratifs : sans eux, une page qui oublierait de
 * définir `--carr-accent` perdrait ses flèches sur un fond de la même couleur.
 *
 * ⚠️ CHARGER CETTE FEUILLE AVANT CELLE DU MONDE. Les deux touchent aux mêmes
 * objets à spécificité égale — c'est donc l'ordre qui tranche, et le monde doit
 * pouvoir habiller le carrousel. Même piège que `ask.css`, mis dans l'autre
 * sens le 31/07/2026 : les boutons de /pro étaient restés en pilule.
 */

.carr {
  --carr-accent: currentColor;
  --carr-encre: currentColor;
  --carr-filet: rgba(0, 0, 0, 0.14);
  --carr-fond: transparent;
  position: relative;
}

/* ===== LA PISTE ============================================================
   ⚠️ `overflow-x: auto` ET RIEN D'AUTRE — surtout pas `overflow: hidden` sur un
   ancêtre. Un ancêtre en `overflow` cassé rompt le `position: sticky` des
   fonds de parallaxe, et c'est précisément ce qui avait obligé `.cs-sec` à
   passer en `overflow-x: clip` sur /creation-site le 06/08/2026.
   ⚠️ `overscroll-behavior-x: contain` empêche le geste horizontal, une fois la
   piste au bout, de déclencher le « retour en arrière » du navigateur. Sur
   `x` seulement : sur les deux axes, il couperait aussi la continuité du
   défilement VERTICAL de la page, et le parallaxe se bloquerait au passage du
   carrousel. */
.carr-piste {
  /* La largeur d'une carte, écrite UNE FOIS : la marge intérieure de la piste
     s'en déduit, et c'est ce qui centre la première et la dernière. */
  --carr-w: min(62ch, 80vw);

  display: flex;
  /* ⚠️ `stretch` ET NON `center`, contrairement au carrousel de
     /creation-site. Là-bas les pièces avaient des hauteurs très différentes et
     les centrer était la demande. Ici ce sont trois cartes du même objet :
     mesurées à 375 px, elles font 688, 808 et 1023 px de haut. Centrées, leurs
     bords haut et bas tombaient à trois endroits différents et le jeu de
     cartes se lisait comme trois blocs qui flottent. Étirées, elles prennent
     toutes la hauteur de la plus longue — d'où le `height: 100%` posé sur
     `.offer-inner` dans la feuille de chaque monde. */
  align-items: stretch;
  gap: clamp(14px, 3vw, 28px);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  /* ⚠️ PAS DE `scroll-behavior: smooth` ICI, ET C'EST DÉLIBÉRÉ (25/08/2026).
     C'est `carrousel.js` qui fait glisser la piste, en rAF : le défilement
     doux du navigateur ne s'anime pas partout — mesuré à 0 px de déplacement
     après 900 ms dans le navigateur de vérification — et surtout, laissé ici,
     il se battrait avec le tween à chaque image. Ne pas le remettre. */
  /* ⚠️ LA MARGE INTÉRIEURE EST CALCULÉE, PAS CHOISIE : (largeur de piste −
     largeur de carte) ÷ 2. C'est elle qui permet à la PREMIÈRE et à la
     DERNIÈRE carte d'atteindre le centre — sans elle, les cartes des deux
     bouts restent collées au bord, jamais centrées, et le relief les montre
     tournées en permanence. Une valeur en vw écrite à la main s'en approchait
     par hasard tant que la carte faisait 84vw ; elle mentait dès qu'on
     touchait à l'une des deux. */
  padding: 34px calc((100% - var(--carr-w)) / 2) 40px;
  cursor: grab;
  /* la barre de défilement est masquée, jamais le défilement lui-même : les
     flèches et le doigt commandent, une barre horizontale sous des cartes en
     relief ferait un objet de plus à regarder */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.carr-piste::-webkit-scrollbar { display: none; }
.carr-piste:active { cursor: grabbing; }

/* ⚠️ `scroll-snap-align: center` et non `start` : les cartes n'ont pas toutes
   la même hauteur ni la même largeur utile selon la langue, et un calage sur
   le bord gauche décentrait le relief — la carte « au centre » ne l'était
   pas. */
.carr-slide {
  flex: 0 0 auto;
  width: var(--carr-w, min(62ch, 80vw));
  scroll-snap-align: center;
  /* ⚠️ LA PERSPECTIVE EST DANS LA TRANSFORMATION POSÉE PAR LE JS, pas ici et
     surtout pas sur `.carr-piste` : un `perspective` sur un ancêtre en fait un
     bloc conteneur (piège n° 2 du site). Cette ligne ne sert que d'état de
     départ, avant le premier calcul et pour qui n'a pas de JS. */
  transform: perspective(1200px);
  transform-origin: center center;
  transition: transform 0.28s ease-out, opacity 0.28s ease-out;
  will-change: transform, opacity;
}

/* ⚠️ SANS JAVASCRIPT, LES CARTES SONT À PLAT ET ENTIÈRES. `carrousel.js` pose
   `carr-vif` sur le conteneur ; tant qu'elle n'y est pas, aucune carte n'est
   ni tournée, ni voilée, ni rétrécie. Ne jamais écrire ici une règle qui
   masque ou dégrade une carte sans ce préfixe. */
.carr:not(.carr-vif) .carr-slide { opacity: 1; transform: none; }

/* ===== FLÈCHES ET PAGINATION ==============================================
   Fabriquées par le JS : une commande morte est pire que pas de commande.
   Elles sont SOUS la piste et non posées dessus — par-dessus, elles
   mordaient sur le texte des cartes voisines à 375 px. */
.carr-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 3vw, 20px);
  margin-top: -6px;
}
.carr-fleche {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  padding: 0;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--carr-encre);
  background: var(--carr-fond);
  border: 1px solid var(--carr-filet);
  border-radius: 50%;
  cursor: pointer;
  transition: opacity 0.2s, border-color 0.2s;
}
.carr-fleche:hover:not(:disabled) { border-color: var(--carr-accent); }
/* ⚠️ Désactivée, la flèche RESTE VISIBLE, seulement estompée : la faire
   disparaître déplacerait la pagination d'un cran à chaque bout de course. */
.carr-fleche:disabled { opacity: 0.3; cursor: default; }

.carr-points { display: flex; align-items: center; gap: 8px; }
.carr-point {
  width: 7px; height: 7px;
  padding: 0;
  background: var(--carr-filet);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}
.carr-point.is-la { background: var(--carr-accent); transform: scale(1.5); }

/* La zone tactile fait 40 px alors que la pastille en fait 7 : sans ça, viser
   un point de 7 px au doigt est un exercice, pas une commande. */
.carr-point::before {
  content: "";
  position: absolute;
  width: 40px; height: 40px;
  margin: -16px 0 0 -16px;
}
.carr-point { position: relative; }

/* ===== ACCESSIBILITÉ ======================================================= */
.carr-fleche:focus-visible,
.carr-point:focus-visible,
.carr-piste:focus-visible {
  outline: 2px solid var(--carr-accent);
  outline-offset: 3px;
}
/* La piste est focalisable pour le clavier, mais son contour ne doit pas
   s'afficher au clic à la souris — d'où `:focus-visible` seul. */
.carr-piste:focus { outline: none; }

/* ⚠️ MOINS D'ANIMATION : la piste ne glisse plus (le saut est instantané) et
   le JS renonce au relief. On coupe la ROTATION, pas seulement sa durée —
   c'est elle qui gêne. */
@media (prefers-reduced-motion: reduce) {
  .carr-slide { transition: none; transform: none; opacity: 1; }
  .carr-point { transition: none; }
}

/* ===== COMPARATEUR `?exemples=libres` — provisoire (25/08/2026) ===========
   ⚠️ `exemples` et non `cartes` : /realestate porte déjà `body[data-cartes]`.
   Voir l'en-tête de carrousel.js pour ce qui se joue. `egales` est le défaut
   et n'a besoin d'aucune règle ici : c'est le comportement normal de la piste.
   ⚠️ À RETIRER, avec le bloc correspondant de carrousel.js, dès que Lino a
   choisi. */
[data-exemples="libres"] .carr-piste { align-items: flex-start; }
[data-exemples="libres"] .carr-slide .offer-inner { height: auto; }
[data-exemples="libres"] .carr-slide .offer-deal { margin-top: 0; }

/* ==========================================================================
   COMPARATEUR D'ALLURE — `?carr=1|2|3` — PROVISOIRE (25/08/2026)
   --------------------------------------------------------------------------
   Lino : « ce carrousel c'est très moche », puis « propose-moi trois styles
   plus jolis ». Trois directions franchement différentes, pas trois réglages.
   Le mode par défaut (le relief actuel) n'a besoin d'aucune règle ici.
   ⚠️ À RETIRER avec les modes écartés, dès que le choix est fait. Voir
   l'en-tête de `carrousel.js` pour le détail de chaque piste. */

/* ===== ?carr=1 — RAIL SOBRE ===============================================
   Plus aucun 3D. Le pari : ce qui gênait, c'est la ROTATION sur des cartes
   qu'on lit, pas le défilement. Restent des cartes à plat, largement espacées,
   et un fondu sur les bords de la piste qui dit qu'il y a une suite sans
   déformer personne. */
[data-carr="rail"] .carr-piste {
  --carr-w: min(56ch, 78vw);
  gap: clamp(18px, 4vw, 40px);
  /* ⚠️ LE FONDU EST UN MASQUE, PAS UN DÉGRADÉ POSÉ PAR-DESSUS : un voile
     opaque aurait la couleur de la page, or la piste passe sur une PHOTO. Le
     masque, lui, rend la carte transparente et laisse voir la photo. */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
}
[data-carr="rail"] .carr-slide { transition: box-shadow 0.25s ease-out; }

/* ===== ?carr=2 — JEU DE CARTES ============================================
   Une seule carte de face, les suivantes empilées derrière, décalées vers le
   bas. Les flèches passent la carte du dessus. Rien ne défile.
   ⚠️ LA PISTE PERD SON DÉFILEMENT ET SON CALAGE : sans ça le navigateur
   essaierait encore de caler des cartes toutes posées au même endroit. */
[data-carr="jeu"] .carr-piste {
  --carr-w: min(58ch, 86vw);
  display: grid;
  overflow: visible;
  scroll-snap-type: none;
  padding: 18px 0 46px;
  cursor: default;
  justify-items: center;
}
/* ⚠️ TOUTES DANS LA MÊME CASE DE GRILLE : c'est ce qui les superpose sans
   `position: absolute`, donc en gardant la hauteur de la plus haute — le bloc
   ne saute pas quand on change de carte. */
[data-carr="jeu"] .carr-slide {
  grid-area: 1 / 1;
  width: var(--carr-w);
  transform-origin: 50% 0%;
  transition: transform 0.34s cubic-bezier(.22,.61,.36,1), opacity 0.34s ease-out;
}
/* ⚠️ `visibility` ET NON `display` : les cartes lointaines doivent continuer
   de compter dans la hauteur de la grille, sinon le bloc se rétracte dès qu'on
   avance et toute la page saute. */
[data-carr="jeu"] .carr-slide.est-loin { visibility: hidden; }
[data-carr="jeu"] .carr-piste:focus-visible { outline: none; }

/* ===== ?carr=3 — ONGLETS ==================================================
   Plus de carrousel : une rangée de titres, une carte à la fois. Zéro
   défilement horizontal — et surtout AUCUN VIDE, puisque les cartes ne sont
   jamais côte à côte et n'ont donc plus à partager une hauteur. C'est la
   réponse la plus directe au défaut vu sur les cartes courtes. */
[data-carr="onglets"] .carr-piste {
  --carr-w: min(62ch, 90vw);
  display: block;
  overflow: visible;
  scroll-snap-type: none;
  padding: 6px 0 34px;
  cursor: default;
}
[data-carr="onglets"] .carr-slide {
  width: min(62ch, 90vw);
  margin-inline: auto;
  transform: none;
  opacity: 1;
  display: none;
}
[data-carr="onglets"] .carr-slide.est-au-centre { display: block; }
/* ⚠️ Les flèches et la pagination N'ONT PLUS DE RAISON D'ÊTRE ici : les
   onglets disent déjà où l'on est et permettent d'aller n'importe où d'un
   coup. Deux commandes pour la même chose, c'en est une de trop. */
[data-carr="onglets"] .carr-nav { display: none; }

.carr-onglets {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 0 auto 4px;
  padding: 0 16px;
  max-width: 62ch;
}
.carr-onglet {
  padding: 0.5rem 0.9rem;
  font-family: var(--carr-sans, inherit);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--carr-encre);
  background: var(--carr-fond);
  border: 1px solid var(--carr-filet);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.carr-onglet:hover { border-color: var(--carr-accent); }
.carr-onglet.is-la {
  color: var(--carr-sur-accent, #fff);
  background: var(--carr-accent);
  border-color: var(--carr-accent);
}
.carr-onglet:focus-visible { outline: 2px solid var(--carr-accent); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  [data-carr="jeu"] .carr-slide { transition: none; }
}

/* ===== LES TROIS DÉCLINAISONS DU JEU DE CARTES — `?carr=2a|2b|2c` ==========
   Le jeu de cartes a été retenu le 25/08/2026 ; il reste à choisir sa position
   de repos. Le détail de chaque piste est en tête de `carrousel.js`.
   ⚠️ La carte de FACE est identique dans les trois : opaque, jamais tournée,
   pleinement lisible. Seules changent les cartes du dessous. */

/* La transition porte aussi le flou, sinon la variante « profondeur » saute
   d'une netteté à l'autre au lieu de faire la mise au point. */
[data-carr="jeu"] .carr-slide {
  transition: transform 0.34s cubic-bezier(.22,.61,.36,1),
              opacity 0.34s ease-out,
              filter 0.34s ease-out;
}

/* ===== 2a — ÉVENTAIL ======================================================
   ⚠️ LES CARTES SONT RÉTRÉCIES À 80 vw, ET C'EST OBLIGATOIRE. Le décalage
   latéral déborde à droite : deux cartes à 16 px font 32 px de plus que la
   carte de face. À 375 px il reste 37 px de marge de chaque côté — ça tient.
   Élargir les cartes OU augmenter le décalage fait DÉFILER LA PAGE
   HORIZONTALEMENT, ce que rien d'autre sur le site ne fait. Mesuré. */
[data-jeu="a"] .carr-piste { --carr-w: min(56ch, 78vw); padding-bottom: 52px; }
[data-jeu="a"] .carr-slide { transform-origin: 0% 50%; }

/* ===== 2b — CHEMISE =======================================================
   Les cartes du dessous dépassent PAR LE HAUT. Il faut donc leur réserver la
   place en haut de la piste — sans ça, elles passent sous la barre de menu ou
   sont rognées par ce qui précède. `padding-bottom` retombe à ce qu'il faut
   pour les flèches, le bloc ne grandissant plus vers le bas. */
[data-jeu="b"] .carr-piste { padding-top: 52px; padding-bottom: 34px; }
/* ⚠️⚠️ ORIGINE EN HAUT (`50% 0%`) ET NON EN BAS, et c'est ce qui fait marcher
   la variante. Avec l'origine en bas, la réduction d'échelle fait DESCENDRE le
   haut de la carte de (1 − échelle) × sa hauteur — soit 55 px sur une carte de
   1 094 px — ce qui avale largement les 13 px de décalage vers le haut : les
   cartes du dessous dépassaient par le BAS, exactement l'inverse de l'effet
   voulu. Mesuré avant correction : sommets à 52, 90 et 129 px au lieu de 52,
   39 et 26. Avec l'origine en haut, le sommet ne bouge pas à la réduction et le
   décalage négatif fait seul le travail. */
[data-jeu="b"] .carr-slide { transform-origin: 50% 0%; }

/* ===== 2c — PROFONDEUR ====================================================
   ⚠️ `will-change` NE MENTIONNE PAS `filter`, volontairement : réserver une
   couche composite pour un flou qui ne bouge qu'au changement de carte coûte
   de la mémoire vidéo en permanence, sur des cartes qui font plus de 1 000 px
   de haut. La transition suffit.
   ⚠️ Le flou est posé par le JS sur les cartes du dessous SEULEMENT. La carte
   de face reste nette : on ne floute pas ce qu'on demande de lire. */
[data-jeu="c"] .carr-piste { padding-bottom: 58px; }
[data-jeu="c"] .carr-slide { transform-origin: 50% 0%; }

@media (prefers-reduced-motion: reduce) {
  [data-carr="jeu"] .carr-slide { transition: none; }
}

/* ===== LES FLÈCHES SUR LES CÔTÉS (Lino, 25/08/2026) =======================
   Elles ne sont plus sous la piste mais de part et d'autre des cartes.

   ⚠️⚠️ `sticky`, ET C'EST LE CŒUR DU MONTAGE. Une carte fait plus de 1 000 px
   de haut pour un écran de 812 : des flèches centrées sur la HAUTEUR DU
   CARROUSEL tomberaient hors de l'écran neuf fois sur dix, et il faudrait
   chercher où elles sont. Collées à 46 % de la hauteur de l'ÉCRAN, elles
   accompagnent le défilement et restent sous le pouce tant qu'on est dans le
   carrousel. Ne pas les repasser en `absolute` avec un `top: 50%`.
   ⚠️ 46 vh et non 50 : la barre de menu flottante occupe le haut, et le pouce
   d'une main qui tient le téléphone tombe naturellement un peu au-dessus du
   milieu.
   ⚠️ LA COUCHE NE PREND PAS LES CLICS (`pointer-events: none`), les flèches si.
   Sans ça, deux bandes transparentes couvriraient les cartes sur toute leur
   hauteur et avaleraient les clics sur « Demander ». */
/* ⚠️ FLÈCHES FIXÉES SUR LES CÔTÉS DES CARTES (Lino, 26/08/2026 : « les flèches
   bougent quand on scrolle, je veux qu'elles soient fixes sur les côtés des
   cartes »). Avant, chaque flèche était `position: sticky; top: 46vh` : elle
   suivait le défilement pour rester à mi-écran. Désormais la couche est cadrée
   sur la LARGEUR D'UNE CARTE (rail : `min(56ch, 78vw)`) et centrée
   VERTICALEMENT sur la hauteur du carrousel — les flèches se posent donc sur
   les bords des cartes et défilent AVEC elles. Elles peuvent sortir de l'écran
   quand on a fait défiler la carte, c'est voulu : elles appartiennent aux
   cartes, pas à l'écran.
   ⚠️ Cadrée sur `min(56ch, 78vw)` comme la piste du rail : si la largeur du
   rail change dans `[data-carr="rail"] .carr-piste`, la reporter ici. */
.carr-cotes {
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(56ch, 78vw);
  display: flex;
  align-items: center;
  justify-content: space-between;
  pointer-events: none;
  z-index: 200;
}
.carr-cotes .carr-fleche {
  position: static;
  pointer-events: auto;
  margin: 0;
  width: 42px; height: 42px;
  font-size: 1.6rem;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}
/* ⚠️ CHAQUE FLÈCHE EST CENTRÉE SUR LE BORD DE LA CARTE : la gauche débordant de
   moitié à gauche, la droite de moitié à droite. Le fond opaque et l'ombre les
   détachent du texte qu'elles couvrent en partie. */
.carr-cotes .carr-prec { transform: translateX(-50%); }
.carr-cotes .carr-suiv { transform: translateX(50%); }
/* Le fond des flèches doit être OPAQUE ici, alors qu'il pouvait être translucide
   sous la piste : posées sur une carte, elles laisseraient lire le texte au
   travers. `--carr-fleche-fond` est rempli par la feuille de chaque monde. */
.carr-cotes .carr-fleche { background: var(--carr-fleche-fond, var(--carr-fond)); }

/* La pagination reste sous la piste, seule. */
.carr-nav { gap: 8px; }

@media (prefers-reduced-motion: reduce) {
  .carr-cotes .carr-fleche { transition: none; }
}