/* Sections de l'accueil : mise en page, fonds et espacements (les éléments eux-mêmes sont dans base.css).
Règle : chaque section prend au plus la place de la section d'origine. Propositions sur /charte/ (charte-sections.html). */
/* ---------- rythme : sections et titre « serré » ---------- */
.sx { position: relative; padding: 56px 0; }
.sx-motif { isolation: isolate; background: #f7f9fe; }
.sx-motif::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .36; background: url(../img/wp/row-bg-pat-one.webp); }
.tt.serre { margin-bottom: 26px; }
.tt.serre h2 { margin-top: 8px; font-size: clamp(26px, 2.6vw, 34px); }
.tt.serre .tt-trait { margin-top: 14px; }
.tt.serre p { margin-top: 14px; font-size: 16px; line-height: 1.6; }
.tt.serre[data-num]::before { top: -30px; font-size: 110px; }
.tt-ligne.tt-ligne-serre { margin-bottom: 26px; }
@media (max-width: 760px) { .sx { padding: 40px 0; } .tt.serre[data-num]::before { font-size: 80px; top: -20px; } }
/* repères de la planche (budget / hauteur obtenue) */
.sx-regle { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 26px; }
.sx-regle > div { padding: 18px 20px; border-radius: 16px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.sx-regle p { margin-top: 6px; font-size: 14.5px; line-height: 1.6; color: var(--mute); }
.sx-budget { display: inline-block; margin-left: 10px; padding: 3px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 600; vertical-align: middle; color: var(--mute); background: #f4f9fd; }
.sx-budget.ok b { color: var(--g); }
.sx-choisi { display: inline-flex; align-items: center; gap: 5px; margin-left: 8px; padding: 3px 10px 3px 6px; border-radius: 999px; font-size: 12.5px; font-weight: 700; vertical-align: middle; color: #fff; background: var(--g); }
.sx-choisi svg { width: 15px; height: 15px; stroke-width: 3; }
.sx-budget.trop b { color: #b11c1d; }
@media (max-width: 760px) { .sx-regle { grid-template-columns: 1fr; } }
/* ================= SERVICES : 733 px de cartes + colonne de 407 px, comme la section d'origine ================= */
.sx-svc { padding: 36px 0 24px; }
.svx { display: grid; grid-template-columns: minmax(0, 733fr) minmax(0, 407fr); gap: 0 30px; align-items: start; }
.svx > * { min-width: 0; }
.svx-cote { display: grid; gap: 14px; }
.svx-bureau { width: 100%; aspect-ratio: 555 / 180; object-fit: cover; border-radius: 16px; box-shadow: 0 14px 30px -18px rgb(15 42 61 / .6); }
.svx-lagon { height: 420px; border-radius: 20px; box-shadow: 0 20px 40px -26px rgb(15 42 61 / .6); }
.svx-lagon-txt { position: absolute; z-index: 2; left: 16px; right: 16px; bottom: 16px; padding: 16px 16px 18px; border-radius: 16px; text-align: center;
background: rgb(255 255 255 / .72); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .8); }
.svx-lagon-txt b { display: block; font-size: 17px; line-height: 1.3; color: var(--ink); }
.svx-lagon-txt p { margin: 6px 0 12px; font-size: 14px; line-height: 1.5; color: var(--txt); }
.svx-lagon-txt .bouton { width: 100%; }
@media (max-width: 960px) {
.svx { grid-template-columns: minmax(0, 1fr); }
.svx-cote { grid-template-columns: 1fr 1fr; margin-top: 26px; }
.svx-lagon { height: 300px; }
}
@media (max-width: 600px) { .svx-cote { grid-template-columns: 1fr; } .svx-bureau { display: none; } }
/* --- S1 : fiches mini 3 × 3 --- */
.cs-grille.svA { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 14px; }
.cs-xs .cs-media { aspect-ratio: 5 / 2; border-radius: 14px; }
.cs-xs .cs-corps { flex-direction: row; justify-content: space-between; align-items: center; gap: 8px; margin: -22px 10px 0; padding: 26px 12px 12px; text-align: left; border-radius: 12px; }
.cs-xs .cs-ic { top: -20px; left: 14px; width: 40px; height: 40px; margin-left: 0; padding: 10px; box-shadow: 0 0 0 4px #fff, 0 10px 18px -8px rgb(28 125 179 / .8); }
.cs-xs h3 { font-size: 14.5px; line-height: 1.25; }
.cs-xs .cs-pied { margin: 0; padding: 0; }
.cs-xs .cs-lien { display: none; }
.cs-xs .cs-go { width: 28px; height: 28px; padding: 7px; }
.cs-xs .cs-tag { top: 8px; left: 8px; padding: 3px 9px; font-size: 11px; }
.cs-xs .cs-corps::after { left: 12px; right: 12px; transform-origin: left; }
@media (max-width: 960px) { .cs-grille.svA { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* --- S2 : le visa en tête (avec les permis), puis 8 cartes horizontales sur deux colonnes --- */
.cs-grille.svB { grid-template-columns: 1fr 1fr; gap: 12px 14px; perspective: none; }
.cs-tete { grid-column: 1 / -1; }
.cs-tete .cs-media { display: block; width: 180px; aspect-ratio: 16 / 10; }
.cs-tete .cs-corps { margin-left: -24px; padding: 16px 18px 16px 34px; }
.cs-tete .cs-ic { width: 46px; height: 46px; margin-top: -23px; left: -22px; }
.cs-tete h3 { font-size: 18px; }
.cs-tete h3 a { color: inherit; text-decoration: none; }
.cs-tete .cs-puces { gap: 6px; margin-top: 10px; }
.cs-puces a { padding: 4px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 600; color: var(--b1); text-decoration: none; background: var(--lb); transition: background .3s, color .3s, transform .3s var(--rebond); }
.cs-puces a:hover { color: #fff; background: var(--b1); transform: translateY(-2px); }
.cs-l2 .cs-media { width: 72px; aspect-ratio: 1; border-radius: 14px; }
.cs-l2 .cs-corps { flex-direction: row; align-items: center; justify-content: space-between; gap: 8px; min-height: 58px; margin-left: -18px; padding: 10px 12px 10px 30px; }
.cs-l2 .cs-ic { width: 36px; height: 36px; margin-top: -18px; left: -18px; padding: 9px; }
.cs-l2 h3 { font-size: 14.5px; }
.cs-l2 .cs-pied { margin: 0; padding: 0; }
.cs-l2 .cs-lien { display: none; }
.cs-l2 .cs-go { width: 28px; height: 28px; padding: 7px; }
@media (max-width: 600px) {
.cs-grille.svB { grid-template-columns: 1fr; }
.cs-tete { flex-direction: column; } .cs-tete .cs-media { width: 100%; } .cs-tete .cs-corps { margin: -30px 12px 0; padding: 30px 16px 16px; }
.cs-tete .cs-ic { top: -22px; left: 16px; margin-top: 0; }
}
/* --- S3 : mosaïque, le titre sur la photo --- */
/* 7 services : « Visa et permis » sur deux colonnes avec ses permis, 2 tuiles à côté, 4 en dessous : grille pleine de 4 × 2 */
.cs-grille.svC { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 198px; gap: 12px; }
.cs-tuile { overflow: hidden; color: #fff; box-shadow: 0 14px 30px -18px rgb(15 42 61 / .7); }
.cs-tuile:hover { color: #fff; }
.cs-tuile .cs-media { position: absolute; inset: 0; border-radius: inherit; }
.cs-tuile .cs-media::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgb(15 42 61 / 0) 30%, rgb(15 42 61 / .82)); transition: opacity .5s; }
.cs-tuile:hover .cs-media::after { opacity: .75; }
.cs-tuile .cs-corps { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px; }
.cs-tuile .cs-ic { width: 34px; height: 34px; padding: 8px; border-radius: 50%; color: #fff; background: linear-gradient(135deg, var(--b2), var(--b1)); box-shadow: 0 0 0 3px rgb(255 255 255 / .5); }
.cs-tuile:hover .cs-ic { background: linear-gradient(135deg, var(--g), var(--b2)); }
.cs-tuile h3 { flex: 1; min-width: 0; font-size: 14px; line-height: 1.25; color: #fff; text-shadow: 0 1px 8px rgb(0 0 0 / .35); }
.cs-tuile .cs-go { display: none; }
.cs-tuile.grand .cs-go { display: grid; width: 32px; height: 32px; padding: 8px; }
.cs-tuile.grand { grid-column: span 2; }
.cs-tuile.grand .cs-corps { padding: 14px 16px; gap: 8px 10px; }
.cs-tuile.grand .cs-ic { width: 40px; height: 40px; padding: 10px; }
.cs-tuile.grand h3 { font-size: 19px; }
.cs-tuile.grand .cs-tag { left: auto; right: 12px; }
.cs-tuile .cs-puces { order: 5; flex-basis: 100%; gap: 6px; margin-top: 2px; }
.cs-tuile .cs-puces { gap: 5px; }
.cs-tuile .cs-puces span { padding: 2px 9px; font-size: 11.5px; color: #fff; background: rgb(255 255 255 / .16); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .3); }
@media (max-width: 960px) { .cs-grille.svC { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) {
/* mobile : les services à la file, en une colonne ; « Visa et permis » garde deux hauteurs pour ses 7 permis */
.cs-grille.svC { grid-template-columns: 1fr; grid-auto-rows: 150px; gap: 12px; }
.cs-tuile.grand { grid-column: auto; grid-row: span 2; }
.cs-tuile.grand h3 { font-size: 20px; }
.cs-tuile h3 { font-size: 16px; }
.cs-tuile .cs-go { display: grid; width: 30px; height: 30px; padding: 8px; }
}
/* ================= TEST : la question dans une bande de couleur ================= */
.tq { overflow: hidden; isolation: isolate; padding: 50px 0; color: #fff; }
.qzA.qzB { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 44px; padding: 0; overflow: visible; border-radius: 0; background: none; box-shadow: none; }
.qzB::before { display: none; }
.qzB .tt h2 { font-size: clamp(26px, 2.8vw, 36px); }
.qzB .bouton { margin-top: 22px; }
.qzB .qzA-q { padding: 18px 20px; background: #fff; box-shadow: 0 2px 4px rgb(8 30 48 / .1), 0 30px 60px -28px rgb(8 30 48 / .7); }
.qzB .qzA-q h3 { margin: 8px 0 12px; font-size: 18px; }
.qzB .qzA-opt { padding: 10px 40px 10px 10px; font-size: 14.5px; background: #f4f9fd; box-shadow: inset 0 0 0 1px var(--line); }
.qzB .qzA-opt:hover { background: #fff; }
.qzB .qzA-opt i { width: 36px; height: 36px; padding: 9px; }
.qzB .qzA-main { bottom: 18px; }
/* T1 : la bande d'origine (bleu du site + plage à 18 %) */
.tqA { background: var(--b1); }
.tqA::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .18; background: url(../img/wp/plage-ile-maurice-hotel.webp) center / cover; }
/* T2 : le lagon qui coule, ses halos et l'avion */
.tqB { background: linear-gradient(110deg, #1c7db3, #28a3e6, #18a88a, #28a3e6, #1c7db3) 0 0 / 300% 100%; animation: ap-flux 18s linear infinite; }
.tqB::before, .tqB::after { content: ""; position: absolute; z-index: -1; border-radius: 50%; filter: blur(60px); pointer-events: none; }
.tqB::before { width: 380px; height: 380px; left: -120px; top: -200px; background: rgb(253 230 138 / .45); animation: pqDrift 14s ease-in-out infinite alternate; }
.tqB::after { width: 340px; height: 340px; right: 10%; bottom: -220px; background: rgb(21 151 83 / .55); animation: pqDrift 17s ease-in-out -6s infinite alternate-reverse; }
.tq-vol { position: absolute; z-index: -1; inset: 0; pointer-events: none; }
.tq-vol img { position: absolute; left: 0; top: 14%; width: 200px; opacity: .85; animation: apA-vol 13s linear 1s infinite; }
/* T3 : la plage en pleine couleur, voile bleu nuit côté texte */
.tqC { background: url(../img/wp/plage-ile-maurice-hotel.webp) 60% 55% / cover; }
.tqC::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgb(15 42 61 / .88) 0%, rgb(15 42 61 / .65) 38%, rgb(15 42 61 / .1) 70%); }
@media (max-width: 900px) {
.qzA.qzB { grid-template-columns: 1fr; gap: 22px; }
.tqC::before { background: linear-gradient(180deg, rgb(15 42 61 / .85), rgb(15 42 61 / .4)); }
}
@media (prefers-reduced-motion: reduce) { .tqB, .tqB::before, .tqB::after, .tq-vol img { animation: none; } }
/* ================= POURQUOI MAURICE ================= */
.pqx-intro { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 40px; align-items: center; margin-bottom: 34px; }
.pqx-intro p, .pqA-texte p { font-size: 15.5px; line-height: 1.7; color: var(--txt); }
.pqx-intro p + p, .pqA-texte p + p { margin-top: 10px; }
.pqx-intro b, .pqA-texte b { color: var(--b1); font-weight: 600; }
.pqx-intro .pq-video-wrap { max-width: none; }
/* --- P1 : photos qui se chevauchent + 7 fiches --- */
.pqA { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 50px; align-items: start; }
.pqA-gauche { position: sticky; top: 20px; display: grid; gap: 18px; }
/* photos : visuel .vp (base.css), la 2e photo à la place de la carte de visa, avec le même bord blanc, le halo et le reflet */
.vp-duo .vp-carte { aspect-ratio: 1.3; background: #fff; }
.vp-duo::after { aspect-ratio: 1.3; }
.vp-duo .vp-carte img { width: 100%; height: 100%; max-width: none; object-fit: cover; }
.pqA-texte p { font-size: 14.5px; }
.pqA-fiches { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 34px; padding-left: 26px; }
.pqA-fiche { padding: 16px 18px 16px 40px; }
.pqA-fiche:last-child { grid-column: 1 / -1; }
.pqA-fiche .cpA-chiffre { font-size: 24px; }
.pqA-fiche h3 { margin-top: 4px; font-size: 16px; color: var(--ink); }
.pqA-fiche p { margin-top: 4px; font-size: 13.5px; line-height: 1.55; }
.pqA-fiche p b { color: var(--b1); font-weight: 600; }
.pqA-n { position: absolute; top: 10px; right: 14px; font-size: 34px; font-weight: 800; line-height: 1; color: rgb(28 125 179 / .08); }
.js .pqA-fiches:not(.vu) .pqA-fiche { opacity: 0; transform: translateX(-20px); }
.pqA-fiches.vu .pqA-fiche { animation: pqA-entre .7s var(--rebond) backwards; animation-delay: calc(var(--i) * 110ms); }
@keyframes pqA-entre { from { opacity: 0; transform: translateX(-20px); } }
/* une couleur par raison (palette du site + bleu du drapeau) : bulle, repère et numéro */
.ton-orange { --c1: #fbbf24; --c2: #ea580c; --ct: #c2410c; }
.ton-ciel { --c1: #7fd0f7; --c2: #28a3e6; --ct: #1c7db3; }
.ton-fonce { --c1: #1c7db3; --c2: #0d4a72; --ct: #1c7db3; }
.ton-vert { --c1: #2bbf74; --c2: #159753; --ct: #13804a; }
.ton-lagon { --c1: #2dd4bf; --c2: #0f9488; --ct: #0f766e; }
.ton-marine { --c1: #4f63d8; --c2: #1a206d; --ct: #2b3aa8; }
.ton-rouge { --c1: #f0505f; --c2: #b11c1d; --ct: #b11c1d; }
.cpA-fiche[class*="ton-"] .cpA-ic { background: linear-gradient(135deg, var(--c1), var(--c2)); box-shadow: 0 0 0 5px #fff, 0 12px 22px -8px color-mix(in srgb, var(--c2) 75%, transparent); }
.cpA-fiche[class*="ton-"] .cpA-chiffre { color: var(--ct); }
.cpA-fiche[class*="ton-"] .cpA-chiffre small { color: var(--c2); }
.cpA-fiche[class*="ton-"] .pqA-n { color: color-mix(in srgb, var(--c2) 12%, transparent); }
.cpA-fiche[class*="ton-"]:hover { box-shadow: 0 2px 4px rgb(15 42 61 / .05), 0 26px 44px -22px color-mix(in srgb, var(--c2) 60%, transparent); }
.pqB-ic[class*="ton-"] { color: var(--c2); background: color-mix(in srgb, var(--c1) 18%, #fff); }
.pqB-liste .on .pqB-ic[class*="ton-"] { color: #fff; background: linear-gradient(135deg, var(--c1), var(--c2)); }
/* --- P2 : 7 onglets, une photo par raison --- */
.pqB { display: grid; grid-template-columns: 330px minmax(0, 1fr); gap: 30px; align-items: stretch; }
.pqB-liste { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.pqB-liste button { all: unset; box-sizing: border-box; position: relative; overflow: hidden; display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 12px; border-radius: 14px; cursor: pointer;
font-size: 15px; font-weight: 700; color: var(--ink); transition: background .3s, box-shadow .3s, transform .35s var(--rebond); }
.pqB-liste button:hover { background: #f4f9fd; transform: translateX(4px); }
.pqB-ic { flex: none; display: grid; place-items: center; width: 38px; height: 38px; padding: 9px; border-radius: 50%; color: var(--b1); background: var(--lb); transition: background .3s, color .3s, transform .45s var(--rebond); }
.pqB-t small { display: block; font-size: 11px; font-weight: 800; letter-spacing: .1em; color: var(--mute); }
.pqB-liste i { position: absolute; left: 12px; right: 12px; bottom: 4px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--b2), var(--g)); transform: scaleX(0); transform-origin: left; }
.pqB-liste .on button { background: #fff; box-shadow: 0 2px 4px rgb(15 42 61 / .05), 0 16px 30px -18px rgb(28 125 179 / .6); }
.pqB-liste .on .pqB-ic { color: #fff; background: linear-gradient(135deg, var(--b2), var(--b1)); transform: rotate(-8deg); }
.pqB-liste .on i { animation: pqB-barre 6s linear forwards; }
.pqB:hover .pqB-liste .on i { animation-play-state: paused; }
@keyframes pqB-barre { to { transform: scaleX(1); } }
.pqB-scene { position: relative; min-height: 470px; border-radius: 24px; overflow: hidden; box-shadow: 0 24px 50px -28px rgb(15 42 61 / .7); }
.pqB-pan { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .7s, visibility .7s; }
.pqB-pan.on { opacity: 1; visibility: visible; }
.pqB-pan img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); transition: transform 7s linear; }
.pqB-pan.on img { transform: scale(1); }
.pqB-pan::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgb(15 42 61 / .45), transparent 55%); }
.pqB-fiche { position: absolute; z-index: 2; left: 46px; right: 24px; bottom: 22px; max-width: 520px; padding: 16px 20px 16px 42px; transform: translateY(14px); opacity: 0; transition: transform .7s var(--courbe) .2s, opacity .6s .2s; }
.pqB-pan.on .pqB-fiche { transform: none; opacity: 1; }
.pqB-fiche .cpA-chiffre { font-size: 26px; }
.pqB-fiche h3 { margin-top: 4px; font-size: 17px; color: var(--ink); }
.pqB-fiche p { margin-top: 4px; font-size: 14px; line-height: 1.55; }
.pqB-fiche p b { color: var(--b1); font-weight: 600; }
@media (max-width: 900px) {
.pqx-intro, .pqA, .pqB { grid-template-columns: 1fr; }
.pqA-gauche { position: static; } .pqA-fiches { grid-template-columns: 1fr; padding-left: 26px; }
.pqB-liste { order: 2; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 6px; }
.pqB-liste li { flex: none; } .pqB-liste button { width: auto; padding: 8px 14px 8px 8px; font-size: 13.5px; } .pqB-t small { display: none; }
.pqB-scene { min-height: 460px; } .pqB-fiche { left: 34px; right: 12px; bottom: 12px; }
}
/* encart d'appel C en une ligne */
.sx-appel { margin-top: 40px; }
.apC.apC-ligne { grid-template-columns: 200px minmax(0, 1fr); }
.apC-ligne .apC-photo { min-height: 0; background-image: url(../img/wp/bureau-grand-baie.webp); background-position: 30% 50%; }
.apC-ligne .apC-photo::after { background: linear-gradient(90deg, transparent 40%, #fff); }
.apC-ligne .apC-corps { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 24px; align-items: center; padding: 24px 28px 24px 10px; }
.apC-ligne .tt h2, .apC-ligne .tt .tt-h { font-size: 24px; white-space: nowrap; }
@media (max-width: 600px) { .apC-ligne .tt h2, .apC-ligne .tt .tt-h { white-space: normal; } }
.apC-ligne .ap-checks { margin-top: 10px; font-size: 13px; gap: 6px 14px; }
.apC-ligne .apC-tels { grid-template-columns: 1fr; gap: 8px; margin: 0; }
.apC-ligne .apC-tel { padding: 8px 12px; }
.apC-ligne .bouton { margin: 0; }
@media (max-width: 1080px) { .apC-ligne .apC-corps { grid-template-columns: 1fr 1fr; } .apC-ligne .apC-corps > div:first-child { grid-column: 1 / -1; } }
@media (max-width: 860px) { .apC.apC-ligne { grid-template-columns: 1fr; } .apC-ligne .apC-photo { min-height: 140px; } .apC-ligne .apC-corps { grid-template-columns: 1fr; padding: 4px 20px 24px; } }
/* ================= LE GUIDE : 6 fiches mini sur une rangée ================= */
.cs-grille.c6 { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.c6 .cs-mini h3 { font-size: 14.5px; }
.c6 .cs-mini .cs-corps { margin: -34px 8px 0; padding: 30px 10px 14px; }
@media (max-width: 960px) { .cs-grille.c6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 600px) { .cs-grille.c6.glisse-mob { grid-auto-columns: 58%; } }
/* ================= LE GUIDE (choisi) : cartes qui défilent vers la droite, comme le carrousel d'origine =================
Script : accueil.js ([data-glisse], une carte toutes les 5 s, en boucle) + glisser au doigt (sections.js).
Pas d'icône ni de rond : la photo et le titre (jusqu'à 3 lignes) prennent la place. Effets de la famille .cs gardés. */
.gdx { position: relative; margin: -14px -14px 0; padding: 14px 14px 0; overflow: hidden; }
.gdx .glisse-piste { display: flex; gap: 22px; transition: transform .7s var(--courbe); }
.cs-guide { flex: none; width: calc((100% - 66px) / 4); margin-bottom: 26px; overflow: hidden; background: #fff;
box-shadow: 0 2px 4px rgb(15 42 61 / .05), 0 18px 34px -22px rgb(15 42 61 / .5); }
.cs-guide:hover { box-shadow: 0 2px 4px rgb(15 42 61 / .05), 0 28px 44px -22px rgb(28 125 179 / .5); }
.cs-guide .cs-media { aspect-ratio: 16 / 10; border-radius: 18px 18px 0 0; }
.cs-guide .cs-media::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, transparent 60%, rgb(15 42 61 / .25)); }
.cs-guide .cs-tag { padding: 3px 10px; font-size: 11.5px; }
.cs-guide .cs-corps { flex: 1; padding: 16px 18px 18px; }
.cs-guide .cs-corps::after { content: ""; position: absolute; left: 18px; right: 18px; bottom: 0; height: 3px; border-radius: 3px 3px 0 0;
background: linear-gradient(90deg, var(--b1), var(--b2), var(--g)); transform: scaleX(.15); transform-origin: left; transition: transform .6s var(--courbe); }
.cs-guide:hover .cs-corps::after { transform: scaleX(1); }
.cs-guide h3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; min-height: 3.75em; font-size: 16px; line-height: 1.25; }
.cs-guide:hover h3 { color: var(--b1); }
.cs-guide .cs-lien { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; margin-top: 12px; font-size: 14px; }
.cs-guide .cs-lien svg { width: 15px; height: 15px; stroke-width: 2.6; transition: transform .4s var(--courbe); }
.cs-guide:hover .cs-lien svg { transform: translateX(4px); }
/* flèches rondes sur le bord des photos, points en dessous */
.gdx-fl { all: unset; box-sizing: border-box; position: absolute; z-index: 3; top: 100px; margin-top: -21px; display: grid; place-items: center; width: 42px; height: 42px; padding: 11px;
border-radius: 50%; cursor: pointer; color: var(--b1); background: #fff; box-shadow: 0 10px 22px -10px rgb(15 42 61 / .6); transition: transform .35s var(--rebond), color .3s, background .3s; }
.gdx-fl:hover { color: #fff; background: linear-gradient(135deg, var(--b2), var(--b1)); transform: scale(1.08); }
.gdx-fl svg { stroke-width: 2.6; }
.gdx .glisse-prec { left: 4px; } .gdx .glisse-fl svg, .gdx .gdx-fl svg { rotate: none; } .gdx .glisse-prec svg { transform: rotate(180deg); }
.gdx .glisse-suiv { right: 4px; }
.gdx .glisse-points { position: static; display: flex; justify-content: center; gap: 6px; height: auto; margin-top: 4px; }
.gdx .glisse-points button { width: 7px; height: 7px; margin: 0; border-radius: 99px; background: #c9dceb; opacity: 1; transition: width .3s, background .3s; }
.gdx .glisse-points button.on { width: 22px; background: linear-gradient(90deg, var(--b2), var(--b1)); }
@media (max-width: 960px) { .cs-guide { width: calc((100% - 22px) / 2); } .gdx-fl { top: 130px; } }
/* mobile : défilement natif au doigt (la carte suit le doigt), calé carte par carte ; l'avance automatique est dans sections.js */
@media (max-width: 600px) {
.gdx { margin: -14px -15px 0; padding: 14px 0 0; }
.gdx .glisse-piste { overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding: 0 15px; padding: 0 15px; gap: 14px; scrollbar-width: none; transform: none !important; }
.gdx .glisse-piste::-webkit-scrollbar { display: none; }
.cs-guide { width: 80%; scroll-snap-align: start; }
.gdx-fl { display: none; }
}
/* ================= MOBILE : rangées qu'on fait glisser, et questions du test en 2 × 2 ================= */
@media (max-width: 600px) {
.cs-grille.svA.glisse-mob, .cs-grille.c6.glisse-mob { grid-template-columns: none; }
.cs-grille.svA.glisse-mob { grid-auto-columns: 62%; }
.qzB .qzA-opts { grid-template-columns: 1fr 1fr; gap: 8px; }
.qzB .qzA-opt { flex-direction: column; align-items: flex-start; gap: 6px; padding: 10px; font-size: 13.5px; }
.qzB .qzA-opt::after { top: 18px; right: 10px; }
.tq { padding: 36px 0; }
}
/* ================= BANDEAU « VOUS ACCOMPAGNE » (accueil, pages permis) : bleu du site et photo de l'équipe à 18 % ================= */
.an-accomp { position: relative; isolation: isolate; padding: 64px 0 56px; background: linear-gradient(120deg, var(--b1), var(--b2)); }
.an-accomp::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .18; background: url(../img/wp/selfmanagingteams-1920x1080.webp) center / cover; }
.an-accomp .tt { max-width: 860px; margin-bottom: 0; }
@media (max-width: 760px) { .an-accomp { padding: 48px 0 40px; } }
/* appel flottant (pied de page commun) : bouton rond validé, à la place de l'ancien */
.appel-rond { position: fixed; left: 16px; bottom: 18px; z-index: 90; }
/* fond lagon animé pour une section (même eau que le bloc lagon des services : shader d'accueil.js, [data-lagon] + canvas) */
.fond-lagon { position: relative; isolation: isolate; overflow: hidden; background: linear-gradient(180deg, #fff, #f7efdf); }
.fond-lagon > .lagoon-bg { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; display: block; pointer-events: none; }
/* ================= FONDS DE SECTION (planche /charte/, section 15) =================
Six fonds réutilisables, aux couleurs du site : on alterne clair et foncé, jamais deux foncés à la suite.
Clairs : .fs-ciel, .fs-motif, .fs-lagon ; foncés : .fs-ocean, .fs-nuit (titres en .tt.clair).
Balisage : ; le lagon ajoute data-lagon="site" et