/* Éléments communs, retravaillés un par un (présentés sur /charte/).
   Règle : chaque élément reprend TOUS les effets de l'existant (reflet, halo, bordure qui tourne, onde,
   flèche qui glisse) et monte d'un niveau. Fait : les boutons (03/11/2026). */

:root {
  --courbe: cubic-bezier(.2, .8, .2, 1);
  --rebond: cubic-bezier(.3, 1.6, .5, 1);
}
@property --ang { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

/* ================= BOUTONS =================
   .bouton            bleu océan : aller vers une page
   .bouton-vert       lagon (vert → bleu) : être rappelé, faire le test — halo qui pulse, téléphone qui sonne
   .bouton-prestige   bordure arc-en-ciel qui tourne (ex « Être rappelé » de l'accueil), fond blanc
   .bouton-verre      sur photo ou fond bleu : verre dépoli
   .bouton-contour    secondaire : le bleu remplit le bouton au survol
   .bouton-riche      deux lignes + séparateur + chevron (ex boutons des tarifs), en bleu, vert ou or
   .bouton-rond       icône seule, onde autour (appel flottant, recherche)
   .lien-fl           lien fléché, soulignement qui se trace
   Tailles : .bt-s, (normal), .bt-l. États : :focus-visible, [aria-disabled], .charge, .fait.
   Effets communs : reflet qui passe toutes les 5 s, lumière qui suit le doigt ou la souris (--mx/--my, boutons.js),
   onde au clic (boutons.js), flèche qui sort à droite et revient par la gauche. */

.bouton { --c1: var(--b2); --c2: var(--b1); --ombre: 28 125 179;
  position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 11px;
  min-height: 52px; padding: 0 26px; border: 0; border-radius: 12px; cursor: pointer; white-space: nowrap; text-decoration: none;
  font: inherit; font-size: 15.5px; font-weight: 600; line-height: 1.2; letter-spacing: .005em; color: #fff;
  background: linear-gradient(110deg, var(--c1), var(--c2), var(--c1)) 0 0 / 220% 100%;
  box-shadow: 0 1px 0 rgb(255 255 255 / .25) inset, 0 12px 24px -12px rgb(var(--ombre) / .85);
  transition: transform .35s var(--rebond), box-shadow .35s, background-position .8s var(--courbe), color .3s;
  -webkit-tap-highlight-color: transparent; }
.bouton > * { position: relative; z-index: 2; }
.bouton svg { width: 19px; height: 19px; flex: none; }
.bouton:hover { color: #fff; transform: translateY(-3px); background-position: 100% 0;
  box-shadow: 0 1px 0 rgb(255 255 255 / .3) inset, 0 20px 34px -14px rgb(var(--ombre) / .95); }
.bouton:active { transform: translateY(-1px) scale(.97); transition-duration: .12s; }
.bouton:focus-visible { outline: 0; box-shadow: 0 0 0 3px #fff, 0 0 0 6px rgb(var(--ombre) / .55); }

/* reflet qui passe tout seul (repris de btn-reflet / rp-btn / eh-btn), animé par transform */
.bouton::after { content: ""; position: absolute; z-index: 1; top: -20%; bottom: -20%; left: 0; width: 34%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgb(255 255 255 / .5), transparent); transform: translateX(-160%) skewX(-20deg);
  animation: bt-reflet 5s ease-in-out infinite; animation-delay: var(--retard, 1s); }
@keyframes bt-reflet { 0%, 62% { transform: translateX(-160%) skewX(-20deg); } 100% { transform: translateX(420%) skewX(-20deg); } }
/* lumière qui suit la souris */
.bouton::before { content: ""; position: absolute; z-index: 1; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .3s;
  background: radial-gradient(160px circle at var(--mx, 50%) var(--my, 50%), rgb(255 255 255 / .32), transparent 60%); }
.bouton:hover::before { opacity: 1; }
/* onde au clic (span ajouté par boutons.js) */
.bouton .onde { position: absolute; z-index: 1; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%; pointer-events: none;
  background: rgb(255 255 255 / .45); transform: scale(0); animation: bt-onde .65s ease-out forwards; }
@keyframes bt-onde { to { transform: scale(18); opacity: 0; } }

/* icône dans une pastille translucide */
.bouton .ic { display: grid; place-items: center; width: 32px; height: 32px; margin-left: -10px; padding: 7px; border-radius: 50%;
  background: rgb(255 255 255 / .2); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .25); transition: transform .4s var(--rebond), background .3s; }
.bouton .ic svg { width: 18px; height: 18px; }
.bouton:hover .ic { transform: scale(1.1) rotate(-8deg); background: rgb(255 255 255 / .3); }
/* flèche : sort à droite, revient par la gauche */
.bouton .fl-d { overflow: hidden; display: grid; width: 19px; height: 19px; }
.bouton .fl-d svg { grid-area: 1 / 1; transition: transform .45s var(--courbe); }
.bouton .fl-d svg + svg { transform: translateX(-130%); }
.bouton:hover .fl-d svg:first-child { transform: translateX(130%); }
.bouton:hover .fl-d svg + svg { transform: none; }

/* --- lagon : vert → bleu, halo qui pulse, téléphone qui sonne --- */
.bouton-vert { --c1: var(--g); --c2: var(--b2); --ombre: 21 151 83; animation: bt-halo 2.6s ease-out infinite; }
@keyframes bt-halo { 0% { box-shadow: 0 1px 0 rgb(255 255 255 / .25) inset, 0 12px 24px -12px rgb(21 151 83 / .85), 0 0 0 0 rgb(21 151 83 / .45); }
  70%, 100% { box-shadow: 0 1px 0 rgb(255 255 255 / .25) inset, 0 12px 24px -12px rgb(21 151 83 / .85), 0 0 0 14px rgb(21 151 83 / 0); } }
.bouton-vert:hover { animation: none; }
.bouton-vert:hover .ic.sonne svg, .bouton .ic.sonne svg { transform-origin: 50% 60%; }
.bouton-vert:hover .ic.sonne svg { animation: bt-sonne .9s ease-in-out; }
@keyframes bt-sonne { 0%, 100% { transform: none; } 15% { transform: rotate(-16deg); } 30% { transform: rotate(14deg); } 45% { transform: rotate(-10deg); } 60% { transform: rotate(8deg); } 75% { transform: rotate(-4deg); } }

/* --- prestige : bordure arc-en-ciel qui tourne (pq-btn), plus vite au survol --- */
.bouton-prestige { --ombre: 15 42 61; color: var(--g); border: 3px solid transparent;
  background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from var(--ang), var(--b2), var(--jaune), var(--g), var(--b2)) border-box;
  animation: bt-tour 3s linear infinite; box-shadow: 0 14px 30px -12px rgb(15 42 61 / .5); }
@keyframes bt-tour { to { --ang: 360deg; } }
.bouton-prestige:hover { color: var(--g); animation-duration: 1.2s;
  background: linear-gradient(#f3fbf7, #eaf5fd) padding-box, conic-gradient(from var(--ang), var(--b2), var(--jaune), var(--g), var(--b2)) border-box; }
.bouton-prestige::after { background: linear-gradient(100deg, transparent, rgb(40 163 230 / .16), transparent); }
.bouton-prestige::before { background: radial-gradient(140px circle at var(--mx, 50%) var(--my, 50%), rgb(40 163 230 / .14), transparent 60%); }
.bouton-prestige .ic, .bouton-prestige:hover .ic { color: #fff; background: linear-gradient(135deg, var(--g), var(--b2)); box-shadow: none; }
.bouton-prestige .onde { background: rgb(21 151 83 / .25); }

/* --- verre : sur photo ou fond de couleur --- */
.bouton-verre { --ombre: 8 30 48; background: linear-gradient(160deg, rgb(255 255 255 / .28), rgb(255 255 255 / .1)); box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / .6), 0 12px 26px -14px rgb(8 30 48 / .6);
  -webkit-backdrop-filter: blur(12px) saturate(1.5); backdrop-filter: blur(12px) saturate(1.5); }
.bouton-verre:hover { background: rgb(255 255 255 / .24); box-shadow: inset 0 0 0 1.5px #fff, 0 20px 34px -14px rgb(8 30 48 / .7); }

/* --- contour : le bleu remplit le bouton depuis la gauche --- */
.bouton-contour { color: var(--b1); background: linear-gradient(110deg, var(--b2), var(--b1)) 0 0 / 0% 100% no-repeat, #fff;
  box-shadow: inset 0 0 0 1.5px rgb(28 125 179 / .4), 0 8px 18px -14px rgb(28 125 179 / .6);
  transition: transform .35s var(--rebond), box-shadow .35s, background-size .45s var(--courbe), color .3s; }
.bouton-contour::after { animation: none; }
.bouton-contour:hover { color: #fff; background-size: 100% 100%; box-shadow: inset 0 0 0 1.5px var(--b1), 0 18px 30px -14px rgb(28 125 179 / .8); }
.bouton-contour .ic { color: var(--b1); background: var(--lb); box-shadow: none; transition: transform .4s var(--rebond), background .3s, color .3s; }
.bouton-contour:hover .ic { color: #fff; background: rgb(255 255 255 / .22); }
.bouton-contour .onde { background: rgb(255 255 255 / .5); }

/* --- riche : deux lignes, séparateur, chevron (boutons des tarifs), couleur qui ondule et halo --- */
.bouton-riche { min-height: 64px; gap: 16px; padding: 0 22px; border-radius: 14px; text-align: left; animation: bt-ondule 5s ease infinite; }
.bouton-riche .bl { display: flex; flex-direction: column; gap: 2px; font-size: 17px; font-weight: 700; line-height: 1.15; }
.bouton-riche .bl small { font-size: 12.5px; font-weight: 500; letter-spacing: .02em; opacity: .88; }
.bouton-riche .sep { width: 1px; align-self: stretch; margin: 14px 0; background: rgb(255 255 255 / .4); }
.bouton-riche.or { --c1: #f7c948; --c2: #eea200; --ombre: 200 140 0; color: var(--ink); }
.bouton-riche.or .sep { background: rgb(15 42 61 / .25); }
.bouton-riche.or:hover { color: var(--ink); }
@keyframes bt-ondule { 0%, 100% { background-position: 0 0; } 50% { background-position: 100% 0; } }

/* --- rond : icône seule, onde qui s'élargit (appel flottant) --- */
.bouton-rond { width: 58px; min-height: 58px; height: 58px; padding: 0; border-radius: 50%; overflow: visible; }
.bouton-rond::after { top: 0; bottom: 0; left: 0; width: 100%; border-radius: 50%; transform: none; background: none; box-shadow: 0 0 0 2px var(--c1);
  animation: bt-cercle 2.2s ease-out infinite; }
@keyframes bt-cercle { from { transform: scale(1); opacity: .9; } to { transform: scale(1.65); opacity: 0; } }
.bouton-rond svg { width: 24px; height: 24px; }
.bouton-rond .onde { display: none; }

/* --- lien fléché --- */
.lien-fl { display: inline-flex; align-items: center; gap: 7px; padding-bottom: 2px; font-weight: 600; color: var(--b1); text-decoration: none;
  background: linear-gradient(90deg, var(--b2), var(--g)) 0 100% / 0% 2px no-repeat; transition: background-size .4s var(--courbe), color .3s; }
.lien-fl svg { width: 17px; height: 17px; transition: transform .35s var(--courbe); }
.lien-fl:hover { color: var(--b1); background-size: 100% 2px; }
.lien-fl:hover svg { transform: translateX(5px); }

/* --- tailles --- */
.bt-s { min-height: 42px; padding: 0 18px; font-size: 14px; border-radius: 10px; gap: 8px; }
.bt-s .ic { width: 26px; height: 26px; padding: 6px; margin-left: -8px; }
.bt-l { min-height: 62px; padding: 0 32px; font-size: 17px; border-radius: 14px; }
.bt-l .ic { width: 38px; height: 38px; padding: 9px; margin-left: -14px; }
.bt-plein { display: flex; width: 100%; }

/* --- états --- */
.bouton[aria-disabled="true"] { pointer-events: none; filter: grayscale(.6); opacity: .55; animation: none; }
.bouton[aria-disabled="true"]::after { display: none; }
.bouton.charge { pointer-events: none; }
.bouton.charge .ic svg { opacity: 0; }
.bouton.charge .ic::after { content: ""; position: absolute; width: 16px; height: 16px; border-radius: 50%; border: 2.5px solid rgb(255 255 255 / .35); border-top-color: #fff;
  animation: bt-tourne .8s linear infinite; }
.bouton.charge .ic { position: relative; }
@keyframes bt-tourne { to { transform: rotate(360deg); } }
.bouton.fait { --c1: var(--g); --c2: #1a9e8f; --ombre: 21 151 83; pointer-events: none; }
.bouton.fait .ic { background: #fff; color: var(--g); animation: bt-pop .5s var(--rebond); }
@keyframes bt-pop { from { transform: scale(.3); } }

.boutons { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
@media (max-width: 600px) { .boutons > .bouton:not(.bouton-rond) { flex: 1 1 100%; } }
@media (hover: none) { .bouton::before { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .bouton, .bouton::after, .bouton-vert, .bouton-prestige, .bouton-riche { animation: none; }
}
.bouton-riche.bouton-vert { animation: bt-ondule 5s ease infinite, bt-halo 2.6s ease-out infinite; }

/* ================= CARTES SERVICES : « fiche flottante » (direction C, choisie le 03/11/2026) =================
   Balisage : .cs.cs-fiche > .cs-media (photo, pastille) + .cs-corps (icône, titre, texte, pied).
   Formats : normal, .cs-large (mise en avant), .cs-ligne (horizontale, colonne), .cs-mini (compacte).
   Effets gardés de la carte « sv » : soulèvement, zoom et saturation de la photo, brillance toutes les 8 s,
   trait dégradé qui se trace, pastille qui saute puis bouge, arrivée en cascade, flèche ronde.
   Ajoutés : inclinaison 3D et lumière qui suivent la souris (cartes.js), icône du service animée. */
.cs-grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; perspective: 1200px; }
@media (max-width: 960px) { .cs-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .cs-grille { grid-template-columns: 1fr; gap: 20px; } }

.cs { --rx: 0deg; --ry: 0deg; --ty: 0px;
  position: relative; isolation: isolate; display: flex; flex-direction: column; border-radius: 18px; color: var(--ink); text-decoration: none;
  transform: rotateX(var(--rx)) rotateY(var(--ry)) translateY(var(--ty)); transition: transform .5s var(--courbe), box-shadow .5s, border-color .4s; }
.cs:hover { --ty: -7px; color: var(--ink); }
.cs.inclinee { transition: transform .12s linear, box-shadow .5s, border-color .4s; }
.cs::before { content: ""; position: absolute; z-index: 5; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .4s;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 30%), rgb(255 255 255 / .3), transparent 60%); mix-blend-mode: soft-light; }
.cs:hover::before { opacity: 1; }

.cs-media { position: relative; overflow: hidden; background: var(--lb); }
.cs-media img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; transform: scale(1.02);
  transition: transform 1.1s var(--courbe), filter .7s; }
.cs:hover .cs-media img { transform: scale(1.1); filter: saturate(1.12) contrast(1.04); }
/* brillance qui traverse la photo toutes les 8 s, décalée d'une carte à l'autre */
.cs-media::before { content: ""; position: absolute; z-index: 2; top: -10%; bottom: -10%; left: 0; width: 35%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgb(255 255 255 / .45), transparent); transform: translateX(-180%) skewX(-20deg);
  animation: cs-brille 8s ease-in-out infinite; animation-delay: calc(1.5s + var(--i, 0) * .35s); }
@keyframes cs-brille { 0% { transform: translateX(-180%) skewX(-20deg); } 14%, 100% { transform: translateX(420%) skewX(-20deg); } }

.cs-tag { position: absolute; z-index: 3; top: 12px; left: 12px; padding: 4px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 700; line-height: 1.3;
  color: var(--ink); background: var(--jaune); box-shadow: 0 4px 12px -3px rgb(15 42 61 / .45); }
/* arrivée en cascade : la grille porte data-apparait, les cartes entrent l'une après l'autre */
.js .cs-grille[data-apparait] { transform: none; }
.js .cs-grille:not(.vu) .cs { opacity: 0; }
.js .cs-grille.vu .cs { animation: cs-entre .9s var(--rebond) backwards; animation-delay: calc(var(--i, 0) * 110ms); }
@keyframes cs-entre { from { opacity: 0; transform: translateY(28px) scale(.95); } }
.js .cs-grille:not(.vu) .cs-tag { opacity: 0; }
.js .cs-grille.vu .cs-tag { opacity: 1; animation: cs-pop .55s var(--rebond) .7s backwards, cs-bouge 4s ease-in-out 2.2s infinite; }
@keyframes cs-pop { from { opacity: 0; transform: scale(.4) rotate(-8deg); } }
@keyframes cs-bouge { 0%, 75%, 100% { transform: none; } 81% { transform: rotate(-5deg) scale(1.08); } 88% { transform: rotate(4deg) scale(1.08); } }

.cs-corps { position: relative; z-index: 2; display: flex; flex-direction: column; }
.cs-ic { display: grid; place-items: center; flex: none; width: 54px; height: 54px; padding: 14px; border-radius: 16px; color: var(--b1); background: #fff;
  box-shadow: 0 10px 22px -10px rgb(15 42 61 / .45), inset 0 0 0 1px rgb(28 125 179 / .12); transition: transform .5s var(--rebond), background .4s, color .4s; }
.cs:hover .cs-ic { transform: rotate(-8deg) scale(1.08); color: #fff; background: linear-gradient(135deg, var(--b2), var(--b1)); }
.cs h3 { font-size: 20px; font-weight: 700; line-height: 1.25; color: inherit; transition: color .3s; }
.cs p { font-size: 14.5px; line-height: 1.6; color: var(--mute); }
.cs-pied { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 16px; }
.cs-lien { padding-bottom: 2px; font-size: 14.5px; font-weight: 600; color: var(--b1);
  background: linear-gradient(90deg, var(--b2), var(--g)) 0 100% / 0% 2px no-repeat; transition: background-size .45s var(--courbe); }
.cs:hover .cs-lien { background-size: 100% 2px; }
.cs-go { display: grid; place-items: center; flex: none; width: 38px; height: 38px; padding: 10px; border-radius: 50%; color: #fff;
  background: linear-gradient(135deg, var(--b2), var(--b1)); box-shadow: 0 8px 16px -8px rgb(28 125 179 / .9); overflow: hidden; transition: transform .45s var(--rebond); }
.cs-go svg { stroke-width: 2.6; grid-area: 1 / 1; transition: transform .45s var(--courbe); }
.cs-go svg + svg { transform: translateX(-160%); }
.cs:hover .cs-go { transform: scale(1.08); }
.cs:hover .cs-go svg:first-child { transform: translateX(160%); }
.cs:hover .cs-go svg + svg { transform: none; }

/* --- fiche flottante : photo arrondie, fiche blanche qui la chevauche, icône ronde au centre --- */
.cs-fiche .cs-media { aspect-ratio: 654 / 490; border-radius: 18px; box-shadow: 0 14px 30px -18px rgb(15 42 61 / .6); }
.cs-fiche .cs-media::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, transparent 50%, rgb(15 42 61 / .35)); }
.cs-fiche .cs-corps { flex: 1; align-items: center; margin: -62px 16px 0; padding: 40px 22px 22px; border-radius: 16px; text-align: center; background: #fff;
  box-shadow: 0 2px 4px rgb(15 42 61 / .05), 0 18px 34px -20px rgb(15 42 61 / .5); transition: transform .5s var(--courbe), box-shadow .5s; }
.cs-fiche:hover .cs-corps { transform: translateY(-10px); box-shadow: 0 2px 4px rgb(15 42 61 / .05), 0 30px 46px -22px rgb(28 125 179 / .55); }
.cs-fiche .cs-ic { position: absolute; top: -28px; left: 50%; margin-left: -28px; width: 56px; height: 56px; color: #fff; border-radius: 50%;
  background: linear-gradient(135deg, var(--b2), var(--b1)); box-shadow: 0 0 0 5px #fff, 0 12px 22px -8px rgb(28 125 179 / .8); }
.cs-fiche:hover .cs-ic { transform: rotate(-10deg) scale(1.1); background: linear-gradient(135deg, var(--g), var(--b2)); }
.cs-fiche:hover h3 { color: var(--b1); }
.cs-fiche p { margin-top: 8px; }
.cs-fiche .cs-pied { justify-content: center; }
.cs-fiche .cs-corps::after { content: ""; position: absolute; left: 22px; right: 22px; bottom: 0; height: 3px; border-radius: 3px 3px 0 0;
  background: linear-gradient(90deg, var(--b1), var(--b2), var(--g)); transform: scaleX(.18); transition: transform .6s var(--courbe); }
.cs-fiche:hover .cs-corps::after { transform: scaleX(1); }

/* --- mise en avant : photo à gauche, fiche qui la chevauche à droite, liste de liens (les permis) --- */
.cs-fiche.cs-large { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: center; }
.cs-large .cs-media { aspect-ratio: 16 / 10; border-radius: 22px; }
.cs-large .cs-corps { align-items: flex-start; margin: 0 0 0 -90px; padding: 46px 36px 32px; text-align: left; border-radius: 20px; }
.cs-large:hover .cs-corps { transform: translateX(-8px); }
.cs-large .cs-ic { top: -28px; left: 36px; margin-left: 0; }
.cs-large h3 { font-size: clamp(22px, 2.2vw, 28px); }
.cs-large p { font-size: 15.5px; }
.cs-large .cs-pied { justify-content: flex-start; padding-top: 20px; }
.cs-large .cs-corps::after { left: 36px; right: 36px; transform-origin: left; }
.cs-puces { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.cs-puces span { padding: 5px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--b1); background: var(--lb); transition: background .3s, color .3s, transform .3s var(--rebond); }
.cs-puces span:hover { color: #fff; background: var(--b1); transform: translateY(-2px); }
@media (max-width: 860px) {
  .cs-fiche.cs-large { grid-template-columns: 1fr; }
  .cs-large .cs-corps { margin: -60px 14px 0; padding: 42px 22px 24px; }
  .cs-large:hover .cs-corps { transform: translateY(-8px); }
}

/* --- horizontale : pour la colonne des pages et les listes (« autres services ») --- */
.cs-grille.cs-pile { grid-template-columns: 1fr; gap: 16px; perspective: none; }
.cs-fiche.cs-ligne { flex-direction: row; align-items: center; }
.cs-ligne .cs-media { flex: none; width: 36%; aspect-ratio: 4 / 5; border-radius: 16px; }
.cs-ligne .cs-corps { align-items: flex-start; margin: 0 0 0 -26px; padding: 18px 16px 16px 30px; text-align: left; border-radius: 14px; }
.cs-ligne:hover .cs-corps { transform: translateX(6px); }
.cs-ligne .cs-ic { top: 50%; left: -20px; width: 42px; height: 42px; padding: 11px; margin: -21px 0 0; box-shadow: 0 0 0 4px #fff, 0 10px 18px -8px rgb(28 125 179 / .8); }
.cs-ligne h3 { font-size: 16.5px; }
.cs-ligne p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 4px; font-size: 13.5px; line-height: 1.5; }
.cs-ligne .cs-pied { padding-top: 10px; }
.cs-ligne .cs-lien { font-size: 13.5px; }
.cs-ligne .cs-go { width: 30px; height: 30px; padding: 8px; }
.cs-ligne .cs-corps::after { left: 30px; right: 16px; transform-origin: left; }
.cs-ligne .cs-tag { top: 8px; left: 8px; font-size: 11px; padding: 3px 8px; }

/* --- compacte : icône, titre, flèche (grilles denses, 4 par ligne) --- */
.cs-grille.c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.cs-mini .cs-media { aspect-ratio: 4 / 3; border-radius: 16px; }
.cs-mini .cs-corps { margin: -40px 12px 0; padding: 32px 14px 16px; }
.cs-mini .cs-ic { top: -24px; width: 48px; height: 48px; margin-left: -24px; padding: 12px; }
.cs-mini h3 { font-size: 16.5px; }
.cs-mini .cs-pied { padding-top: 10px; }
.cs-mini .cs-go { width: 32px; height: 32px; padding: 8px; }
@media (max-width: 960px) { .cs-grille.c4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* --- mobile : la grille devient une rangée qu'on fait glisser au doigt (9 cartes = 1 écran au lieu de 6) --- */
@media (max-width: 600px) {
  .cs-grille.glisse-mob { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 80%; gap: 14px; overflow-x: auto; overscroll-behavior-x: contain;
    margin: 0 -15px; padding: 34px 15px 30px; scroll-snap-type: x mandatory; scroll-padding: 0 15px; scrollbar-width: none; perspective: none; }
  .cs-grille.glisse-mob::-webkit-scrollbar { display: none; }
  .cs-grille.glisse-mob > .cs { scroll-snap-align: start; }
  .cs-grille.c4.glisse-mob { grid-auto-columns: 58%; }
}
.cs-points { display: none; }
@media (max-width: 600px) {
  .cs-points { display: flex; justify-content: center; gap: 6px; margin-top: -14px; }
  .cs-points i { width: 7px; height: 7px; border-radius: 99px; background: #c9dceb; transition: width .3s, background .3s; }
  .cs-points i.actif { width: 22px; background: linear-gradient(90deg, var(--b2), var(--b1)); }
}

@media (prefers-reduced-motion: reduce) { .cs-media::before, .js .cs-grille.vu .cs, .js .cs-grille.vu .cs-tag { animation: none; } }

/* ================= PARCOURS (étapes) — en cours =================
   Repris de l'existant : trait dégradé qui se trace à l'arrivée, icône qui tourne au survol, dernière étape en vert, délais (FAQ).
   Ajouté : un avion parcourt le trait, chaque étape s'allume quand il passe (cercle qui se remplit, onde, numéro qui saute),
   l'arrivée se pose en vert avec une coche et un halo qui pulse ; sur mobile, frise verticale qui avance avec le défilement.
   Balisage : .parcours[data-parcours] (--n = nombre d'étapes) > .pc-piste (.pc-trait, .pc-avion) + ol.pc-etapes > li.pc-etape (--i).
   Variantes : (normal) pages permis, .pc-mini FAQ et délais. Script : parcours.js. */
.parcours { --n: 3; --duree: 2.4s; --ic: 78px; position: relative; }
.pc-etapes { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 22px; margin: 0; padding: 0; list-style: none; }
.pc-etape { display: flex; flex-direction: column; align-items: center; text-align: center; }

/* piste : du centre de la 1re icône au centre de la dernière ; pointillés dessous, trait dégradé qui se trace */
.pc-piste { position: absolute; z-index: 0; top: calc(var(--ic) / 2 - 2px); height: 4px;
  left: calc((100% - (var(--n) - 1) * 22px) / var(--n) / 2); right: calc((100% - (var(--n) - 1) * 22px) / var(--n) / 2);
  border-radius: 4px; background: repeating-linear-gradient(90deg, #c9dceb 0 8px, transparent 8px 15px); }
.pc-trait { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, var(--b1), var(--b2), var(--g));
  transform: scaleX(0); transform-origin: left; transition: transform var(--duree) cubic-bezier(.55, .1, .35, 1); }
.en-route .pc-trait { transform: scaleX(1); }
.pc-avion { position: absolute; z-index: 2; top: 50%; left: 0; display: grid; place-items: center; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%;
  color: #fff; background: linear-gradient(135deg, var(--b2), var(--b1)); box-shadow: 0 0 0 5px #fff, 0 12px 22px -8px rgb(28 125 179 / .9); opacity: 0; }
.pc-avion svg { width: 22px; height: 22px; fill: currentColor; stroke: none; transform: rotate(90deg); }
.en-route .pc-avion { animation: pc-vol var(--duree) cubic-bezier(.55, .1, .35, 1) forwards; }
@keyframes pc-vol { 0% { left: 0; opacity: 0; transform: scale(.6); } 8% { opacity: 1; transform: none; } 88% { opacity: 1; transform: none; }
  100% { left: 100%; opacity: 0; transform: scale(.4) translateY(-6px); } }

/* station : cercle, icône, numéro */
.pc-ic { position: relative; display: grid; place-items: center; width: var(--ic); height: var(--ic); padding: calc(var(--ic) * .3); border-radius: 50%;
  color: var(--b1); background: #fff; box-shadow: inset 0 0 0 3px #d6e6f1, 0 12px 24px -14px rgb(15 42 61 / .5);
  transition: transform .5s var(--rebond), background .5s, color .5s, box-shadow .5s; }
.pc-ic > svg { position: relative; z-index: 1; opacity: .55; transition: opacity .5s; }
.pc-num { position: absolute; z-index: 2; top: -4px; right: -4px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  font-size: 12.5px; font-weight: 800; font-style: normal; color: var(--mute); background: #eef3f7; box-shadow: 0 0 0 3px #fff; transition: background .4s, color .4s; }
.pc-ic::after { content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none; box-shadow: 0 0 0 0 rgb(40 163 230 / .5); }
/* allumée (quand l'avion passe) */
.pc-etape.allume .pc-ic { color: #fff; background: linear-gradient(135deg, var(--b2), var(--b1)); box-shadow: inset 0 0 0 3px rgb(255 255 255 / .35), 0 14px 26px -12px rgb(28 125 179 / .9); }
.pc-etape.allume .pc-ic > svg { opacity: 1; }
.pc-etape.allume .pc-ic::after { animation: pc-onde .9s ease-out; }
.pc-etape.allume .pc-num { color: var(--ink); background: var(--jaune); animation: pc-saut .5s var(--rebond); }
@keyframes pc-onde { from { box-shadow: 0 0 0 0 rgb(40 163 230 / .55); } to { box-shadow: 0 0 0 18px rgb(40 163 230 / 0); } }
@keyframes pc-saut { 0% { transform: scale(.4); } 100% { transform: none; } }
/* arrivée : verte, coche, halo qui pulse */
.pc-etape:last-child.allume .pc-ic { background: linear-gradient(135deg, var(--g), #1a9e8f); box-shadow: inset 0 0 0 3px rgb(255 255 255 / .35), 0 14px 26px -12px rgb(21 151 83 / .9); }
.pc-etape:last-child.allume .pc-ic::after { animation: pc-halo 2.4s ease-out .2s infinite; }
.pc-etape:last-child.allume .pc-num { color: #fff; background: var(--g); font-size: 0; }
.pc-etape:last-child.allume .pc-num::before { content: ""; width: 12px; height: 7px; margin-top: -3px; border: solid #fff; border-width: 0 0 2.5px 2.5px; transform: rotate(-45deg); }
@keyframes pc-halo { from { box-shadow: 0 0 0 0 rgb(21 151 83 / .45); } 70%, to { box-shadow: 0 0 0 16px rgb(21 151 83 / 0); } }
.pc-etape:hover .pc-ic { transform: rotate(-8deg) scale(1.08); }

/* fiche sous la station, avec une pointe vers le cercle */
.pc-carte { position: relative; flex: 1; width: 100%; margin-top: 20px; padding: 18px 18px 18px; border-radius: 16px; background: #fff;
  box-shadow: 0 1px 2px rgb(15 42 61 / .05), 0 14px 30px -20px rgb(15 42 61 / .5); transition: transform .45s var(--courbe), box-shadow .45s; }
.pc-carte::before { content: ""; position: absolute; top: -7px; left: 50%; width: 14px; height: 14px; margin-left: -7px; background: #fff; transform: rotate(45deg); border-radius: 3px 0 0 0; }
.pc-etape:hover .pc-carte { transform: translateY(-6px); box-shadow: 0 1px 2px rgb(15 42 61 / .05), 0 24px 40px -22px rgb(28 125 179 / .6); }
.pc-carte h3 { font-size: 17px; line-height: 1.3; color: var(--ink); transition: color .4s; }
.pc-etape.allume .pc-carte h3 { color: var(--b1); }
.pc-etape:last-child.allume .pc-carte h3 { color: var(--g); }
.pc-carte p { margin-top: 6px; font-size: 14.5px; line-height: 1.55; color: var(--mute); }
.pc-duree { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; padding: 4px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 700; color: var(--b1); background: var(--lb); }
.pc-duree svg { width: 14px; height: 14px; }
.pc-etape:last-child .pc-duree { color: var(--g); background: #e6f6ee; }
.parcours[style*="--n:5"] .pc-carte, .parcours[style*="--n: 5"] .pc-carte { padding: 16px 14px; }
.parcours[style*="--n:5"] { --ic: 68px; }


/* --- mini : FAQ et délais --- */
.pc-mini { --ic: 40px; }
.pc-mini .pc-ic { padding: 10px; }
.pc-mini .pc-num { display: none; }
.pc-mini .pc-carte { margin-top: 8px; padding: 0; background: none; box-shadow: none; }
.pc-mini .pc-carte::before { display: none; }
.pc-mini .pc-etape:hover .pc-carte { transform: none; box-shadow: none; }
.pc-mini .pc-carte h3 { font-size: 14.5px; }
.pc-mini .pc-duree { margin-top: 6px; font-size: 12px; padding: 2px 9px; }
.pc-mini .pc-duree svg { display: none; }
.pc-mini .pc-avion { width: 30px; height: 30px; margin: -15px 0 0 -15px; box-shadow: 0 0 0 4px #fff, 0 8px 14px -6px rgb(28 125 179 / .9); }
.pc-mini .pc-avion svg { width: 16px; height: 16px; }

/* --- mobile : frise verticale qui avance avec le défilement (--p de 0 à 1, posé par parcours.js) --- */
@media (max-width: 760px) {
  .parcours { --ic: 58px; }
  .pc-etapes { grid-template-columns: 1fr; gap: 18px; }
  .pc-etape { display: grid; grid-template-columns: var(--ic) 1fr; align-items: start; gap: 0 16px; text-align: left; }
  .pc-carte { margin-top: 0; }
  .pc-carte::before { top: 20px; left: -6px; margin: 0; transform: rotate(-45deg); }
  .pc-piste { top: calc(var(--ic) / 2); bottom: calc(var(--ic) / 2 + var(--fin, 0px)); left: calc(var(--ic) / 2 - 2px); right: auto; width: 4px; height: auto;
    background: repeating-linear-gradient(180deg, #c9dceb 0 8px, transparent 8px 15px); }
  .pc-trait { background: linear-gradient(180deg, var(--b1), var(--b2), var(--g)); transform: scaleY(var(--p, 0)); transform-origin: top; transition: transform .15s linear; }
  .en-route .pc-trait { transform: scaleY(var(--p, 0)); }
  .pc-avion, .en-route .pc-avion { left: 50%; top: calc(var(--p, 0) * 100%); animation: none; opacity: 0; transition: opacity .3s; }
  .en-vol .pc-avion { opacity: 1; }
  .pc-avion svg { transform: rotate(180deg); }
  .pc-mini .pc-carte { margin-top: 0; }
}
@media (prefers-reduced-motion: reduce) { .pc-trait { transition: none; } .en-route .pc-avion { animation: none; } .pc-ic::after { animation: none !important; } }

/* ================= TUILES SOUS LA BANNIÈRE (accueil) — en cours =================
   Repris des tuiles d'origine : 3 blocs bleus en alternance (ciel, bleu, ciel), texte blanc, icône en carré, à cheval sur le bas de la bannière.
   Ajouté : blocs en flèches qui s'emboîtent (on avance), arrondis et grande ombre, grand numéro en filigrane, icône en verre,
   montée en cascade à l'ouverture de la page, avion qui longe le bord bas et allume chaque bloc à son passage,
   arrivée en vert avec coche, reflet qui passe d'un bloc à l'autre toutes les 7 s. Script : parcours.js ([data-tuiles]). */
.tl { position: relative; z-index: 5; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: -58px; border-radius: 20px; overflow: hidden; isolation: isolate;
  background: var(--b1); box-shadow: 0 34px 60px -30px rgb(8 30 48 / .75); }
.tl-seg { --fl: 28px; position: relative; display: flex; align-items: center; gap: 18px; min-height: 132px; margin-right: calc(var(--fl) * -1); padding: 26px calc(var(--fl) + 8px) 32px 30px;
  color: #fff; background: linear-gradient(135deg, #34b4f2, var(--b2) 60%); z-index: calc(3 - var(--i));
  clip-path: polygon(0 0, calc(100% - var(--fl)) 0, 100% 50%, calc(100% - var(--fl)) 100%, 0 100%); transition: filter .4s; }
.tl-seg:nth-child(2) { background: linear-gradient(135deg, #2590cc, var(--b1) 60%); }
.tl-seg + .tl-seg { padding-left: calc(var(--fl) + 22px); }
.tl-seg.tl-fin { margin-right: 0; padding-right: 30px; clip-path: none; }
.tl-seg:hover { filter: brightness(1.07) saturate(1.05); }
/* grand numéro en filigrane */
.tl-num { position: absolute; z-index: 0; right: calc(var(--fl) + 18px); top: 50%; font-size: 92px; font-weight: 800; font-style: normal; line-height: 1; letter-spacing: -.05em;
  color: rgb(255 255 255 / .08); transform: translateY(-50%); transition: color .6s, transform .6s var(--courbe); pointer-events: none; }
.tl-seg.tl-fin .tl-num { right: 22px; }
.tl-seg:hover .tl-num { transform: translate(-8px, -50%); }
/* icône en verre */
.tl-ic { position: relative; z-index: 1; flex: none; display: grid; place-items: center; width: 58px; height: 58px; padding: 15px; border-radius: 18px; color: #fff;
  background: rgb(255 255 255 / .16); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .38), 0 10px 20px -10px rgb(8 30 48 / .5);
  transition: transform .5s var(--rebond), background .5s, color .5s; }
.tl-ic svg { stroke-width: 2.1; }
.tl-ic svg.fa { width: 28px; height: 28px; }
.tl-seg:hover .tl-ic { transform: rotate(-8deg) scale(1.08); }
.tl-txt { position: relative; z-index: 1; }
.tl h2 { font-size: 21px; font-weight: 700; line-height: 1.2; color: #fff; }
.tl p { margin-top: 4px; font-size: 15px; line-height: 1.45; color: rgb(255 255 255 / .82); }
/* reflet qui passe d'un bloc à l'autre */
.tl-seg::after { content: ""; position: absolute; z-index: 0; top: -20%; bottom: -20%; left: 0; width: 30%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgb(255 255 255 / .22), transparent); transform: translateX(-200%) skewX(-20deg);
  animation: tl-reflet 7s ease-in-out infinite; animation-delay: calc(4s + var(--i) * .45s); }
@keyframes tl-reflet { 0% { transform: translateX(-200%) skewX(-20deg); } 16%, 100% { transform: translateX(480%) skewX(-20deg); } }

/* allumé (l'avion passe) : l'icône devient blanche, le numéro ressort ; l'arrivée passe au vert avec une coche */
.tl-seg.allume .tl-ic { color: var(--b1); background: #fff; box-shadow: 0 12px 22px -10px rgb(8 30 48 / .6); animation: tl-pop .55s var(--rebond); }
.tl-seg.allume .tl-num { color: rgb(255 255 255 / .16); }
@keyframes tl-pop { 0% { transform: scale(.7); } 100% { transform: none; } }
.tl-seg.tl-fin.allume .tl-ic { color: #fff; background: linear-gradient(135deg, var(--g), #1a9e8f); }
.tl-seg.tl-fin .tl-ic::after { content: ""; position: absolute; top: -7px; right: -7px; width: 24px; height: 24px; border-radius: 50%; background: var(--g);
  box-shadow: 0 0 0 3px #fff; transform: scale(0); transition: transform .45s var(--rebond) .15s; }
.tl-seg.tl-fin .tl-ic::before { content: ""; position: absolute; z-index: 1; top: 0; right: 0; width: 10px; height: 6px; border: solid #fff; border-width: 0 0 2.5px 2.5px;
  transform: rotate(-45deg) scale(0); transition: transform .45s var(--rebond) .25s; }
.tl-seg.tl-fin.allume .tl-ic::after { transform: scale(1); }
.tl-seg.tl-fin.allume .tl-ic::before { transform: rotate(-45deg) scale(1); }

/* piste le long du bord bas, avion */
.tl-piste { position: absolute; z-index: 6; left: 0; right: 0; bottom: 0; height: 4px; background: rgb(255 255 255 / .15); }
.tl-trait { position: absolute; inset: 0; background: linear-gradient(90deg, var(--jaune), #fff, #8ff0c0); transform: scaleX(0); transform-origin: left;
  transition: transform 2.4s cubic-bezier(.55, .1, .35, 1); }
.tl.en-route .tl-trait { transform: scaleX(1); }
.tl-avion { position: absolute; top: 50%; left: 0; display: grid; place-items: center; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%;
  color: var(--b1); background: #fff; box-shadow: 0 6px 14px -4px rgb(8 30 48 / .6); opacity: 0; }
.tl-avion svg { width: 17px; height: 17px; fill: currentColor; stroke: none; transform: rotate(90deg); }
.tl.en-route .tl-avion { animation: pc-vol 2.4s cubic-bezier(.55, .1, .35, 1) forwards; }

/* entrée : les blocs montent en cascade à l'ouverture de la page */
.js .tl:not(.parti) .tl-seg { opacity: 0; transform: translateY(34px); }
.tl.parti .tl-seg { animation: tl-monte .8s var(--rebond) backwards; animation-delay: calc(var(--i) * 120ms); }
@keyframes tl-monte { from { opacity: 0; transform: translateY(34px); } }

/* mobile : trois rangées compactes en flèches vers le bas (au lieu de trois grands blocs d'un écran) */
@media (max-width: 760px) {
  .tl { grid-template-columns: 1fr; margin-top: -34px; border-radius: 18px; }
  .tl-seg, .tl-seg + .tl-seg { --fl: 16px; gap: 14px; min-height: 0; margin: 0 0 calc(var(--fl) * -1); padding: 18px 20px calc(var(--fl) + 16px);
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--fl)), 50% 100%, 0 calc(100% - var(--fl))); }
  .tl-seg + .tl-seg { padding-top: calc(var(--fl) + 16px); }
  .tl-seg.tl-fin { margin-bottom: 0; padding-bottom: 20px; clip-path: none; }
  .tl-ic { width: 50px; height: 50px; padding: 13px; border-radius: 15px; }
  .tl-num, .tl-seg.tl-fin .tl-num { right: 18px; font-size: 60px; }
  .tl h2 { font-size: 18px; }
  .tl p { font-size: 14px; }
  .tl-piste { display: none; }
}
@media (prefers-reduced-motion: reduce) { .tl-seg::after, .tl.parti .tl-seg, .tl.en-route .tl-avion { animation: none; } .js .tl:not(.parti) .tl-seg { opacity: 1; transform: none; } }

/* ================= TITRES DE SECTION (.tt) — en cours =================
   Repris de l'existant : mot clé en bleu italique (cite / em), petit trait dégradé sous le titre, sous-titre.
   Ajouté : sur-titre avec icône et trait qui s'allonge, mots qui montent un à un, vague dessinée sous le mot clé,
   reflet qui passe sur le mot clé toutes les 8 s, trait avec une perle qui glisse, grand numéro en filigrane (comme les tuiles).
   Balisage : .tt[data-num] > .tt-sur (icône + texte) + h2 (avec em.tt-cle + svg.tt-vague) + .tt-trait + p.
   Variantes : (gauche), .centre, .clair (fond bleu ou photo), .tt-ligne (titre + bouton à droite), .tt-marque (bandeau « vous accompagne »).
   Script : titres.js (découpe les mots, ajoute .vu à l'arrivée à l'écran). */
.tt { position: relative; isolation: isolate; max-width: 760px; margin-bottom: 46px; }
.tt.centre { margin-left: auto; margin-right: auto; text-align: center; }
/* grand numéro en filigrane */
.tt[data-num]::before { content: attr(data-num); position: absolute; z-index: -1; top: -46px; left: -14px; font-size: 150px; font-weight: 800; line-height: 1; letter-spacing: -.06em;
  color: rgb(28 125 179 / .06); pointer-events: none; transition: transform 1.4s var(--courbe), opacity 1s; }
.tt.centre[data-num]::before { left: 50%; transform: translateX(-50%); }
.tt.pret:not(.vu)[data-num]::before { opacity: 0; transform: translateY(30px); }
.tt.centre.pret:not(.vu)[data-num]::before { transform: translate(-50%, 30px); }

/* sur-titre : trait qui s'allonge + icône + texte */
.tt-sur { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--b1); }
.tt-sur svg { width: 18px; height: 18px; color: var(--b2); }
.tt-sur::before, .tt.centre .tt-sur::after { content: ""; width: 34px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--b2), var(--g)); transition: width .9s var(--courbe) .15s; }
.tt.centre .tt-sur::after { background: linear-gradient(270deg, var(--b2), var(--g)); }
.tt.pret:not(.vu) .tt-sur::before, .tt.pret:not(.vu) .tt-sur::after { width: 0; }
.tt.pret .tt-sur { transition: opacity .6s, transform .6s var(--courbe); }
.tt.pret:not(.vu) .tt-sur { opacity: 0; transform: translateY(10px); }

/* titre : les mots montent un à un derrière un cache */
.tt h2, .tt h1, .tt .tt-h { margin-top: 12px; font-size: clamp(28px, 3.4vw, 42px); font-weight: 700; line-height: 1.16; letter-spacing: -.015em; color: var(--ink); }
.tt-m { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 .04em .1em 0; margin: 0 -.04em -.1em 0; }
.tt-m > span { display: inline-block; transition: transform .85s var(--courbe); transition-delay: calc(var(--w) * 45ms + .12s); }
.tt.pret:not(.vu) .tt-m > span { transform: translateY(110%); }

/* mot clé : bleu italique (l'ADN), reflet qui passe, vague dessinée dessous */
.tt-cle { position: relative; display: inline-block; font-style: italic; color: var(--b2); }
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .tt-cle .tt-m > span { color: transparent; -webkit-background-clip: text; background-clip: text;
    background-image: linear-gradient(100deg, var(--b2) 42%, #9adfff 50%, var(--b2) 58%); background-size: 300% 100%; background-position: 100% 0;
    animation: tt-brille 8s ease-in-out infinite; animation-delay: calc(3s + var(--w) * 60ms); }
}
@keyframes tt-brille { 0%, 70% { background-position: 100% 0; } 100% { background-position: -50% 0; } }
.tt-vague { position: absolute; left: -2%; width: 104%; bottom: -.2em; height: .34em; overflow: visible; pointer-events: none; }
.tt-vague path { fill: none; stroke: url(#tt-degrade); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0;
  transition: stroke-dashoffset 1.1s var(--courbe); transition-delay: calc(var(--nw, 6) * 45ms + .55s); }
.tt.pret:not(.vu) .tt-vague path { stroke-dashoffset: 1; }

/* trait : il se trace, puis une perle glisse jusqu'au bout */
.tt-trait { position: relative; display: block; width: 58px; height: 4px; margin-top: 20px; border-radius: 4px; background: linear-gradient(90deg, var(--b1), var(--b2));
  transform-origin: left; transition: transform .9s var(--courbe) .35s; }
.tt-trait::after { content: ""; position: absolute; top: 50%; left: calc(100% + 6px); width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--g);
  transition: opacity .4s 1.1s, transform .6s var(--rebond) 1.1s; }
.tt.centre .tt-trait { margin-left: auto; margin-right: auto; transform-origin: center; }
.tt.pret:not(.vu) .tt-trait { transform: scaleX(0); }
.tt.pret:not(.vu) .tt-trait::after { opacity: 0; transform: scale(0); }

/* chapô */
.tt p { margin-top: 20px; font-size: 17px; line-height: 1.7; color: var(--mute); }
.tt.centre p { margin-left: auto; margin-right: auto; max-width: 640px; }
.tt p b { color: var(--b1); font-weight: 600; }
.tt.pret p { transition: opacity .8s .6s, transform .8s var(--courbe) .6s; }
.tt.pret:not(.vu) p { opacity: 0; transform: translateY(12px); }

/* titre + bouton à droite */
.tt-ligne { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; margin-bottom: 46px; }
.tt-ligne .tt { margin-bottom: 0; }
@media (max-width: 760px) { .tt-ligne { flex-direction: column; align-items: flex-start; gap: 22px; } }

/* sur fond bleu ou photo */
.tt.clair .tt-sur { color: #fff; }
.tt.clair .tt-sur svg { color: var(--jaune); }
.tt.clair .tt-sur::before, .tt.clair .tt-sur::after { background: linear-gradient(90deg, var(--jaune), #fff); }
.tt.clair h2, .tt.clair h1, .tt.clair .tt-h { color: #fff; }
.tt.clair .tt-cle { color: var(--jaune); }
.tt.clair .tt-cle .tt-m > span { background-image: linear-gradient(100deg, var(--jaune) 42%, #fff 50%, var(--jaune) 58%); }
.tt.clair .tt-trait { background: linear-gradient(90deg, var(--jaune), #fff); }
.tt.clair .tt-trait::after { background: #fff; }
.tt.clair p { color: rgb(255 255 255 / .85); }
.tt.clair p b { color: #fff; }
.tt.clair[data-num]::before { color: rgb(255 255 255 / .08); }

/* bandeau « Expatriation-Maurice.com vous accompagne… » : la marque en verre au-dessus du titre */
.tt-marque { display: inline-flex; align-items: center; gap: 10px; padding: 7px 18px 7px 8px; border-radius: 999px; font-size: 17px; font-weight: 700; color: #fff;
  background: rgb(255 255 255 / .14); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .35); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transition: opacity .7s, transform .7s var(--rebond); }
.tt-marque img { width: 34px; height: 34px; border-radius: 50%; background: #fff; padding: 3px; transition: transform 1.2s var(--rebond) .2s; }
.tt-marque small { font-size: .7em; opacity: .85; }
.tt.pret:not(.vu) .tt-marque { opacity: 0; transform: scale(.85); }
.tt.pret:not(.vu) .tt-marque img { transform: rotate(-200deg) scale(.6); }

@media (max-width: 760px) {
  .tt { margin-bottom: 34px; }
  .tt[data-num]::before { top: -30px; font-size: 100px; }
  .tt p { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) { .tt-cle .tt-m > span { animation: none; } }

/* ================= HERO (bannière d'accueil) — en cours =================
   Repris de l'existant : 3 diapos de 9 s, mêmes photos et mêmes textes, phrase clé en bleu, 2 boutons,
   l'avion qui traverse le ciel et passe DERRIÈRE la famille (photo détourée posée par-dessus).
   Ajouté : voile blanc côté texte (lisible sans ombre portée), titre de la famille .tt (mots qui montent, vague sous le mot clé),
   chapô lisible, boutons validés (océan + lagon), ligne de confiance, zoom lent de la photo (Ken Burns),
   navigation par onglets avec barre de progression (pause au survol), glisser au doigt sur mobile.
   Balisage : .hr[data-hero] > .hr-diapo (.hr-scene > .hr-fond, .hr-vol, .hr-devant ; .hr-voile ; .hr-txt > .tt) + .hr-nav. Script : hero.js. */
.hr { --u: min(1, 100vw / 1240px); position: relative; height: 720px; overflow: hidden; isolation: isolate; background: #cfe6f3; }
.hr-diapo { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 1.1s ease, visibility 0s 1.1s; }
.hr-diapo.actif { z-index: 1; opacity: 1; visibility: visible; transition: opacity 1.1s ease, visibility 0s; }

/* scène : fond + avion + famille détourée, zoomés ensemble (les deux images ont la même taille, elles restent calées) */
.hr-scene { position: absolute; inset: 0; transform-origin: 65% 40%; }
.hr-diapo.actif .hr-scene { animation: hr-zoom 10s linear forwards; }
@keyframes hr-zoom { from { transform: scale(1.02); } to { transform: scale(1.1); } }
.hr-fond, .hr-devant { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.hr-devant { z-index: 2; }
.hr-vol { position: absolute; z-index: 1; inset: 0; pointer-events: none; }
/* trajet : entre haut à gauche, traverse TOUT l'écran (en vw, quelle que soit sa largeur) en descendant doucement,
   et sort à droite juste avant le changement de diapo, comme si la piste était un peu plus loin hors du cadre */
.hr-avion { position: absolute; left: 0; top: 0; width: calc(400px * var(--u)); max-width: none; opacity: 0; }
.hr-diapo.actif .hr-avion { animation: hr-avion 8.6s linear .3s forwards; }
@keyframes hr-avion {
  0% { opacity: 1; transform: translate(calc(-400px * var(--u)), calc(-70px * var(--u))); }
  100% { opacity: 1; transform: translate(100vw, calc(150px * var(--u))); } }

/* voile blanc côté texte */
.hr-voile { position: absolute; z-index: 3; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgb(255 255 255 / .94) 0%, rgb(255 255 255 / .82) 30%, rgb(255 255 255 / .35) 50%, rgb(255 255 255 / 0) 64%); }

/* texte (version courte .hr-mob sur mobile) */
.hr-mob { display: none; }
@media (max-width: 760px) { .hr-mob { display: inline; } }
.hr-txt { position: relative; z-index: 4; display: flex; flex-direction: column; justify-content: center; height: 100%; padding-top: 10px; padding-bottom: 90px; }
.hr .tt { max-width: 700px; margin: 0; }
.hr .tt h1, .hr .tt h2 { font-size: clamp(36px, 4.4vw, 60px); line-height: 1.06; letter-spacing: -.025em; }
.hr .tt p { max-width: 540px; margin-top: 20px; font-size: 18px; line-height: 1.6; color: #33475a; }
.hr .tt p b { color: var(--ink); font-weight: 600; }
.hr .tt-trait { margin-top: 22px; }
.hr-act { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; transition: opacity .7s .9s, transform .7s var(--courbe) .9s; }
.hr-conf { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 22px 0 0; padding: 0; list-style: none; font-size: 14.5px; font-weight: 600; color: var(--ink);
  transition: opacity .7s 1.1s, transform .7s var(--courbe) 1.1s; }
.hr-conf li { display: inline-flex; align-items: center; gap: 8px; }
.hr-conf svg { width: 20px; height: 20px; padding: 4px; border-radius: 50%; color: #fff; background: var(--g); stroke-width: 3.2; }
.hr .tt.pret:not(.vu) ~ .hr-act, .hr .tt.pret:not(.vu) ~ .hr-conf { opacity: 0; transform: translateY(14px); }

/* navigation : onglets avec barre de progression (pause au survol du hero) */
.hr-nav { position: absolute; z-index: 5; left: 0; right: 0; bottom: 92px; display: flex; justify-content: flex-end; gap: 10px; pointer-events: none; }
.hr-nav button { pointer-events: auto; display: flex; flex-direction: column; gap: 8px; width: 170px; padding: 12px 14px 12px; border: 0; border-radius: 14px; cursor: pointer; text-align: left;
  font: inherit; font-size: 13px; font-weight: 600; color: var(--ink); background: rgb(255 255 255 / .72); box-shadow: 0 10px 24px -14px rgb(8 30 48 / .6);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: background .3s, transform .3s var(--rebond); }
.hr-nav button:hover { background: rgb(255 255 255 / .92); transform: translateY(-3px); }
.hr-nav b { font-size: 11.5px; font-weight: 700; letter-spacing: .08em; color: var(--b2); }
.hr-nav i { position: relative; display: block; height: 3px; border-radius: 3px; overflow: hidden; background: rgb(28 125 179 / .18); }
.hr-nav i::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, var(--b2), var(--g)); transform: scaleX(0); transform-origin: left; }
.hr-nav button.actif { background: #fff; }
.hr-nav button.actif i::after { animation: hr-prog 9s linear forwards; }
.hr-nav button.vu i::after { transform: scaleX(1); }
.hr:hover .hr-nav button.actif i::after { animation-play-state: paused; }
@keyframes hr-prog { to { transform: scaleX(1); } }

@media (max-width: 1100px) { .hr-nav button { width: 140px; } }
/* mobile : photo en haut, texte en bas sur un voile blanc, onglets en barres fines en haut (comme des « stories ») */
@media (max-width: 760px) {
  /* photo haute (70 % du hero) ; sur-titre et titre posés sur le bas de l'image, dans le voile blanc ;
     un seul bouton, toujours au même endroit (en bas du hero) quel que soit le nombre de lignes du texte ;
     le second bouton et la ligne « Gratuit · Sans engagement » sont retirés sur mobile */
  .hr { height: 610px; }
  .hr-scene { bottom: 0; transform-origin: 60% 30%; }   /* la photo descend jusqu'en bas : le sable passe derrière le texte */
  .hr-fond, .hr-devant { object-position: var(--cadrage-mob, 60% 100%); }
  .hr-vol { top: 16%; }   /* l'avion passe plus bas sur la photo (son trajet est à l'échelle de l'écran, donc très haut sur mobile) */
  .hr-voile { background: linear-gradient(180deg, rgb(255 255 255 / 0) 36%, rgb(255 255 255 / .6) 50%, rgb(255 255 255 / .8) 64%, rgb(255 255 255 / .9) 100%); }
  .hr-txt { justify-content: flex-start; padding-top: 250px; padding-bottom: 58px; }
  .hr .tt { flex: 1; display: flex; flex-direction: column; align-items: flex-start; }
  .hr .tt .hr-act { margin-top: auto; padding-top: 16px; align-self: stretch; }
  .hr-act .bouton + .bouton, .hr-conf { display: none; }
  .hr-ordi { display: none; }
  .hr .tt h1, .hr .tt h2 { font-size: 31px; }
  .hr .tt p { margin-top: 12px; font-size: 15.5px; }
  .hr .tt-sur { font-size: 11.5px; }
  .hr .tt-trait { margin-top: 14px; }
  .hr-act { margin-top: 20px; gap: 10px; }
  .hr-act .bouton { flex: 1 1 100%; }
  .hr-conf { margin-top: 14px; font-size: 13px; gap: 6px 14px; }
  .hr-nav { top: 12px; bottom: auto; padding: 0 15px; gap: 6px; }
  .hr-nav button { flex: 1; width: auto; padding: 0; gap: 0; border-radius: 3px; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .hr-nav button:hover { transform: none; background: none; }
  .hr-nav button.actif { background: none; }
  .hr-nav b, .hr-nav span { display: none; }
  .hr-nav i { height: 4px; background: rgb(255 255 255 / .55); box-shadow: 0 1px 4px rgb(0 0 0 / .2); }
}
@media (prefers-reduced-motion: reduce) { .hr-diapo.actif .hr-scene, .hr-diapo.actif .hr-avion { animation: none; } }

/* ================= CONDITIONS ET AVANTAGES — direction A + garantie « Prestige », validées le 03/11 =================
   Ne reprend PAS les panneaux teintés d'origine (refusés). Langage des éléments validés : fiches blanches à icône ronde
   (cartes services), tuiles bleues en flèches et numéros en filigrane (accueil), reflets, inclinaison 3D (cartes.js). */

/* ---------- A. Chiffres clés + carte de permis ---------- */
.cpA { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: 46px; align-items: center; }
.cpA-liste { display: grid; gap: 22px; padding-left: 26px; }
/* fiche condition : fiche blanche, icône ronde à cheval sur le bord gauche (comme la carte horizontale validée) */
.cpA-fiche { position: relative; padding: 20px 22px 20px 44px; border-radius: 18px; background: #fff; box-shadow: 0 2px 4px rgb(15 42 61 / .05), 0 18px 34px -22px rgb(15 42 61 / .5);
  transition: transform .5s var(--courbe), box-shadow .5s, opacity .6s; }
.cpA-fiche:hover { transform: translateX(6px); box-shadow: 0 2px 4px rgb(15 42 61 / .05), 0 26px 44px -22px rgb(28 125 179 / .55); }
.cpA-ic { position: absolute; left: -26px; top: 50%; display: grid; place-items: center; width: 52px; height: 52px; margin-top: -26px; padding: 14px; border-radius: 50%; color: #fff;
  background: linear-gradient(135deg, var(--b2), var(--b1)); box-shadow: 0 0 0 5px #fff, 0 12px 22px -8px rgb(28 125 179 / .8); transition: transform .5s var(--rebond), background .4s; }
.cpA-fiche:hover .cpA-ic { transform: rotate(-10deg) scale(1.08); }
.cpA-fiche.ok .cpA-ic { background: linear-gradient(135deg, #2bbf74, var(--g)); box-shadow: 0 0 0 5px #fff, 0 12px 22px -8px rgb(21 151 83 / .8); }
.cpA-chiffre { display: block; font-size: 30px; font-weight: 800; line-height: 1.05; letter-spacing: -.02em; color: var(--b1); }
.cpA-chiffre small { font-size: .5em; font-weight: 700; letter-spacing: 0; color: var(--b2); }
.cpA-fiche p { margin-top: 6px; font-size: 15px; line-height: 1.55; color: var(--txt); }
.cpA-note { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; padding: 4px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 600; color: var(--g); background: #e6f6ee; }
.cpA-note svg { width: 14px; height: 14px; }
/* pastille « condition remplie » qui saute sur le coin */
.cpA-ok { position: absolute; top: -9px; right: -9px; display: grid; place-items: center; width: 28px; height: 28px; padding: 6px; border-radius: 50%; color: #fff; background: var(--g);
  box-shadow: 0 0 0 3px #fff, 0 6px 12px -4px rgb(21 151 83 / .7); transform: scale(0); transition: transform .5s var(--rebond); }
.cpA-ok svg { stroke-width: 3.4; }
.cpA-fiche.ok .cpA-ok { transform: scale(1); }
.js .cpA.pret .cpA-fiche { opacity: 0; transform: translateX(-24px); }
.js .cpA.pret .cpA-fiche.vu { opacity: 1; transform: none; }

/* carte de permis : bleue comme les tuiles, numéro en filigrane, reflet holographique */
.cpA-carte { --rx: 0deg; --ry: 0deg; position: relative; isolation: isolate; overflow: hidden; padding: 28px 28px 26px; border-radius: 26px; color: #fff;
  background: linear-gradient(135deg, #36b6f3 0%, var(--b2) 35%, var(--b1) 100%); box-shadow: 0 40px 70px -34px rgb(8 30 48 / .75), inset 0 1px 0 rgb(255 255 255 / .35);
  transform: perspective(1000px) rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .5s var(--courbe); }
.cpA-carte.inclinee { transition: transform .12s linear; }
.cpA-carte::before { content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none; opacity: .55;
  background: radial-gradient(420px circle at var(--mx, 80%) var(--my, 0%), rgb(255 255 255 / .35), transparent 55%),
              repeating-linear-gradient(135deg, rgb(255 255 255 / .05) 0 2px, transparent 2px 9px); }
.cpA-carte::after { content: ""; position: absolute; top: -30%; bottom: -30%; left: 0; width: 30%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgb(255 255 255 / .28), transparent); transform: translateX(-200%) skewX(-20deg); animation: cpA-reflet 6s ease-in-out 2s infinite; }
@keyframes cpA-reflet { 0% { transform: translateX(-200%) skewX(-20deg); } 18%, 100% { transform: translateX(480%) skewX(-20deg); } }
.cpA-fil { position: absolute; z-index: -1; right: 18px; bottom: -34px; font-size: 190px; font-weight: 800; line-height: 1; letter-spacing: -.06em; color: rgb(255 255 255 / .1); }
.cpA-haut { display: flex; align-items: center; gap: 12px; }
.cpA-logo { flex: none; width: 46px; height: 46px; padding: 4px; border-radius: 50%; background: #fff; box-shadow: 0 8px 16px -8px rgb(8 30 48 / .6); }
.cpA-haut div { flex: 1; line-height: 1.2; }
.cpA-haut small { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; opacity: .85; }
.cpA-haut b { font-size: 21px; font-weight: 800; }
.cpA-puce { flex: none; padding: 5px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 800; color: var(--ink); background: var(--jaune); }
.cpA-duree { display: flex; align-items: baseline; gap: 10px; margin: 22px 0 18px; }
.cpA-duree b { font-size: 64px; font-weight: 800; line-height: .9; letter-spacing: -.04em; }
.cpA-duree span { font-size: 16px; font-weight: 600; line-height: 1.25; opacity: .92; }
.cpA-carte ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.cpA-carte li { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 16px; background: rgb(255 255 255 / .14); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .25);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); font-size: 15px; line-height: 1.45; transition: opacity .6s, transform .6s var(--courbe), background .3s; }
.cpA-carte li:hover { background: rgb(255 255 255 / .22); }
.cpA-carte li b { font-weight: 700; color: var(--jaune); }
.cpA-carte li i { flex: none; display: grid; place-items: center; width: 42px; height: 42px; padding: 11px; border-radius: 13px; color: #fff; background: rgb(255 255 255 / .16);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .38); transition: background .5s, color .5s, transform .5s var(--rebond); }
.cpA-carte li.vu i { color: var(--b1); background: #fff; animation: tl-pop .55s var(--rebond); }
.js .cpA.pret .cpA-carte li { opacity: 0; transform: translateY(14px); }
.js .cpA.pret .cpA-carte li.vu { opacity: 1; transform: none; }
.js .cpA.pret .cpA-carte { opacity: 0; transform: perspective(1000px) rotateY(-18deg) scale(.94); }
.js .cpA.pret.vu .cpA-carte { opacity: 1; transform: perspective(1000px) rotateX(var(--rx)) rotateY(var(--ry)); transition: opacity .8s, transform 1s var(--courbe); }
@media (max-width: 900px) { .cpA { grid-template-columns: 1fr; gap: 34px; } .cpA-liste { padding-left: 24px; } .cpA-duree b { font-size: 52px; } .cpA-carte { padding: 24px 20px 22px; } }

/* tampon (garantie) */
.ga-tampon { flex: none; display: grid; place-content: center; justify-items: center; gap: 4px; width: 136px; height: 136px; padding: 14px; border-radius: 50%; text-align: center;
  border: 3px solid currentColor; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; line-height: 1.15; transform: rotate(-12deg); opacity: .92; }
.ga-tampon svg { width: 30px; height: 30px; stroke-width: 2.6; }
.js .gA.pret .ga-tampon { opacity: 0; transform: rotate(-30deg) scale(2.2); }
.js .gA.pret.vu .ga-tampon { animation: ga-tampon .55s cubic-bezier(.3, 1.4, .5, 1) .5s forwards; }
@keyframes ga-tampon { 0% { opacity: 0; transform: rotate(-30deg) scale(2.2); } 70% { opacity: .95; transform: rotate(-10deg) scale(.94); } 85% { transform: rotate(-13deg) scale(1.03); } 100% { opacity: .92; transform: rotate(-12deg) scale(1); } }
@keyframes ga-ping { 0% { transform: scale(1); opacity: .55; } 80%, 100% { transform: scale(1.8); opacity: 0; } }
@media (max-width: 860px) { .ga-tampon { width: 104px; height: 104px; margin: 4px auto 0; font-size: 10px; } }
@media (prefers-reduced-motion: reduce) { .cpA-carte::after, .gA-ic::before { animation: none; } }

/* ---------- garantie G1 : fiche blanche pleine largeur (comme les fiches de A), bouclier doré à cheval, tampon qui se pose ---------- */
.gA { position: relative; display: flex; align-items: center; gap: 26px; margin: 46px 0 0 26px; padding: 24px 28px 24px 50px; border-radius: 20px; background: #fff;
  box-shadow: 0 2px 4px rgb(15 42 61 / .05), 0 18px 34px -22px rgb(15 42 61 / .5); }
.gA-ic { isolation: isolate; color: var(--ink); background: linear-gradient(135deg, var(--jaune), #f2b53a); box-shadow: 0 0 0 5px #fff, 0 12px 22px -8px rgb(200 140 0 / .7); }
.gA-ic { position: absolute; left: -28px; top: 50%; display: grid; place-items: center; width: 56px; height: 56px; margin-top: -28px; padding: 15px; border-radius: 50%; }
.gA-ic::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 50%; background: #f2b53a; animation: ga-ping 2.2s cubic-bezier(0, 0, .2, 1) infinite; }
.gA h4 { font-size: 20px; font-weight: 800; color: var(--ink); line-height: 1.3; }
.gA p { margin-top: 6px; font-size: 15.5px; line-height: 1.6; color: var(--txt); }
.gA p strong { color: var(--g); }
.gA .ga-tampon { color: var(--g); box-shadow: inset 0 0 0 5px #fff, inset 0 0 0 7px rgb(21 151 83 / .5); mix-blend-mode: multiply; }
@media (max-width: 860px) { .gA { display: grid; grid-template-columns: minmax(0, 1fr); margin-left: 24px; padding: 24px 18px 22px 40px; } }

/* ---------- garantie : habillage « Prestige » choisi le 03/11 ---------- */
.gA h4 { font-size: 22px; }
.gA-ic { width: 66px; height: 66px; margin-top: -33px; left: -33px; padding: 17px; }
/* Prestige : bordure arc-en-ciel qui tourne (comme le bouton prestige), fond lagon très léger */
.gA.prestige { border: 3px solid transparent;
  background: linear-gradient(120deg, #fff, #eef8fd 60%, #eaf7f0) padding-box, conic-gradient(from var(--ang), var(--b2), var(--jaune), var(--g), var(--b2)) border-box;
  animation: bt-tour 4s linear infinite; box-shadow: 0 30px 60px -30px rgb(28 125 179 / .6); }
.gA.prestige:hover { animation-duration: 1.6s; }
.gA.prestige .ga-tampon { border-width: 4px; }
@media (prefers-reduced-motion: reduce) { .gA.prestige { animation: none; } }

/* ================= FAQ — habillage « fiches » (.emfaq.fqA), validé le 03/11 ; même balisage et même script que l'existant =================
   Gardé partout : une couleur par question, réponse courte en pastille, une seule ouverte, la question remonte sous le menu,
   contenu de la réponse qui monte en cascade. */

/* ---------- A. Fiches : chaque question est une fiche blanche, icône ronde à cheval sur le bord (comme les conditions validées) ---------- */
.emfaq.fqA { max-width: 900px; padding-left: 22px; }
.fqA .emfaq-list { display: grid; gap: 8px; background: none; border: 0; box-shadow: none; }
.fqA .emfaq-item { border: 0; border-radius: 14px; background: #fff; box-shadow: 0 2px 4px rgb(15 42 61 / .05), 0 16px 32px -22px rgb(15 42 61 / .5);
  transition: transform .45s var(--courbe), box-shadow .45s; }
.fqA .emfaq-item:hover { transform: translateX(5px); box-shadow: 0 2px 4px rgb(15 42 61 / .05), 0 24px 40px -22px rgb(28 125 179 / .5); }
.fqA .emfaq-item.is-open { transform: none; box-shadow: 0 2px 4px rgb(15 42 61 / .05), 0 30px 56px -26px var(--c); }
.fqA .emfaq-item::before { left: auto; right: 0; top: 10px; bottom: 10px; width: 4px; border-radius: 4px 0 0 4px; }
.fqA button.emfaq-q, .fqA .emfaq-item:first-child button.emfaq-q, .fqA .emfaq-item:last-child:not(.is-open) button.emfaq-q { padding: 10px 14px 10px 38px; border-radius: 14px; font-size: 15.5px; font-weight: 700; background: transparent; }
.fqA .is-open button.emfaq-q { background: transparent; box-shadow: none; }
.fqA .emfaq-ic { position: absolute; left: -21px; top: 50%; width: 42px; height: 42px; margin-top: -21px; padding: 11px; border-radius: 50%; color: #fff;
  background: var(--c); box-shadow: 0 0 0 4px #fff, 0 10px 18px -8px var(--c); }
.fqA h3.emfaq-h { position: sticky; }
.fqA button.emfaq-q:hover .emfaq-ic { transform: rotate(-10deg) scale(1.08); }
.fqA .is-open .emfaq-ic { color: #fff; background: var(--c); box-shadow: 0 0 0 4px #fff, 0 0 0 8px var(--cb), 0 12px 22px -8px var(--c); }
.fqA .emfaq-pill { padding: 4px 11px; font-size: 12.5px; font-weight: 700; color: var(--c); background: var(--cb); }
.fqA .emfaq-pm { width: 28px; height: 28px; background: linear-gradient(135deg, var(--b2), var(--b1)); }
.fqA .emfaq-pm::before, .fqA .emfaq-pm::after { background: #fff; }
.fqA .is-open .emfaq-pm { background: var(--c); }
.fqA .emfaq-body { padding: 0 18px 16px 38px; }
@media (max-width: 760px) { .emfaq.fqA { padding-left: 19px; } .fqA button.emfaq-q, .fqA .emfaq-item:first-child button.emfaq-q, .fqA .emfaq-item:last-child:not(.is-open) button.emfaq-q { padding: 9px 10px 9px 30px; font-size: 15px; } .fqA .emfaq-ic { width: 38px; height: 38px; left: -19px; margin-top: -19px; padding: 10px; } .fqA .emfaq-pill { display: none; } .fqA .emfaq-body { padding: 0 12px 14px 30px; } }

/* ================= TARIFS — habillage « fiches flottantes » (.empi.tfA), validé le 03/11 (même balisage .empi, même offres.js : calcul en direct, souris de démo, bulles, ruban) =================
   Gardé partout : le dock (personnes, animaux, arrivée), prix qui grimpe, ancien prix barré, « vous économisez », ruban de remise,
   réponse « Ajouté » dans les accordéons, couleur par formule, bouton à 2 lignes qui ondule et pulse.
   Communs aux trois : dock arrondi, prix droit (plus d'italique), bouton riche arrondi dans la carte (comme les boutons validés). */
.empi.tfA .dock { border-radius: 26px; padding: 10px; box-shadow: 0 30px 60px -30px rgb(0 25 45 / .75); }
.empi.tfA .em-cards { gap: 26px; }
.empi.tfA .em-card { border-radius: 24px; overflow: visible; }
.empi.tfA .pr-amt { font-style: normal; font-weight: 800; letter-spacing: -.03em; color: var(--c); }
.empi.tfA .card-footer { margin: 0 18px 18px; padding: 14px 18px; border-radius: 16px; text-shadow: none; font-size: 18px; }
.empi.tfA .card-footer::before { border-radius: inherit; }
.empi.tfA .card-footer .cta-ch { display: grid; place-items: center; width: 34px; height: 34px; padding: 8px; border-radius: 50%; background: rgb(255 255 255 / .2); }
.empi.tfA .card-footer.zen { background: linear-gradient(135deg, #f7c948, #eea200, #f7c948); background-size: 200% 200%; color: var(--ink); }
.empi.tfA .card-footer.zen .cta-sep { background: rgb(15 42 61 / .25); }
.empi.tfA .acc-sec { border-radius: 14px; }
.empi.tfA .em-card > .em-body { padding: 20px 20px 22px; }

/* ---------- A. Fiches flottantes : tête blanche, pastille ronde de la formule à cheval sur le haut, Confort surélevée avec la bordure qui tourne ---------- */
.tfA .em-cards { margin-top: 70px; align-items: start; }
.tfA .em-card { background: #fff; box-shadow: 0 2px 4px rgb(15 42 61 / .06), 0 30px 56px -30px rgb(0 25 45 / .8); transition: transform .5s var(--courbe); }
.tfA .em-card:hover { transform: translateY(-6px); }
.tfA .em-head { position: relative; padding: 46px 20px 4px; font-style: normal; font-size: 26px; font-weight: 800; letter-spacing: -.01em; color: var(--c) !important; background: none !important; text-shadow: none; }
.tfA .em-head::before { content: ""; position: absolute; left: 50%; top: -34px; width: 68px; height: 68px; margin-left: -34px; border-radius: 50%;
  background: var(--ic) center / 30px no-repeat, linear-gradient(135deg, var(--c), color-mix(in srgb, var(--c) 60%, #0f2a3d)); box-shadow: 0 0 0 6px #fff, 0 14px 26px -8px var(--c); }
.tfA .em-card[data-k="classique"] { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Ccircle cx='9' cy='11' r='2'/%3E%3Cpath d='M6 16c.6-1.5 1.8-2 3-2s2.4.5 3 2M14 10h4M14 13h3'/%3E%3C/svg%3E"); }
.tfA .em-card[data-k="confort"] { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11l9-7 9 7'/%3E%3Cpath d='M5 10v10h14V10'/%3E%3Cpath d='M10 20v-6h4v6'/%3E%3C/svg%3E"); }
.tfA .em-card[data-k="zen"] { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l2.7 5.6 6.1.9-4.4 4.3 1 6.1L12 17l-5.4 2.9 1-6.1-4.4-4.3 6.1-.9z'/%3E%3C/svg%3E"); }
.tfA .em-card[data-k="confort"] { z-index: 2; transform: translateY(-18px); border: 3px solid transparent;
  background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from var(--ang), var(--b2), var(--jaune), var(--g), var(--b2)) border-box; animation: bt-tour 4s linear infinite; }
.tfA .em-card[data-k="confort"]:hover { transform: translateY(-24px); }
.tfA .pr { background: color-mix(in srgb, var(--c) 8%, #fff); }

@media (max-width: 860px) {
  .tfA .em-card[data-k="confort"], .tfA .em-card[data-k="confort"]:hover { transform: none; }
  .tfA .em-cards { gap: 60px; }
}

/* ================= BANDEAU DU TEST — « la question pour de vrai » (.qzA), validé le 03/11 =================
   Gardé : « Gratuit · 2 min », la question 1 et ses 4 réponses, le bouton lagon vers le simulateur, la main qui suggère de cliquer.
   Les réponses mènent toutes au simulateur. Script : test.js. */

/* ---------- A. La question en vrai : on clique une réponse, elle se coche, la barre avance, puis on part au simulateur ---------- */
.qzA { position: relative; overflow: hidden; isolation: isolate; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 40px; align-items: center;
  padding: 40px 44px; border-radius: 28px; background: #fff; box-shadow: 0 2px 4px rgb(15 42 61 / .05), 0 30px 60px -32px rgb(15 42 61 / .55); }
.qzA::before { content: ""; position: absolute; z-index: -1; width: 420px; height: 420px; left: -160px; bottom: -220px; border-radius: 50%; background: rgb(40 163 230 / .14); filter: blur(30px); }
.qzA .tt { margin-bottom: 0; }
.qzA .tt h2 { font-size: clamp(28px, 3vw, 38px); }
.qzA-tag { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 14px; padding: 5px 12px; border-radius: 999px; font-size: 13px; font-weight: 700; color: var(--ink); background: var(--jaune); }
.qzA-tag svg { width: 15px; height: 15px; }
.qzA .bouton { margin-top: 26px; }
.qzA-q { padding: 22px; border-radius: 22px; background: #f4f9fd; box-shadow: inset 0 0 0 1px var(--line); }
.qzA-haut { display: flex; align-items: center; gap: 12px; font-size: 13px; font-weight: 700; color: var(--mute); }
.qzA-prog { flex: 1; height: 8px; border-radius: 8px; background: #fff; overflow: hidden; box-shadow: inset 0 0 0 1px var(--line); }
.qzA-prog i { display: block; width: 14%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--b2), var(--g)); transition: width .7s var(--courbe); }
.qzA.choisi .qzA-prog i { width: 28%; }
.qzA-q h3 { margin: 12px 0 14px; font-size: 20px; color: var(--ink); }
.qzA-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.qzA-opt { position: relative; display: flex; align-items: center; gap: 12px; padding: 14px 14px 14px 12px; border-radius: 16px; font-weight: 700; font-size: 15px; line-height: 1.25; color: var(--ink);
  text-decoration: none; background: #fff; box-shadow: 0 1px 2px rgb(15 42 61 / .05), 0 10px 22px -16px rgb(15 42 61 / .5); transition: transform .35s var(--rebond), box-shadow .35s, background .3s, color .3s; }
.qzA-opt i { flex: none; display: grid; place-items: center; width: 42px; height: 42px; padding: 11px; border-radius: 50%; color: #fff; background: linear-gradient(135deg, var(--b2), var(--b1));
  box-shadow: 0 8px 16px -8px rgb(28 125 179 / .9); transition: transform .45s var(--rebond), background .3s; }
.qzA-opt:hover { color: var(--ink); transform: translateY(-3px); box-shadow: 0 1px 2px rgb(15 42 61 / .05), 0 18px 30px -16px rgb(28 125 179 / .55); }
.qzA-opt:hover i { transform: rotate(-10deg) scale(1.08); }
.qzA-opt::after { content: ""; position: absolute; right: 12px; top: 50%; width: 22px; height: 22px; margin-top: -11px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--line); transition: background .3s, box-shadow .3s; }
.qzA-opt.coche { color: #fff; background: linear-gradient(120deg, var(--g), var(--b2)); }
.qzA-opt.coche i { color: var(--g); background: #fff; }
.qzA-opt.coche::after { background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23159753' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 14px no-repeat; box-shadow: none; }
.qzA-main { position: absolute; right: 26%; bottom: 30px; width: 30px; height: 30px; pointer-events: none; filter: drop-shadow(0 4px 6px rgb(0 0 0 / .25)); animation: ehTap 3.2s ease-in-out infinite; }
.qzA-q:hover .qzA-main, .qzA.choisi .qzA-main { display: none; }
@media (max-width: 900px) { .qzA { grid-template-columns: 1fr; gap: 24px; padding: 26px 18px; } .qzA-opts { grid-template-columns: 1fr; } .qzA-main { display: none; } }

.qzA-opt { padding-right: 44px; }
@media (max-width: 900px) { .qzA .bouton { width: 100%; white-space: normal; } }

/* ================= ENCART D'APPEL (« Envie de franchir le pas ? ») — 3 propositions (en cours) =================
   Gardé : le dégradé lagon qui coule, les halos jaune et vert, le reflet, la pastille « Conseillers disponibles » qui pulse,
   les 3 coches, le bouton prestige (validé), « ou appelez le 09 80 80 11 14 ». */
.apBase { position: relative; overflow: hidden; isolation: isolate; border-radius: 28px; color: #fff;
  background: linear-gradient(110deg, #1c7db3, #28a3e6, #18a88a, #28a3e6, #1c7db3) 0 0 / 300% 100%; animation: ap-flux 12s linear infinite; box-shadow: 0 34px 64px -32px rgb(28 125 179 / .8); }
.apBase::before, .apBase::after { content: ""; position: absolute; z-index: -1; border-radius: 50%; filter: blur(55px); pointer-events: none; }
.apBase::before { width: 320px; height: 320px; left: -110px; top: -170px; background: rgb(253 230 138 / .5); animation: pqDrift 14s ease-in-out infinite alternate; }
.apBase::after { width: 300px; height: 300px; right: 8%; bottom: -180px; background: rgb(21 151 83 / .6); animation: pqDrift 17s ease-in-out -6s infinite alternate-reverse; }
@keyframes pqDrift { to { transform: translate(40px, 30px) scale(1.15); } }
.ap-live { display: inline-flex; align-items: center; gap: 9px; padding: 6px 14px 6px 11px; border-radius: 999px; font-size: 13px; font-weight: 700; background: rgb(255 255 255 / .16); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .3); }
.ap-live i { position: relative; width: 9px; height: 9px; border-radius: 50%; background: #2bd47d; }
.ap-live i::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #2bd47d; animation: ga-ping 1.6s cubic-bezier(0, 0, .2, 1) infinite; }
.ap-checks { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 16px 0 0; padding: 0; list-style: none; font-size: 14px; font-weight: 600; }
.ap-checks li { display: inline-flex; align-items: center; gap: 7px; }
.ap-checks svg { width: 20px; height: 20px; padding: 4px; border-radius: 50%; color: var(--g); background: #fff; stroke-width: 3.4; }
.ap-tel { display: inline-block; margin-top: 12px; font-size: 14px; color: rgb(255 255 255 / .95); }
.ap-tel b { border-bottom: 1px dashed rgb(255 255 255 / .6); }
.ap-tel:hover { color: #fff; }
.ap-tel:hover b { border-bottom-style: solid; }

/* ---------- A. Lagon et avion : l'encart d'origine, en plus grand, avec l'avion qui le traverse et le titre validé ---------- */
.apA { display: grid; grid-template-columns: minmax(0, 1.2fr) auto; gap: 36px; align-items: center; padding: 48px 50px; }
.apA .tt { margin: 16px 0 0; }
.apA .tt h2 { font-size: clamp(30px, 3.4vw, 44px); }
.apA p.ap-txt { margin-top: 14px; font-size: 17px; color: rgb(255 255 255 / .9); }
.apA-act { display: flex; flex-direction: column; align-items: center; }
.apA-vol { position: absolute; z-index: -1; inset: 0; pointer-events: none; }
.apA-vol img { position: absolute; left: 0; top: 18%; width: 220px; opacity: .9; animation: apA-vol 11s linear 1s infinite; }
@keyframes apA-vol { 0% { transform: translate(-260px, 40px) rotate(-6deg); } 70%, 100% { transform: translate(calc(100vw), -60px) rotate(-6deg); } }
@media (max-width: 860px) { .apA { grid-template-columns: 1fr; padding: 30px 20px; } .apA-act { align-items: stretch; text-align: center; } .apA-vol img { width: 140px; } }

/* ---------- B. Carte d'embarquement : un billet France → Maurice, le talon détachable est le bouton ---------- */
.apB { display: grid; grid-template-columns: minmax(0, 1fr) 360px; max-width: 1040px; margin: 0 auto; filter: drop-shadow(0 34px 40px rgb(8 30 48 / .35)); }
.apB-billet, .apB-talon { position: relative; overflow: hidden; isolation: isolate; }
.apB-billet { padding: 30px 34px; border-radius: 26px 0 0 26px; color: #fff; background: linear-gradient(110deg, #1c7db3, #28a3e6, #18a88a, #28a3e6, #1c7db3) 0 0 / 300% 100%; animation: ap-flux 12s linear infinite;
  -webkit-mask: radial-gradient(circle 16px at 100% 0, transparent 98%, #000) top / 100% 51% no-repeat, radial-gradient(circle 16px at 100% 100%, transparent 98%, #000) bottom / 100% 51% no-repeat;
          mask: radial-gradient(circle 16px at 100% 0, transparent 98%, #000) top / 100% 51% no-repeat, radial-gradient(circle 16px at 100% 100%, transparent 98%, #000) bottom / 100% 51% no-repeat; }
.apB-billet::before { content: ""; position: absolute; z-index: -1; width: 300px; height: 300px; left: -100px; top: -160px; border-radius: 50%; background: rgb(253 230 138 / .45); filter: blur(55px); }
.apB-haut { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.apB-haut img { width: 40px; height: 40px; padding: 3px; border-radius: 50%; background: #fff; }
.apB-cie { display: flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.apB-trajet { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 18px; margin: 22px 0 6px; }
.apB-trajet b { display: block; font-size: 44px; font-weight: 800; line-height: 1; letter-spacing: -.02em; }
.apB-trajet small { display: block; margin-top: 4px; font-size: 12.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; opacity: .85; }
.apB-trajet .fin { text-align: right; }
.apB-ligne { position: relative; height: 2px; background: repeating-linear-gradient(90deg, rgb(255 255 255 / .7) 0 7px, transparent 7px 13px); }
.apB-ligne span { position: absolute; top: 50%; left: 0; display: grid; place-items: center; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; color: var(--b1); background: #fff;
  box-shadow: 0 8px 18px -6px rgb(8 30 48 / .5); animation: apB-vol 4.5s cubic-bezier(.55, .1, .35, 1) 1s infinite; }
.apB-ligne span svg { width: 22px; height: 22px; fill: currentColor; stroke: none; transform: rotate(90deg); }
@keyframes apB-vol { 0% { left: 0; } 80%, 100% { left: 100%; } }
.apB-titre { margin-top: 18px; font-size: clamp(24px, 2.6vw, 32px); font-weight: 800; color: #fff; }
.apB-infos { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 6px 34px; margin-top: 16px; }
.apB-infos small { display: block; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; opacity: .75; }
.apB-infos b { font-size: 15.5px; }
.apB-talon { display: flex; flex-direction: column; justify-content: center; gap: 14px; padding: 28px 24px; border-radius: 0 26px 26px 0; color: var(--ink); background: #fff; border-left: 3px dashed #cfe3f2;
  -webkit-mask: radial-gradient(circle 16px at 0 0, transparent 98%, #000) top / 100% 51% no-repeat, radial-gradient(circle 16px at 0 100%, transparent 98%, #000) bottom / 100% 51% no-repeat;
          mask: radial-gradient(circle 16px at 0 0, transparent 98%, #000) top / 100% 51% no-repeat, radial-gradient(circle 16px at 0 100%, transparent 98%, #000) bottom / 100% 51% no-repeat;
  transition: transform .5s var(--rebond); transform-origin: left center; }
.apB:hover .apB-talon { transform: rotate(2deg) translateX(6px); }
.apB-talon .ap-live { color: var(--g); background: #e6f6ee; box-shadow: none; align-self: flex-start; }
.apB-talon .bouton { width: 100%; min-height: 56px; padding: 0 18px; font-size: 15.5px; } .apB-talon .bouton .ic { margin-left: -6px; }
.apB-talon .ap-tel { color: var(--mute); }
.apB-talon .ap-tel b { color: var(--ink); border-color: var(--line); }
.apB-code { height: 34px; border-radius: 4px; background: repeating-linear-gradient(90deg, var(--ink) 0 2px, transparent 2px 4px, var(--ink) 4px 5px, transparent 5px 8px, var(--ink) 8px 11px, transparent 11px 13px); opacity: .8; }
@media (max-width: 860px) {
  .apB { grid-template-columns: 1fr; }
  .apB-billet { border-radius: 26px 26px 0 0; padding: 24px 20px; -webkit-mask: none; mask: none; }
  .apB-talon { border-radius: 0 0 26px 26px; border-left: 0; border-top: 3px dashed #cfe3f2; -webkit-mask: none; mask: none; }
  .apB-trajet b { font-size: 32px; }
  .apB-infos { grid-template-columns: 1fr 1fr; }
}

/* ---------- C. Le conseiller : fiche blanche avec la photo du bureau, les deux numéros en verre et le bouton prestige ---------- */
.apC { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); border-radius: 28px; overflow: hidden; background: #fff; box-shadow: 0 2px 4px rgb(15 42 61 / .05), 0 34px 64px -32px rgb(15 42 61 / .55); }
.apC-photo { position: relative; min-height: 380px; background: url(../img/wp/localisation2-1-1536x499.webp) 40% 30% / cover; }
.apC-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 50%, #fff), linear-gradient(0deg, rgb(8 30 48 / .55), transparent 45%); }
.apC-photo span { position: absolute; z-index: 1; left: 22px; bottom: 20px; display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 700; color: #fff; }
.apC-photo span svg { width: 18px; height: 18px; }
.apC-corps { padding: 40px 42px 38px 20px; }
.apC .ap-live { color: var(--g); background: #e6f6ee; box-shadow: none; }
.apC .tt { margin: 14px 0 0; }
.apC p.ap-txt { margin-top: 12px; font-size: 16px; color: var(--txt); }
.apC .ap-checks { color: var(--ink); }
.apC .ap-checks svg { color: #fff; background: var(--g); }
.apC-tels { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 22px; }
.apC-tel { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; color: var(--ink); text-decoration: none; background: #f4f9fd; box-shadow: inset 0 0 0 1px var(--line);
  transition: transform .35s var(--rebond), box-shadow .35s, background .3s; }
.apC-tel:hover { color: var(--ink); background: #fff; transform: translateY(-3px); box-shadow: inset 0 0 0 1.5px var(--b2), 0 14px 26px -16px rgb(28 125 179 / .6); }
.apC-tel img { width: 28px; height: auto; border-radius: 3px; box-shadow: 0 2px 6px rgb(0 0 0 / .15); }
.apC-tel small { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--mute); }
.apC-tel b { font-size: 15.5px; }
.apC .bouton { margin-top: 22px; }
@media (max-width: 860px) { .apC { grid-template-columns: 1fr; } .apC-photo { min-height: 200px; } .apC-photo::after { background: linear-gradient(0deg, #fff, transparent 40%); } .apC-photo span { display: none; }
  .apC-corps { padding: 6px 20px 28px; } .apC-tels { grid-template-columns: 1fr; } .apC .bouton { width: 100%; white-space: normal; } }
@media (prefers-reduced-motion: reduce) { .apBase, .apBase::before, .apBase::after, .apA-vol img, .apB-billet, .apB-ligne span { animation: none; } }
@keyframes ap-flux { to { background-position: 300% 0; } }
.bouton .fl-d, .bouton .ic { flex: none; }
.apA > * { min-width: 0; }
@media (max-width: 860px) { .apA .bouton { width: 100%; white-space: normal; } .apA .tt h2 { font-size: 28px; } }

/* ================= COLONNE DES PAGES PERMIS — 3 propositions (en cours ; on garde tout) =================
   Gardé : photo du permis avec son badge qui flotte, ce qui est inclus (coches), les documents, le bloc contact au fond lagon animé
   (signature de la colonne), les 3 actions (WhatsApp, rappel, rendez-vous), les articles liés. */
.co { display: flex; flex-direction: column; gap: 24px; }
.co-visuel { position: relative; }
.co-visuel img { width: 100%; border-radius: 22px; box-shadow: 0 20px 40px -24px rgb(15 42 61 / .6); }
.co-badge { position: absolute; right: -12px; top: 16%; display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px 10px 10px; border-radius: 16px; color: #fff; font-weight: 800; font-size: 15px; line-height: 1.2;
  background: linear-gradient(135deg, var(--b2), var(--b1)); box-shadow: 0 16px 28px -12px rgb(15 42 61 / .7); animation: flotte 5s ease-in-out infinite; text-decoration: none; }
.co-badge small { display: block; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; opacity: .85; }
.co-badge i { display: grid; place-items: center; width: 34px; height: 34px; padding: 8px; border-radius: 10px; background: rgb(255 255 255 / .2); }
.co-badge:hover { color: #fff; }
/* inclus : coches qui se dessinent l'une après l'autre */
.co-inclus { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.co-inclus li { display: flex; align-items: center; gap: 12px; font-size: 15px; font-weight: 600; color: var(--ink); }
.co-inclus li b { color: var(--b1); }
.co-inclus li > span:first-child { flex: none; display: grid; place-items: center; width: 28px; height: 28px; padding: 6px; border-radius: 50%; color: #fff; background: var(--g); box-shadow: 0 6px 12px -6px rgb(21 151 83 / .9); }
.co-inclus svg { stroke-width: 3.2; }
.co-docs { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.co-docs li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; font-size: 14.5px; color: var(--ink); background: #f4f9fd; box-shadow: inset 0 0 0 1px var(--line); }
.co-docs li b { color: var(--b1); }
.co-docs li i { flex: none; display: grid; place-items: center; width: 30px; height: 30px; padding: 7px; border-radius: 9px; color: var(--b1); background: #fff; box-shadow: 0 4px 10px -6px rgb(15 42 61 / .5); }
.co-h { display: flex; align-items: center; gap: 10px; margin: 4px 0 2px; font-size: 15px; font-weight: 800; color: var(--b1); }
.co-h::after { content: ""; flex: 1; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--b2), transparent); }
/* fond lagon (repris de .lagon) */
.co-lagon { position: relative; overflow: hidden; isolation: isolate; padding: 16px; border-radius: 22px; background: #9feaf5; box-shadow: 0 20px 40px -24px rgb(15 42 61 / .6); }
.co-lagon::before, .co-lagon::after { content: ""; position: absolute; inset: -40%; z-index: -1; pointer-events: none; }
.co-lagon::before { background: radial-gradient(closest-side at 30% 35%, rgb(255 255 255 / .9), transparent 60%), radial-gradient(closest-side at 70% 65%, rgb(233 238 164 / .85), transparent 65%),
  radial-gradient(closest-side at 55% 20%, rgb(134 235 247 / .9), transparent 70%), linear-gradient(160deg, #c9f6fb, #5fd3e8 60%, #34b9d8); animation: lagonA 14s ease-in-out infinite alternate; }
.co-lagon::after { opacity: .55; mix-blend-mode: soft-light; background: repeating-radial-gradient(circle at 40% 40%, rgb(255 255 255 / .7) 0 2px, transparent 3px 22px),
  repeating-radial-gradient(circle at 70% 60%, rgb(255 255 255 / .6) 0 2px, transparent 3px 26px); animation: lagonB 9s linear infinite; }
.co-contacts { display: grid; gap: 6px; padding: 10px; border-radius: 16px; background: rgb(255 255 255 / .9); box-shadow: 0 10px 24px -16px rgb(15 42 61 / .5); }
.co-contact { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 12px; color: var(--ink); text-decoration: none; transition: background .25s, transform .3s var(--rebond); }
.co-contact:hover { color: var(--ink); background: #eef7fc; transform: translateX(3px); }
.co-contact .dr { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: #f4f9fd; }
.co-contact .dr img { width: 22px; border-radius: 2px; }
.co-contact .dr svg { width: 18px; height: 18px; color: var(--b1); }
.co-contact small { display: block; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--mute); }
.co-contact b { font-size: 14.5px; font-weight: 700; overflow-wrap: anywhere; }
.co-contact[href^="mailto"] b, .co-contact:last-child b { font-size: 13px; }
.co-lagon .bouton { width: 100%; margin-top: 10px; white-space: normal; }
/* articles en cartes horizontales (format validé) */
.co .cs-pile { gap: 14px; }
.co .cs-ligne .cs-media { width: 38%; aspect-ratio: 1; }
.co .cs-ligne h3 { font-size: 14.5px; }
.co .cs-ligne .cs-ic { display: none; }
.co .cs-ligne .cs-corps { padding-left: 22px; }

/* ---------- A. Lagon modernisé : la colonne d'origine, chaque élément refait avec les pièces validées ---------- */
.coA .co-fiche { padding: 20px; border-radius: 22px; background: #fff; box-shadow: 0 2px 4px rgb(15 42 61 / .05), 0 18px 34px -22px rgb(15 42 61 / .5); display: grid; gap: 14px; }

/* ---------- B. Carte de résident : la photo laisse place à la carte du permis, qui porte ce qui est inclus ---------- */
.coB .cpA-carte { padding: 24px 22px 22px; }
.coB .cpA-duree { margin: 16px 0 14px; }
.coB .cpA-duree b { font-size: 48px; }
.coB .cpA-carte li { padding: 10px 12px; font-size: 14px; }
.coB .cpA-carte li i { width: 34px; height: 34px; padding: 8px; color: var(--b1); background: #fff; }
.coB .cpA-carte .bouton { width: 100%; margin-top: 16px; white-space: normal; }
.coB-docs { position: relative; padding: 22px 18px 18px 30px; margin-left: 18px; border-radius: 20px; background: #fff; box-shadow: 0 2px 4px rgb(15 42 61 / .05), 0 18px 34px -22px rgb(15 42 61 / .5); }
.coB-docs > i { position: absolute; left: -22px; top: 20px; display: grid; place-items: center; width: 44px; height: 44px; padding: 11px; border-radius: 50%; color: #fff;
  background: linear-gradient(135deg, var(--b2), var(--b1)); box-shadow: 0 0 0 4px #fff, 0 10px 18px -8px rgb(28 125 179 / .8); }
.coB-docs .co-docs li { background: none; box-shadow: none; padding: 4px 0; }
.coB .apC { grid-template-columns: 1fr; border-radius: 22px; }
.coB .apC-photo { min-height: 130px; }
.coB .apC-photo::after { background: linear-gradient(0deg, #fff, transparent 55%); }
.coB .apC-corps { padding: 0 18px 20px; }
.coB .apC-tels { grid-template-columns: 1fr; gap: 8px; margin-top: 12px; }
.coB .apC .bouton { width: 100%; white-space: normal; margin-top: 14px; }

/* ---------- C. Une seule fiche collante : photo, onglets Inclus / Documents, bande lagon avec les contacts en ronds ---------- */
.coC-fiche { overflow: hidden; border-radius: 24px; background: #fff; box-shadow: 0 2px 4px rgb(15 42 61 / .05), 0 24px 44px -26px rgb(15 42 61 / .55); }
.coC-fiche .co-visuel img { border-radius: 0; box-shadow: none; }
.coC-fiche .co-badge { right: 14px; top: auto; bottom: 14px; }
.coC-onglets { position: relative; display: grid; grid-template-columns: 1fr 1fr; margin: 16px 16px 0; padding: 4px; border-radius: 14px; background: #eef5fa; }
.coC-onglets button { all: unset; position: relative; z-index: 1; padding: 9px; border-radius: 11px; text-align: center; cursor: pointer; font-size: 14px; font-weight: 700; color: var(--b1); transition: color .3s; }
.coC-onglets button.on { color: #fff; }
.coC-onglets i { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 11px; background: linear-gradient(135deg, var(--b2), var(--b1));
  box-shadow: 0 8px 16px -8px rgb(28 125 179 / .9); transition: transform .45s var(--rebond); }
.coC-fiche[data-ong="1"] .coC-onglets i { transform: translateX(100%); }
.coC-pans { display: grid; padding: 16px 18px 18px; }
.coC-pans > * { grid-area: 1 / 1; transition: opacity .35s, transform .45s var(--courbe); }
.coC-fiche[data-ong="0"] .coC-pans > :last-child, .coC-fiche[data-ong="1"] .coC-pans > :first-child { opacity: 0; transform: translateX(14px); pointer-events: none; }
.coC-bande { position: relative; overflow: hidden; isolation: isolate; padding: 16px 18px 18px; background: #9feaf5; }
.coC-bande::before, .coC-bande::after { content: ""; position: absolute; inset: -40%; z-index: -1; pointer-events: none; }
.coC-bande::before { background: radial-gradient(closest-side at 30% 35%, rgb(255 255 255 / .9), transparent 60%), radial-gradient(closest-side at 70% 65%, rgb(233 238 164 / .85), transparent 65%),
  linear-gradient(160deg, #c9f6fb, #5fd3e8 60%, #34b9d8); animation: lagonA 14s ease-in-out infinite alternate; }
.coC-bande::after { opacity: .55; mix-blend-mode: soft-light; background: repeating-radial-gradient(circle at 40% 40%, rgb(255 255 255 / .7) 0 2px, transparent 3px 22px); animation: lagonB 9s linear infinite; }
.coC-bande p { font-size: 13px; font-weight: 700; color: var(--ink); text-align: center; }
.coC-ronds { display: flex; justify-content: center; gap: 12px; margin: 12px 0 4px; }
.coC-rond { position: relative; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: #fff; box-shadow: 0 10px 20px -10px rgb(15 42 61 / .6); transition: transform .4s var(--rebond); }
.coC-rond:hover { transform: translateY(-4px) scale(1.06); }
.coC-rond img { width: 26px; border-radius: 3px; }
.coC-rond svg { width: 22px; height: 22px; color: var(--b1); }
.coC-rond span { position: absolute; bottom: calc(100% + 8px); left: 50%; padding: 5px 9px; border-radius: 8px; font-size: 12px; font-weight: 700; white-space: nowrap; color: #fff; background: var(--ink);
  transform: translate(-50%, 6px); opacity: 0; pointer-events: none; transition: opacity .25s, transform .3s var(--courbe); }
.coC-rond:hover span { opacity: 1; transform: translate(-50%, 0); }
.coC-bande .bouton { width: 100%; margin-top: 12px; white-space: normal; }

/* ================= COLONNE : la photo et la carte de résident par-dessus — 3 variantes animées (base B, en cours) =================
   La photo (grande, c'est souvent la seule de la page) et la carte de permis validée sont deux calques séparés :
   la photo vit (zoom lent, parallaxe), la carte flotte, s'incline et brille. Script : colonne.js. */
.vb { position: relative; }
.vb-photo { position: relative; overflow: hidden; border-radius: 24px; box-shadow: 0 24px 46px -26px rgb(15 42 61 / .7); }
.vb-photo img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; transform: scale(1.12) translate(var(--px, 0px), var(--py, 0px)); transition: transform .6s var(--courbe); }
.vb-photo::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, transparent 45%, rgb(8 30 48 / .45)); }
.vb .cpA-carte { --rz: 0deg; transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)) rotate(var(--rz)); }
.vb .cpA-haut b { font-size: 18px; }
.vb .cpA-logo { width: 40px; height: 40px; }
.vb-tag { position: absolute; z-index: 3; left: 14px; top: 14px; display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 700; color: #fff;
  background: rgb(255 255 255 / .18); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .45); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.vb-tag svg { width: 15px; height: 15px; }

/* ---------- 1. La carte posée sur la photo : photo haute qui zoome lentement, la carte arrive par le bas et flotte en chevauchant ---------- */
.vb1 .vb-photo { aspect-ratio: 4 / 4.4; }
.vb1 .vb-photo img { animation: vb-zoom 16s ease-in-out infinite alternate; }
@keyframes vb-zoom { from { scale: 1; } to { scale: 1.12; } }
.vb1 .cpA-carte { --rz: -3deg; position: relative; z-index: 2; margin: -96px 10px 0 18px; padding: 20px 20px 18px; }
.vb1 .cpA-carte.flotte { animation: vb-flotte 6s ease-in-out infinite; }
@keyframes vb-flotte { 50% { translate: 0 -8px; } }
.vb1 .cpA-duree { margin: 10px 0 6px; }
.vb1 .cpA-duree b { font-size: 46px; }
.js .vb1.pret .cpA-carte { opacity: 0; translate: 0 60px; }
.js .vb1.pret.vu .cpA-carte { opacity: 1; translate: 0 0; transition: opacity .8s, translate 1s var(--rebond); }

/* ---------- 2. La carte qui se retourne : recto le permis, verso ce qui est inclus ; elle se retourne seule toutes les 5 s et au survol ---------- */
.vb2 .vb-photo { aspect-ratio: 1; }
.vb2 .vb-photo img { animation: vb-pan 18s ease-in-out infinite alternate; }
@keyframes vb-pan { from { object-position: 30% 50%; } to { object-position: 75% 50%; } }
.vb2-scene { position: relative; z-index: 2; height: 230px; margin: -120px 0 0 26px; perspective: 1100px; }
.vb2-carte { position: relative; height: 100%; transform-style: preserve-3d; transition: transform 1s var(--courbe); transform: rotate(-4deg); }
.vb2.verso .vb2-carte { transform: rotate(-4deg) rotateY(180deg); }
.vb2-carte .cpA-carte { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; padding: 20px; transform: none; }
.vb2-carte .cpA-carte.dos { transform: rotateY(180deg); background: linear-gradient(135deg, #2bbf74, var(--g) 45%, #0f7d47); }
.vb2-carte .cpA-carte.dos ul { gap: 6px; }
.vb2-carte .cpA-carte.dos li { padding: 7px 10px; font-size: 13.5px; }
.vb2-carte .cpA-carte.dos li i { width: 28px; height: 28px; padding: 6px; color: var(--g); background: #fff; }
.vb2-carte .cpA-duree { margin: 12px 0 0; }
.vb2-carte .cpA-duree b { font-size: 50px; }
.vb2-coin { position: absolute; right: 16px; bottom: 14px; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; opacity: .9; }
.vb2-coin svg { width: 16px; height: 16px; animation: vb-tourne 2.4s ease-in-out infinite; }
@keyframes vb-tourne { 50% { transform: rotate(180deg); } }

/* ---------- 3. La photo dans la carte : la carte de résident est grande, la photo est sa fenêtre, avec parallaxe et reflet holographique sur l'ensemble ---------- */
.vb3 .cpA-carte { --rz: 0deg; padding: 12px 12px 20px; animation: vb-respire 7s ease-in-out infinite; }
@keyframes vb-respire { 0%, 100% { rotate: -1.5deg; } 50% { rotate: 1.5deg; translate: 0 -5px; } }
.vb3 .vb-photo { aspect-ratio: 4 / 3.2; border-radius: 16px; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .3); }
.vb3 .vb-photo img { transform: scale(1.18) translate(var(--px, 0px), var(--py, 0px)); }
.vb3 .vb-photo::before { content: ""; position: absolute; z-index: 2; inset: 0; pointer-events: none; mix-blend-mode: overlay;
  background: linear-gradient(115deg, transparent 30%, rgb(255 120 200 / .35) 42%, rgb(120 220 255 / .4) 50%, rgb(255 240 120 / .35) 58%, transparent 70%) 0 0 / 250% 100%;
  animation: vb-holo 5s ease-in-out infinite; }
@keyframes vb-holo { 0% { background-position: 120% 0; } 60%, 100% { background-position: -40% 0; } }
.vb3 .cpA-haut { margin: 14px 8px 0; }
.vb3 .cpA-duree { margin: 10px 8px 12px; }
.vb3 .cpA-duree b { font-size: 46px; }
.vb3 .cpA-carte ul { margin: 0 8px; }
.vb3 .cpA-carte li { padding: 8px 12px; font-size: 14px; }
.vb3 .cpA-carte li i { width: 32px; height: 32px; padding: 7px; color: var(--b1); background: #fff; }
.vb3 .vb-mrz { margin: 14px 8px 0; font-family: ui-monospace, Consolas, monospace; font-size: 11px; line-height: 1.5; letter-spacing: .12em; color: rgb(255 255 255 / .7); white-space: nowrap; overflow: hidden; }

/* commun sous la carte : documents, contact, articles (repris de la colonne B) */
.vbS { display: flex; flex-direction: column; gap: 24px; margin-top: 26px; }
@media (prefers-reduced-motion: reduce) { .vb1 .vb-photo img, .vb2 .vb-photo img, .vb1 .cpA-carte.flotte, .vb3 .cpA-carte, .vb3 .vb-photo::before, .vb2-coin svg { animation: none; } }

/* ================= VISUEL DE LA COLONNE (.vp) : l'image d'origine refaite en calques et animée =================
   Photo arrondie en haut à gauche, liseré aux couleurs de Maurice qui passe entre la photo et la carte, carte de visa dessinée en code
   (nette à toutes les tailles, texte du permis modifiable). Animation : la photo zoome lentement, le liseré se dessine puis un reflet le
   parcourt en boucle, la carte arrive en glissant puis flotte, un reflet holographique la traverse. Script : colonne.js (déclenchement). */
.vp { position: relative; aspect-ratio: 486 / 355; container-type: inline-size; }
.vp-photo { position: absolute; z-index: 2; left: 0; top: 0; width: 76%; height: 70%; overflow: hidden; border-radius: 6cqw; box-shadow: 0 3cqw 6cqw -3cqw rgb(15 42 61 / .5); }
.vp-photo img { width: 100%; height: 100%; max-width: none; object-fit: cover; animation: vp-zoom 14s ease-in-out infinite alternate; }
@keyframes vp-zoom { from { transform: scale(1.02); } to { transform: scale(1.14) translate(-2%, 1%); } }
.vp-lisere { position: absolute; z-index: 1; inset: -2% -4% -4% -2%; width: 106%; height: 106%; overflow: visible; pointer-events: none; }
.vp-lisere path { fill: none; stroke-linecap: round; }
.vp-lisere .l1 { stroke: url(#vp-deg); stroke-width: 21; stroke-dasharray: 1; stroke-dashoffset: 1; }
.vp-lisere .l2 { stroke: #fff; stroke-width: 8; stroke-dasharray: .08 1; stroke-dashoffset: 1.1; opacity: 0; }
.vp.vu .vp-lisere .l1 { animation: vp-trace 1.6s cubic-bezier(.55, .1, .35, 1) .3s forwards; }
.vp.vu .vp-lisere .l2 { animation: vp-reflet 3.6s ease-in-out 2.2s infinite; }
@keyframes vp-trace { to { stroke-dashoffset: 0; } }
@keyframes vp-reflet { 0% { stroke-dashoffset: 1.1; opacity: .0; } 10% { opacity: .55; } 80% { opacity: .55; } 100% { stroke-dashoffset: -.1; opacity: 0; } }

/* la carte de visa */
.vp-carte { --rx: 0deg; --ry: 0deg; position: absolute; z-index: 3; right: 1.5%; bottom: 1.5%; width: 60%; aspect-ratio: 1.56; overflow: hidden; border-radius: 3.6cqw; color: #1d2b36;
  font-family: "Poppins", sans-serif; font-size: 1.7cqw; line-height: 1.25;
  background: radial-gradient(circle at 75% 60%, rgb(255 255 255 / .9), transparent 55%), repeating-radial-gradient(circle at 30% 120%, #e6edf0 0 .5cqw, #f3f6f6 .5cqw 1cqw), #eef3f3;
  box-shadow: 0 0 0 .7cqw rgb(255 255 255 / .95), 0 0 4cqw 1.2cqw rgb(255 255 255 / .75), 0 5cqw 8cqw -4cqw rgb(15 42 61 / .55), inset 0 0 0 .25cqw rgb(255 255 255 / .8);
  transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .5s var(--courbe); }
.vp-carte.inclinee { transition: transform .12s linear; }
.vp-carte::after { content: ""; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: overlay;
  background: linear-gradient(115deg, transparent 32%, rgb(255 120 200 / .45) 42%, rgb(120 220 255 / .5) 50%, rgb(255 240 120 / .45) 58%, transparent 68%) 0 0 / 260% 100%;
  animation: vb-holo 6s ease-in-out 2.4s infinite; }
.vp-tete { display: grid; grid-template-columns: 32% 1fr; height: 17%; }
.vp-drapeau { display: grid; grid-template-rows: repeat(4, 1fr); }
.vp-drapeau i:nth-child(1) { background: #ea2839; } .vp-drapeau i:nth-child(2) { background: #1a206d; } .vp-drapeau i:nth-child(3) { background: #ffd500; } .vp-drapeau i:nth-child(4) { background: #00a551; }
.vp-titre { display: flex; align-items: center; justify-content: flex-end; padding: 0 4%; font-size: 3.5cqw; font-weight: 800; letter-spacing: .02em; white-space: nowrap; color: #fff; background: linear-gradient(90deg, #1f5d97, #154a7d); }
.vp-corps { display: grid; grid-template-columns: 30% 1fr; gap: 4%; padding: 4% 5% 0; }
.vp-pho { aspect-ratio: .8; border-radius: 1cqw; background: linear-gradient(160deg, #e9b9ad, #d79c90); box-shadow: inset 0 0 0 .3cqw rgb(255 255 255 / .5); display: grid; place-items: end center; overflow: hidden; }
.vp-pho svg { width: 80%; height: auto; fill: rgb(255 255 255 / .55); stroke: none; }
.vp-champs { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2cqw 3%; align-content: start; }
.vp-champs div { font-weight: 700; text-transform: uppercase; }
.vp-champs small { display: block; font-size: 1.5cqw; font-weight: 500; font-style: italic; text-transform: none; color: #50636f; }
.vp-champs .w { grid-column: 1 / -1; }
.vp-champs .note { font-size: 1.45cqw; font-weight: 600; line-height: 1.3; }
.vp-mrz { position: absolute; left: 5%; right: 4%; bottom: 5%; font-family: ui-monospace, "Consolas", monospace; font-size: 2.3cqw; font-weight: 700; line-height: 1.35; letter-spacing: .06em;
  white-space: nowrap; overflow: hidden; color: #233140; }
/* entrée + flottement */
.js .vp.pret .vp-carte { opacity: 0; translate: 14% 10%; }
.js .vp.pret .vp-photo { opacity: 0; translate: -6% 0; }
.js .vp.pret.vu .vp-photo { opacity: 1; translate: 0 0; transition: opacity .8s, translate 1s var(--courbe); }
.js .vp.pret.vu .vp-carte { opacity: 1; translate: 0 0; transition: opacity .8s .9s, translate 1.1s var(--rebond) .9s; }
.vp.flotte .vp-carte { animation: vp-flotte 6s ease-in-out infinite; }
@keyframes vp-flotte { 50% { translate: 0 -2.2%; } }
@keyframes vb-holo { 0% { background-position: 120% 0; } 60%, 100% { background-position: -40% 0; } }
@media (prefers-reduced-motion: reduce) { .vp-photo img, .vp-carte::after, .vp.flotte .vp-carte, .vp.vu .vp-lisere .l2 { animation: none; } .vp .vp-lisere .l1 { stroke-dashoffset: 0; } }
/* halo lumineux qui respire autour de la carte (la détache de la photo, comme le bord clair de l'image d'origine) */
.vp::after { content: ""; position: absolute; z-index: 0; right: 1.5%; bottom: 1.5%; width: 60%; aspect-ratio: 1.56; border-radius: 3.6cqw; pointer-events: none;
  box-shadow: 0 0 5cqw 2cqw rgb(255 255 255 / .9), 0 0 11cqw 3cqw rgb(253 230 138 / .4); opacity: 0; transition: opacity 1s 1.2s; }
.vp.vu::after { opacity: 1; animation: vp-halo 4s ease-in-out 2.4s infinite; }
.vp.flotte::after { translate: 0 0; animation: vp-halo 4s ease-in-out infinite, vp-flotte 6s ease-in-out infinite; }
@keyframes vp-halo { 50% { box-shadow: 0 0 8cqw 3.5cqw rgb(255 255 255 / .95), 0 0 15cqw 6cqw rgb(253 230 138 / .45); } }
@media (prefers-reduced-motion: reduce) { .vp::after { animation: none !important; } }
/* badge « Demande de … » posé sur le visuel animé de la colonne */
.co-vpw { position: relative; }
.co-vpw .co-badge { z-index: 5; top: 4%; right: -10px; }

/* colonne B : carte compactée, ce qui est inclus défile à l'horizontale (une ligne à la fois, glisser ou points) */
.coB .cpA-carte { padding: 18px 18px 16px; }
.coB .cpA-duree { margin: 10px 0 12px; }
.coB .cpA-duree b { font-size: 42px; }
.coB .cpA-carte .bouton { margin-top: 12px; }
.co-defile { overflow: hidden; }
.co-defile ul { display: flex; gap: 10px; margin: 0; padding: 0; cursor: grab; touch-action: pan-y; transition: transform .55s var(--courbe); }
.co-defile ul.tient { cursor: grabbing; transition: none; }
.co-defile li { flex: 0 0 100%; min-height: 58px; user-select: none; }
.co-points { display: flex; justify-content: center; gap: 6px; margin-top: 10px; }
.co-points button { all: unset; width: 7px; height: 7px; border-radius: 99px; cursor: pointer; background: rgb(255 255 255 / .45); transition: width .35s var(--courbe), background .3s; }
.co-points button.on { width: 22px; background: #fff; }

/* ================= PIED DE PAGE — 3 propositions (en cours ; on garde tout) =================
   Gardé : logo blanc, photo des bureaux, téléphones France / Maurice, email, « À propos » avec la photo de l'équipe,
   rappel gratuit et rendez-vous sur place, barre du bas (copyright, sociétés, liens légaux, espace client). */
.pd { position: relative; isolation: isolate; color: rgb(255 255 255 / .78); background: var(--ink); font-size: 14.5px; }
.pd a { color: rgb(255 255 255 / .82); text-decoration: none; transition: color .25s; }
.pd a:hover { color: #fff; }
.pd h4 { margin-bottom: 14px; font-size: 13px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #fff; }
.pd-liens { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; }
.pd-liens a { display: inline-flex; align-items: center; gap: 8px; }
.pd-liens a::before { content: ""; width: 0; height: 2px; border-radius: 2px; background: var(--jaune); transition: width .3s var(--courbe); }
.pd-liens a:hover::before { width: 12px; }
.pd-logo { width: 190px; }
.pd-tels { display: grid; gap: 10px; }
.pd-tel { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 14px; background: rgb(255 255 255 / .06); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .1);
  transition: background .3s, transform .35s var(--rebond); }
.pd-tel:hover { background: rgb(255 255 255 / .12); transform: translateX(4px); }
.pd-tel img { width: 24px; border-radius: 3px; }
.pd-tel svg { width: 20px; height: 20px; color: var(--b2); }
.pd-tel small { display: block; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgb(255 255 255 / .55); }
.pd-tel b { color: #fff; font-size: 15px; }
.pd-bas { position: relative; padding: 18px 0; font-size: 13px; color: rgb(255 255 255 / .6); border-top: 1px solid rgb(255 255 255 / .1); }
.pd-bas .conteneur { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 30px; }
.pd-bas ul { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 0; padding: 0; list-style: none; }
.pd-equipe { display: flex; gap: 16px; align-items: flex-start; }
.pd-equipe img { flex: none; width: 120px; border-radius: 14px; box-shadow: 0 14px 26px -14px rgb(0 0 0 / .7); }
.pd-equipe p { font-size: 14px; line-height: 1.65; }
.pd .bouton { white-space: normal; }

/* ---------- A. Lagon de nuit : vague animée en haut, 4 colonnes (marque et équipe, services, guides, contact) ---------- */
.pdA { padding-top: 90px; }
.pdA-vague { position: absolute; z-index: -1; left: 0; right: 0; top: -1px; height: 70px; overflow: hidden; }
.pdA-vague svg { position: absolute; left: 0; width: 200%; height: 100%; animation: pdA-houle 14s linear infinite; }
.pdA-vague svg:first-child { opacity: .55; animation-duration: 22s; animation-direction: reverse; }
@keyframes pdA-houle { to { transform: translateX(-50%); } }
.pdA-grille { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.25fr; gap: 40px; padding-bottom: 50px; }
.pdA-marque p { margin: 18px 0; font-size: 14px; line-height: 1.65; }
.pdA .bouton { margin-top: 12px; width: 100%; }
@media (max-width: 960px) { .pdA-grille { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .pdA-grille { grid-template-columns: 1fr; gap: 30px; } }

/* ---------- B. Le bureau : bandeau photo des bureaux avec l'encart contact, puis colonnes compactes ---------- */
.pdB-photo { position: relative; height: 380px; overflow: hidden; }
.pdB-img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 40% 45%; animation: pdB-zoom 20s ease-in-out infinite alternate; }
@keyframes pdB-zoom { from { transform: scale(1); } to { transform: scale(1.08) translateX(-2%); } }
.pdB-photo::before { content: ""; position: absolute; z-index: 1; top: -10%; bottom: -10%; left: 0; width: 25%; pointer-events: none; background: linear-gradient(100deg, transparent, rgb(255 255 255 / .25), transparent);
  transform: translateX(-200%) skewX(-20deg); animation: cpA-reflet 8s ease-in-out 2s infinite; }
.pdB-photo .pd-logo { width: 170px; filter: drop-shadow(0 4px 14px rgb(0 0 0 / .45)); }
.pdB-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, var(--ink) 0%, rgb(15 42 61 / .35) 50%, rgb(15 42 61 / .1)); }
.pdB-photo .conteneur { position: relative; z-index: 1; height: 100%; display: flex; align-items: flex-end; padding-bottom: 30px; }
.pdB-titre { color: #fff; }
.pdB-titre small { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--jaune); }
.pdB-titre small svg { width: 16px; height: 16px; }
.pdB-titre b { display: block; margin-top: 6px; font-size: clamp(26px, 3vw, 38px); font-weight: 800; line-height: 1.15; }
.pdB-carte { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) auto; gap: 12px; align-items: center; margin-top: -10px; padding: 16px; border-radius: 22px;
  background: rgb(255 255 255 / .07); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .12); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.pdB-grille { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 40px; padding: 50px 0; }
@media (max-width: 960px) { .pdB-carte { grid-template-columns: 1fr 1fr; } .pdB-carte .bouton { grid-column: 1 / -1; } .pdB-grille { grid-template-columns: 1fr; gap: 30px; } }

/* ---------- C. La carte d'embarquement : le billet France → Maurice ouvre le pied de page (l'idée gardée pour un autre usage) ---------- */
.pdC { padding-top: 70px; background: linear-gradient(180deg, #f4f9fd 0, #f4f9fd 130px, var(--ink) 130px); }
.pdC .apB { margin-bottom: 60px; }
.pdC-grille { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 40px; padding-bottom: 50px; }
@media (max-width: 960px) { .pdC-grille { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .pdC-grille { grid-template-columns: 1fr; gap: 30px; } }
@media (prefers-reduced-motion: reduce) { .pdA-vague svg { animation: none; } }
.pd a.bouton, .pd a.bouton:hover { color: #fff; }
.pd a.bouton-prestige, .pd a.bouton-prestige:hover { color: var(--g); }
@media (max-width: 600px) { .pdB-carte { grid-template-columns: 1fr; } .pdB-photo { height: 220px; } .pdB-img { object-position: 30% 45%; } }
/* pied C : photo des bureaux, sans légende (preuve par l'image), zoom lent et reflet */
.pdC-bureau { position: relative; overflow: hidden; margin-bottom: 22px; aspect-ratio: 16 / 9; border-radius: 18px; box-shadow: 0 20px 40px -22px rgb(0 0 0 / .8), inset 0 0 0 1px rgb(255 255 255 / .12); }
/* photo très large (3 pour 1) : travelling de gauche à droite puis retour, en boucle, pour montrer toute la façade */
.pdC-bureau img { width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 0% 40%; animation: pdC-travelling 18s ease-in-out infinite alternate; }
@keyframes pdC-travelling { from { object-position: 0% 40%; } to { object-position: 100% 40%; } }
.pdC-bureau::after { content: ""; position: absolute; top: -20%; bottom: -20%; left: 0; width: 30%; pointer-events: none; background: linear-gradient(100deg, transparent, rgb(255 255 255 / .35), transparent);
  transform: translateX(-200%) skewX(-20deg); animation: cpA-reflet 7s ease-in-out 1.5s infinite; }
.pdC-grille { grid-template-columns: 1.5fr 1fr 1fr 1.2fr; }
@media (max-width: 960px) { .pdC-grille { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .pdC-grille { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .pdC-bureau img { animation: none; object-position: 30% 40%; } }
@media (prefers-reduced-motion: reduce) { .pdB-img, .pdB-photo::before { animation: none; } }

/* ================= HEADER (barre du haut + menu) — 3 propositions (en cours) =================
   Contrainte : pas plus haut qu'aujourd'hui (53 + 80 px) → barre 44 px + en-tête 80 px.
   Gardé : météo et heure en direct de Grand Baie, numéros France / Maurice, demande de rappel, logo, Accueil / Services / Guides / Contact / Espace client, recherche.
   Ajouté : menu « Services » en grand panneau (mega-menu) avec icônes et l'appel au test, soulignement animé, numéros en pastilles avec drapeau,
   rappel en vrai bouton. Mobile : panneau plein écran (sans backdrop-filter sur l'en-tête, qui cassait le menu actuel). Script : entete.js. */
.hx { position: relative; z-index: 20; font-size: 14px; }
.hx:hover, .hx:focus-within { z-index: 40; }
.hx-barre { height: 44px; color: #fff; }
.hx-barre .conteneur, .hx-tete .conteneur { display: flex; align-items: center; height: 100%; gap: 14px; }
.hx-meteo { display: inline-flex; align-items: center; gap: 8px; margin-right: auto; font-weight: 600; white-space: nowrap; }
.hx-meteo svg { width: 17px; height: 17px; color: var(--jaune); animation: hx-soleil 12s linear infinite; }
@keyframes hx-soleil { to { transform: rotate(360deg); } }
.hx-meteo small { font-weight: 500; opacity: .8; }
.hx-tel { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px 0 8px; border-radius: 999px; font-weight: 700; white-space: nowrap; color: inherit; text-decoration: none;
  transition: background .3s, transform .3s var(--rebond); }
.hx-tel img { width: 18px; border-radius: 2px; box-shadow: 0 1px 3px rgb(0 0 0 / .25); }
.hx-tel:hover { transform: translateY(-1px); }
.hx-rappel { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 16px 0 6px; border-radius: 999px; font-weight: 700; white-space: nowrap; text-decoration: none; }
.hx-rappel i { display: grid; place-items: center; width: 24px; height: 24px; padding: 5px; border-radius: 50%; }
.hx-rappel:hover i svg { animation: bt-sonne .9s ease-in-out; }
.hx-rappel::after { content: ""; position: absolute; top: -20%; bottom: -20%; left: 0; width: 30%; background: linear-gradient(100deg, transparent, rgb(255 255 255 / .5), transparent);
  transform: translateX(-160%) skewX(-20deg); animation: bt-reflet 5s ease-in-out 1s infinite; }

.hx-tete { position: relative; height: 80px; background: #fff; box-shadow: 0 10px 30px -22px rgb(15 42 61 / .5); }
.hx-logo img { width: 230px; height: auto; }
.hx-nav { margin-left: auto; height: 100%; }
.hx-nav > ul { display: flex; align-items: stretch; height: 100%; margin: 0; padding: 0; list-style: none; }
.hx-nav > ul > li { position: static; display: flex; align-items: center; }
.hx-nav > ul > li > a { position: relative; display: flex; align-items: center; gap: 5px; height: 100%; padding: 0 16px; font-size: 15px; font-weight: 600; color: #263045; text-decoration: none; transition: color .3s; }
.hx-nav > ul > li > a svg { width: 13px; height: 13px; stroke-width: 2.6; transform: rotate(90deg); transition: transform .35s var(--courbe); }
.hx-nav > ul > li:hover > a svg { transform: rotate(-90deg); }
.hx-nav > ul > li > a:hover, .hx-nav > ul > li.actif > a { color: var(--b1); }
.hx-ec { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px 0 8px; border-radius: 999px; font-weight: 700; color: var(--b1); text-decoration: none; white-space: nowrap;
  box-shadow: inset 0 0 0 1.5px rgb(28 125 179 / .35); transition: background .3s, color .3s, box-shadow .3s; }
.hx-ec i { display: grid; place-items: center; width: 28px; height: 28px; padding: 6px; border-radius: 50%; color: var(--b1); background: var(--lb); transition: background .3s, color .3s; }
.hx-ec:hover { color: #fff; background: linear-gradient(110deg, var(--b2), var(--b1)); box-shadow: none; }
.hx-ec:hover i { color: #fff; background: rgb(255 255 255 / .22); }
.hx-loupe { all: unset; box-sizing: border-box; cursor: pointer; display: grid; place-items: center; width: 40px; height: 40px; padding: 11px; border-radius: 50%; color: var(--b1); background: var(--lb);
  transition: background .3s, color .3s, transform .4s var(--rebond); }
.hx-loupe:hover { color: #fff; background: var(--b2); transform: rotate(-10deg) scale(1.06); }
.hx-burger { all: unset; display: none; cursor: pointer; width: 44px; height: 44px; padding: 12px; border-radius: 14px; color: var(--b1); background: var(--lb); }

/* mega-menu Services */
.hx-mega { position: absolute; z-index: 30; left: 0; right: 0; top: 100%; padding: 26px 0 30px; background: #fff; box-shadow: 0 30px 60px -30px rgb(15 42 61 / .5); border-top: 1px solid var(--line);
  opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .25s, transform .35s var(--courbe), visibility .25s; }
.hx-nav li:hover > .hx-mega, .hx-nav li:focus-within > .hx-mega { opacity: 1; visibility: visible; transform: none; }
.hx-mega .conteneur { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.1fr; gap: 30px; height: auto; align-items: start; }
.hx-mega h5 { margin-bottom: 10px; font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--mute); }
.hx-mega ul { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.hx-mega.deux ul.v { grid-template-columns: 1fr; }
.hx-mega li a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; font-size: 14px; font-weight: 600; color: var(--ink); text-decoration: none; transition: background .25s, transform .3s var(--courbe); }
.hx-mega li a i { flex: none; display: grid; place-items: center; width: 30px; height: 30px; padding: 7px; border-radius: 9px; color: var(--c, var(--b1)); background: var(--cl, var(--lb)); transition: background .3s, color .3s; }
.hx-mega li a:hover { background: #f4f9fd; transform: translateX(4px); }
.hx-mega li a:hover i { color: #fff; background: linear-gradient(135deg, var(--c2, var(--b2)), var(--c, var(--b1))); }
.hx-promo { position: relative; overflow: hidden; isolation: isolate; padding: 20px; border-radius: 18px; color: #fff; background: linear-gradient(120deg, var(--b1), var(--b2) 55%, #18a88a); }
.hx-promo b { display: block; font-size: 18px; line-height: 1.25; }
.hx-promo p { margin: 6px 0 14px; font-size: 13.5px; opacity: .9; }
.hx-promo .bouton { width: 100%; }

/* ---------- A. Lagon : barre en dégradé lagon qui coule, rappel en bouton blanc, soulignement dégradé qui se trace ---------- */
.hdA .hx-barre { background: linear-gradient(110deg, #1c7db3, #28a3e6, #18a88a, #28a3e6, #1c7db3) 0 0 / 300% 100%; animation: ap-flux 18s linear infinite; }
.hdA .hx-tel:hover { background: rgb(255 255 255 / .15); }
.hdA .hx-rappel { color: var(--b1); background: #fff; box-shadow: 0 6px 14px -8px rgb(8 30 48 / .6); }
.hdA .hx-rappel i { color: #fff; background: linear-gradient(135deg, var(--g), var(--b2)); }
.hdA .hx-rappel::after { background: linear-gradient(100deg, transparent, rgb(40 163 230 / .25), transparent); }
.hdA .hx-nav > ul > li > a::after { content: ""; position: absolute; left: 16px; right: 16px; bottom: 22px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--b2), var(--g));
  transform: scaleX(0); transform-origin: left; transition: transform .4s var(--courbe); }
.hdA .hx-nav > ul > li:hover > a::after, .hdA .hx-nav > ul > li.actif > a::after { transform: scaleX(1); }

/* ---------- B. Nuit et pastille : barre bleu nuit avec « conseillers en ligne », pastille qui suit la souris dans le menu ---------- */
.hdB .hx-barre { background: var(--ink); }
.hdB .hx-meteo .pt { width: 8px; height: 8px; border-radius: 50%; background: #2bd47d; box-shadow: 0 0 0 0 rgb(43 212 125 / .6); animation: pouls 2s infinite; }
.hdB .hx-tel { background: rgb(255 255 255 / .06); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .12); }
.hdB .hx-tel:hover { background: rgb(255 255 255 / .14); }
.hdB .hx-rappel { color: #fff; background: linear-gradient(100deg, var(--g), var(--b2)); box-shadow: 0 6px 16px -8px rgb(21 151 83 / .9); }
.hdB .hx-rappel i { color: var(--g); background: #fff; }
.hdB .hx-nav > ul > li > a { z-index: 1; }
.hdB .hx-pastille { position: absolute; z-index: 0; top: 50%; height: 40px; margin-top: -20px; border-radius: 999px; background: var(--lb); opacity: 0; pointer-events: none;
  transition: left .4s var(--courbe), width .4s var(--courbe), opacity .3s; }

.hdB .hx-nav > ul > li.actif > a { color: var(--b1); }
.hdB .hx-nav > ul > li.actif > a::before { content: ""; position: absolute; left: 50%; bottom: 18px; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: var(--g); }

/* ---------- C. Drapeau : barre blanche, numéros et rappel en bleu, liseré aux couleurs de Maurice qui coule sous l'en-tête ---------- */
.hdC .hx-barre { color: var(--ink); background: #f4f9fd; border-bottom: 1px solid var(--line); }
.hdC .hx-meteo svg { color: #f2b53a; }
.hdC .hx-tel { color: var(--b1); }
.hdC .hx-tel:hover { background: #fff; box-shadow: 0 6px 14px -10px rgb(15 42 61 / .5); }
.hdC .hx-rappel { color: #fff; background: linear-gradient(110deg, var(--b2), var(--b1)); box-shadow: 0 6px 14px -8px rgb(28 125 179 / .9); }
.hdC .hx-rappel i { color: var(--b1); background: #fff; }
.hdC .hx-tete { position: relative; }
.hdC .hx-tete::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: linear-gradient(90deg, #ea2839 0 25%, #1a206d 25% 50%, #ffd500 50% 75%, #00a551 75% 100%) 0 0 / 200% 100%; animation: hx-drapeau 12s linear infinite; }
@keyframes hx-drapeau { to { background-position: 200% 0; } }
.hdC .hx-nav > ul > li > a::after { content: ""; position: absolute; left: 50%; bottom: 20px; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: var(--b2);
  transform: scale(0); transition: transform .35s var(--rebond); }
.hdC .hx-nav > ul > li:hover > a::after, .hdC .hx-nav > ul > li.actif > a::after { transform: scale(1); }

/* ---------- mobile : barre réduite aux 2 numéros + rappel en icône ; menu en panneau plein écran ---------- */
@media (max-width: 1080px) {
  .hx-meteo, .hx-ec span { display: none; }
  .hx-barre .conteneur { justify-content: center; }
}
@media (max-width: 860px) {
  .hx-barre { height: 38px; }
  .hx-tel { height: 28px; padding: 0 8px 0 6px; font-size: 12.5px; }
  .hx-rappel { padding: 0 4px; height: 28px; }
  .hx-rappel span { display: none; }
  .hx-tete { height: 72px; }
  .hx-logo img { width: 190px; }
  .hx-nav, .hx-ec, .hx-loupe { display: none; }
  .hx-burger { display: block; margin-left: auto; }
}
.hx-tiroir { position: fixed; z-index: 200; inset: 0; display: flex; flex-direction: column; gap: 16px; padding: 18px 18px 28px; overflow-y: auto; background: #fff;
  transform: translateX(100%); transition: transform .45s var(--courbe); }
.hx-tiroir.ouvert { transform: none; }
.hx-tiroir-haut { display: flex; align-items: center; justify-content: space-between; }
.hx-tiroir-haut img { width: 180px; }
.hx-tiroir nav:not(.hx-acc) a { display: flex; align-items: center; justify-content: space-between; padding: 14px 4px; border-bottom: 1px solid var(--line); font-size: 17px; font-weight: 700; color: var(--ink); text-decoration: none; }
.hx-tiroir nav:not(.hx-acc) a svg { width: 18px; height: 18px; color: var(--b2); }

/* menu mobile en accordéon : les rubriques du grand menu, une seule ouverte à la fois (entete.js) */
.hx-acc { display: grid; }
.hx-acc-lien, .hx-rub > button { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 4px; border-bottom: 1px solid var(--line); cursor: pointer;
  font-size: 17px; font-weight: 700; color: var(--ink); text-decoration: none; }
.hx-acc-ic { flex: none; display: grid; place-items: center; width: 36px; height: 36px; padding: 9px; border-radius: 11px; color: var(--c, var(--b1)); background: var(--cl, var(--lb)); transition: background .3s, color .3s, transform .45s var(--rebond); }
.hx-rub > button > svg { flex: none; width: 18px; height: 18px; margin-left: auto; color: var(--b2); stroke-width: 2.6; transform: rotate(90deg); transition: transform .4s var(--courbe); }
.hx-rub.ouvert > button { color: var(--c, var(--b1)); }
.hx-rub.ouvert > button > svg { transform: rotate(-90deg); }
.hx-rub.ouvert .hx-acc-ic { color: #fff; background: linear-gradient(135deg, var(--c2, var(--b2)), var(--c, var(--b1))); transform: rotate(-8deg); }
/* le sous-menu descend en douceur (hauteur 0 → auto par grid-template-rows) */
.hx-sous { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s var(--courbe); }
.hx-sous > div { overflow: hidden; }
.hx-rub.ouvert .hx-sous { grid-template-rows: 1fr; }
.hx-sous ul { display: grid; gap: 2px; margin: 0; padding: 8px 0 12px 14px; list-style: none; border-bottom: 1px solid var(--line); }
.hx-sous li a { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 12px; font-size: 15px; font-weight: 600; line-height: 1.3; color: var(--ink); text-decoration: none; transition: background .25s; }
.hx-sous li a:active, .hx-sous li a:hover { background: #f4f9fd; }
.hx-sous li a i { flex: none; display: grid; place-items: center; width: 30px; height: 30px; padding: 7px; border-radius: 9px; color: var(--c, var(--b1)); background: var(--cl, var(--lb)); }
/* une couleur par rubrique (icônes du grand menu et du tiroir) ; le test « Quel visa choisir ? » ressort en soleil */
.c-bleu { --c: #1c7db3; --c2: #28a3e6; --cl: #e8f4fd; }
.c-vert { --c: #159753; --c2: #34c27a; --cl: #e3f6ec; }
.c-rouge { --c: #b11c1d; --c2: #e0484a; --cl: #fdecec; }
.c-ciel { --c: #0e8fc9; --c2: #4cc3f0; --cl: #e4f6fd; }
.hx-mega li.choix, .hx-sous li.choix { --c: #b45309; --c2: #f59e0b; --cl: #fde68a; }
.hx-mega li.choix a, .hx-sous li.choix a { background: #fffbeb; }
.hx-mega li.choix a:hover, .hx-sous li.choix a:hover { background: #fef3c7; }
.hx-sous li { opacity: 0; transform: translateX(-8px); transition: opacity .3s, transform .4s var(--courbe); }
.hx-rub.ouvert .hx-sous li { opacity: 1; transform: none; transition-delay: calc(var(--k, 0) * 30ms + .1s); }
.hx-tiroir .hx-promo { flex: none; }
.hx-tiroir .pd-tel { color: var(--ink); background: #f4f9fd; box-shadow: inset 0 0 0 1px var(--line); }
.hx-tiroir .pd-tel small { color: var(--mute); }
.hx-tiroir .pd-tel b { color: var(--ink); }
@media (prefers-reduced-motion: reduce) { .hdA .hx-barre, .hdC .hx-tete::after, .hx-meteo svg, .hx-rappel::after { animation: none; } }