/* ==========================================================================
   Bluzelle Consulting — feuille de style
   Un site d'entreprise moderne et sobre sur ordinateur, qui se comporte comme
   une application sur téléphone (en-tête compact, onglets en bas, menus qui
   montent du bas, défilement au doigt).
   Deux langues : français (gauche à droite) et arabe (droite à gauche, dossier ar/).
   Les marges et positions utilisent les propriétés « logiques » (inline-start /
   inline-end) pour s'inverser toutes seules en arabe.
   Couleurs reprises du logo Bluzelle Center (bleu marine + anthracite).
   ========================================================================== */

:root {
  --marine: #13254a;
  --marine-2: #0c1a36;
  --bleu: #2459d3;
  --bleu-fonce: #1c49b3;
  --bleu-clair: #eaf0fd;
  --ciel: #9dbcff;
  --vert: #15a35a;
  --vert-clair: #e6f6ed;
  --whatsapp: #25d366;
  --whatsapp-fonce: #128c4a;
  --or: #b7791f;
  --or-clair: #fdf4e3;

  --blanc: #ffffff;
  --fond-doux: #f5f7fb;
  --trait: #e5e9f1;
  --texte: #0f1a2e;
  --texte-doux: #56607a;
  --texte-pale: #8b93a7;

  --rayon: 22px;
  --rayon-m: 16px;
  --ombre: 0 1px 2px rgba(15, 26, 46, .05), 0 4px 16px -6px rgba(15, 26, 46, .08);
  --ombre-haute: 0 24px 48px -20px rgba(19, 37, 74, .28);

  --conteneur: 1200px;
  --entete: 72px;
  --onglets: 66px;

  --police: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --interlettre-titre: -.025em;
}

/* Arabe : police lisible en arabe, pas d'espacement négatif entre les lettres. */
[dir="rtl"] {
  --police: "IBM Plex Sans Arabic", "Plus Jakarta Sans", system-ui, sans-serif;
  --interlettre-titre: 0;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

@view-transition { navigation: auto; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--entete) + 16px); }

body {
  margin: 0;
  font-family: var(--police);
  font-size: 16px;
  line-height: 1.6;
  color: var(--texte);
  background: var(--blanc);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
}
[dir="rtl"] body { line-height: 1.75; }

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; line-height: 1.15; letter-spacing: var(--interlettre-titre); font-weight: 800; }
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3 { line-height: 1.35; font-weight: 700; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
svg {
  width: 20px; height: 20px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
}
/* Flèches et chevrons : retournés en arabe. */
[dir="rtl"] svg.sens { transform: scaleX(-1); }
:focus-visible { outline: 3px solid rgba(36, 89, 211, .4); outline-offset: 3px; border-radius: 8px; }
.ltr { direction: ltr; unicode-bidi: isolate; display: inline-block; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.conteneur { width: 100%; max-width: var(--conteneur); margin: 0 auto; padding: 0 20px; }

/* ==========================================================================
   Barre tout en haut : langue, téléphone, adresse
   ========================================================================== */
.barre-haut { background: var(--marine-2); color: #b9c6e0; font-size: 13px; }
.barre-haut__ligne { min-height: 38px; display: flex; align-items: center; gap: 18px; }
.barre-haut a { display: inline-flex; align-items: center; gap: 6px; }
.barre-haut a:hover { color: #fff; }
.barre-haut svg { width: 15px; height: 15px; color: var(--ciel); }
.barre-haut a.barre-haut__info { display: none; }
.barre-haut__tel { font-weight: 700; color: #fff; }
.langues { margin-inline-start: auto; display: flex; gap: 4px; padding: 3px; border-radius: 99px; background: rgba(255, 255, 255, .08); }
.langues a {
  padding: 3px 12px; border-radius: 99px; font-weight: 700; font-size: 13px; color: #c9d4ea;
}
.langues a[aria-current="true"] { background: #fff; color: var(--marine); }
.langues a[lang="ar"] { font-family: "IBM Plex Sans Arabic", sans-serif; font-size: 14px; }

/* ==========================================================================
   En-tête
   ========================================================================== */
.entete {
  position: sticky; top: 0; z-index: 30;
  background: rgba(255, 255, 255, .9);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s, box-shadow .2s;
}
.entete.est-defile { border-bottom-color: var(--trait); box-shadow: 0 6px 20px -16px rgba(15, 26, 46, .4); }
.entete__barre { height: 64px; display: flex; align-items: center; gap: 16px; }

.logo { display: flex; align-items: center; gap: 10px; flex: none; }
.logo img { width: 38px; height: 38px; border-radius: 10px; }
.logo__nom { display: block; font-weight: 800; font-size: 16.5px; letter-spacing: -.02em; line-height: 1.15; color: var(--marine); font-family: "Plus Jakarta Sans", sans-serif; }
.logo__metier { display: block; font-size: 11.5px; color: var(--texte-doux); line-height: 1.3; }

.menu { display: none; }
.entete__actions { margin-inline-start: auto; display: flex; align-items: center; gap: 8px; }
.entete__actions .bouton--principal { display: none; }

/* Lien vers l'autre langue, discret, dans l'en-tête */
.langue-lien {
  display: inline-flex; align-items: center; height: 38px; padding: 0 12px; border-radius: 10px;
  font-size: 14px; font-weight: 700; color: var(--marine); border: 1.5px solid var(--trait);
  white-space: nowrap; transition: border-color .15s, background .15s;
}
.langue-lien:hover { border-color: var(--marine); }
@media (max-width: 1023px) {
  .entete__barre { gap: 10px; }
  .langue-lien { padding: 0 10px; }
}
@media (max-width: 370px) {
  .entete .logo > span { display: none; } /* écran étroit : l'icône du logo suffit, place au lien de langue */
}
.langue-lien[lang="ar"] { font-family: "IBM Plex Sans Arabic", sans-serif; font-size: 15px; }
.langue-lien[lang="fr"] { font-family: "Plus Jakarta Sans", sans-serif; }

.rond-bouton {
  width: 42px; height: 42px; border-radius: 12px; border: 0; cursor: pointer;
  display: grid; place-items: center; background: var(--fond-doux); color: var(--marine);
}
.rond-bouton--whatsapp { background: var(--whatsapp); color: #fff; }

/* ==========================================================================
   Boutons, petits éléments
   ========================================================================== */
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 50px; padding: 0 22px; border-radius: 14px; border: 0; cursor: pointer;
  font-weight: 700; font-size: 15px; white-space: nowrap;
  transition: transform .12s, background .15s, box-shadow .15s, color .15s, opacity .15s;
}
.bouton:active { transform: scale(.98); }
.bouton svg { width: 18px; height: 18px; }
[dir="rtl"] .bouton svg.sens { transform: scaleX(-1); }
.bouton--principal { background: var(--bleu); color: #fff; box-shadow: 0 10px 22px -10px rgba(36, 89, 211, .8); }
.bouton--principal:hover { background: var(--bleu-fonce); }
.bouton--contour { background: #fff; color: var(--marine); box-shadow: inset 0 0 0 1.5px var(--trait); }
.bouton--contour:hover { box-shadow: inset 0 0 0 1.5px var(--marine); }
.bouton--blanc { background: #fff; color: var(--marine); }
.bouton--verre { background: rgba(255, 255, 255, .1); color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .25); }
.bouton--verre:hover { background: rgba(255, 255, 255, .18); }
.bouton--whatsapp { background: var(--whatsapp); color: #fff; box-shadow: 0 10px 22px -12px rgba(18, 140, 74, .9); }
.bouton--whatsapp:hover { background: #1fbf5b; }
.bouton--doux { background: var(--bleu-clair); color: var(--bleu); }
.bouton--grand { min-height: 58px; font-size: 16.5px; padding: 0 28px; border-radius: 16px; }
.bouton--plein { width: 100%; }
.bouton[disabled] { opacity: .5; cursor: not-allowed; }
.boutons { display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 639px) {
  /* Sur téléphone, les boutons d'action occupent toute la largeur, comme dans une application. */
  .boutons > .bouton { flex: 1 1 100%; }
}

.surtitre {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--bleu);
  margin-bottom: 14px;
}
[dir="rtl"] .surtitre { letter-spacing: 0; font-size: 14px; }
.badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px 7px 8px; border-radius: 99px; background: var(--bleu-clair); color: var(--bleu-fonce);
  font-size: 13.5px; font-weight: 700; margin-bottom: 22px;
}
[dir="rtl"] .badge { padding: 7px 8px 7px 14px; }
.badge__point { width: 22px; height: 22px; border-radius: 50%; background: var(--bleu); color: #fff; display: grid; place-items: center; }
.badge__point svg { width: 13px; height: 13px; stroke-width: 2.6; }
.etiquette-bientot {
  display: inline-block; padding: 4px 10px; border-radius: 99px; background: var(--or-clair); color: var(--or);
  font-size: 12px; font-weight: 800;
}

.coches { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.coches li { display: flex; gap: 12px; align-items: flex-start; }
.coches li > svg {
  width: 22px; height: 22px; padding: 4px; border-radius: 50%; margin-top: 1px;
  background: var(--vert-clair); color: var(--vert); stroke-width: 2.8;
}
.coches strong { font-weight: 700; }

.icone {
  width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; flex: none;
  background: var(--bleu-clair); color: var(--bleu);
}
.icone svg { width: 24px; height: 24px; }
.icone--vert { background: var(--vert-clair); color: var(--vert); }
.icone--or { background: var(--or-clair); color: var(--or); }
.icone--violet { background: #f0ebff; color: #6d4ad8; }
.icone--marine { background: #e6eaf2; color: var(--marine); }
.icone--whatsapp { background: #e3f8eb; color: var(--whatsapp-fonce); }

.lien-fleche { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--bleu); }
.lien-fleche svg { width: 18px; height: 18px; transition: transform .15s; }
.lien-fleche:hover svg, a:hover > .lien-fleche svg { transform: translateX(3px); }
[dir="rtl"] .lien-fleche svg { transform: scaleX(-1); }
[dir="rtl"] .lien-fleche:hover svg, [dir="rtl"] a:hover > .lien-fleche svg { transform: scaleX(-1) translateX(3px); }

/* ==========================================================================
   Sections
   ========================================================================== */
.section { padding: 64px 0; }
.section--doux { background: var(--fond-doux); }
.section--marine { background: var(--marine); color: #fff; }
.en-tete-section { max-width: 720px; margin-bottom: 36px; }
.en-tete-section.centre { margin-left: auto; margin-right: auto; text-align: center; }
.en-tete-section h2 { font-size: clamp(28px, 4.2vw, 44px); margin-bottom: 14px; }
.chapeau { font-size: 17px; color: var(--texte-doux); }
.section--marine .chapeau { color: #b9c6e0; }
.section--marine .surtitre { color: var(--ciel); }
.centre { text-align: center; }

/* ---------- Bannière d'accueil ---------- */
.heros {
  position: relative; overflow: hidden; padding: 36px 0 56px;
  background:
    radial-gradient(700px 420px at 92% 8%, rgba(36, 89, 211, .12), transparent 70%),
    radial-gradient(500px 300px at 0% 100%, rgba(36, 89, 211, .06), transparent 70%);
}
.heros__grille { display: grid; gap: 40px; align-items: center; }
.heros h1 { font-size: clamp(36px, 6.2vw, 64px); letter-spacing: calc(var(--interlettre-titre) * 1.6); line-height: 1.04; margin-bottom: 20px; color: var(--marine); }
[dir="rtl"] .heros h1 { line-height: 1.3; }
.heros h1 em { font-style: normal; color: var(--bleu); }
.heros .chapeau { font-size: 18px; max-width: 540px; margin-bottom: 28px; }
.heros__garanties { display: flex; flex-wrap: wrap; gap: 10px 22px; list-style: none; padding: 0; margin: 28px 0 0; font-size: 14.5px; font-weight: 600; color: var(--texte-doux); }
.heros__garanties li { display: flex; align-items: center; gap: 8px; }
.heros__garanties svg { width: 18px; height: 18px; color: var(--vert); stroke-width: 2.6; }

.heros__visuel { position: relative; }
.heros__photo { border-radius: 28px; overflow: hidden; aspect-ratio: 4 / 3; box-shadow: var(--ombre-haute); background: #dfe5ef; }
.heros__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.flottant {
  position: absolute; display: flex; align-items: center; gap: 12px;
  padding: 12px 16px 12px 12px; border-radius: 16px; background: #fff; box-shadow: var(--ombre-haute);
  font-size: 13px; line-height: 1.3; color: var(--texte-doux);
}
.flottant strong { display: block; font-size: 15px; color: var(--texte); }
.flottant .icone { width: 40px; height: 40px; border-radius: 12px; }
.flottant .icone svg { width: 20px; height: 20px; }
.flottant--bas { inset-inline-start: 12px; bottom: -22px; }
.flottant--haut { inset-inline-end: 12px; top: -18px; display: none; }

/* ---------- Bande de confiance ---------- */
.confiance { border-top: 1px solid var(--trait); border-bottom: 1px solid var(--trait); background: #fff; }
.confiance__liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.confiance__item { display: flex; align-items: center; gap: 12px; padding: 20px 12px; }
.confiance__item .icone { width: 40px; height: 40px; border-radius: 12px; }
.confiance__item .icone svg { width: 20px; height: 20px; }
.confiance__item strong { display: block; font-size: 15px; line-height: 1.25; }
.confiance__item span { display: block; font-size: 13px; color: var(--texte-doux); line-height: 1.35; }

/* ---------- Types de sociétés ---------- */
.types { display: grid; gap: 16px; }
.type {
  position: relative; display: flex; flex-direction: column; gap: 14px;
  padding: 24px; border-radius: var(--rayon); background: #fff; border: 1px solid var(--trait);
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.type:hover { transform: translateY(-4px); box-shadow: var(--ombre-haute); border-color: transparent; }
.type__tete { display: flex; align-items: center; gap: 14px; }
.type__tete h3 { font-size: 20px; }
.type__tete small { display: block; font-size: 13.5px; color: var(--texte-doux); font-weight: 600; }
.type__ideal { font-size: 14.5px; color: var(--texte-doux); margin: 0; }
.type dl { margin: 0; display: grid; gap: 8px; }
.type dl div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: 12px; background: var(--fond-doux); font-size: 14px; }
.type dt { color: var(--texte-doux); }
.type dd { margin: 0; font-weight: 700; text-align: end; }
.type .coches { font-size: 14.5px; gap: 8px; }
.type .bouton { margin-top: auto; }
.type--populaire { border: 2px solid var(--bleu); }
.type__ruban {
  position: absolute; top: -12px; inset-inline-end: 20px; padding: 4px 12px; border-radius: 99px;
  background: var(--bleu); color: #fff; font-size: 12px; font-weight: 800;
}

/* ---------- Services ---------- */
.services { display: grid; gap: 20px; }
.service {
  display: flex; flex-direction: column; background: #fff; border-radius: var(--rayon); overflow: hidden;
  border: 1px solid var(--trait); transition: transform .2s, box-shadow .2s;
}
.service:hover { transform: translateY(-4px); box-shadow: var(--ombre-haute); }
.service__photo { aspect-ratio: 16 / 10; overflow: hidden; background: #dfe5ef; }
.service__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.service:hover .service__photo img { transform: scale(1.04); }
.service__corps { padding: 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.service__corps h3 { font-size: 21px; }
.service__corps p { color: var(--texte-doux); margin: 0; }
.service__corps .lien-fleche { margin-top: auto; padding-top: 8px; }
.service__prix { font-size: 13.5px; font-weight: 700; color: var(--marine); background: var(--fond-doux); padding: 5px 10px; border-radius: 8px; align-self: flex-start; }

.mini-services { display: grid; gap: 16px; margin-top: 20px; }
.mini-service {
  display: flex; gap: 16px; align-items: flex-start; padding: 22px; border-radius: var(--rayon-m);
  background: #fff; border: 1px solid var(--trait); transition: border-color .15s;
}
a.mini-service:hover { border-color: var(--bleu); }
.mini-service h3 { font-size: 17px; margin-bottom: 4px; }
.mini-service p { color: var(--texte-doux); font-size: 14.5px; margin: 0; }

/* ---------- Étapes ---------- */
.etapes { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; counter-reset: etape; }
.etape { position: relative; padding: 22px; border-radius: var(--rayon-m); background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); }
.etape::before {
  counter-increment: etape; content: "0" counter(etape);
  display: block; font-size: 15px; font-weight: 800; color: var(--ciel); margin-bottom: 12px;
}
.etape h3 { font-size: 19px; margin-bottom: 6px; }
.etape p { color: #b9c6e0; font-size: 15px; margin: 0; }
.section:not(.section--marine) .etape { background: #fff; border-color: var(--trait); }
.section:not(.section--marine) .etape::before { color: var(--bleu); }
.section:not(.section--marine) .etape p { color: var(--texte-doux); }
.apres-etapes { margin-top: 32px; }

/* ---------- Tarifs ---------- */
.tarifs {
  display: grid; grid-auto-flow: column; grid-auto-columns: 84%; gap: 14px;
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  margin: 0 -20px; padding: 14px 20px 10px; scroll-padding-inline: 20px;
}
.tarifs::-webkit-scrollbar { display: none; }
.tarifs > * { scroll-snap-align: start; }
.points { display: flex; justify-content: center; gap: 6px; margin-top: 10px; }
.points span { width: 7px; height: 7px; border-radius: 99px; background: #cfd5e2; transition: width .2s, background .2s; }
.points span.actif { width: 22px; background: var(--bleu); }

.pack {
  position: relative; display: flex; flex-direction: column;
  padding: 26px 24px; border-radius: var(--rayon); background: #fff; border: 1px solid var(--trait);
}
.pack--vedette { background: var(--marine); color: #fff; border-color: var(--marine); box-shadow: var(--ombre-haute); }
.pack__ruban {
  position: absolute; top: -12px; inset-inline-start: 24px; padding: 5px 12px; border-radius: 99px;
  background: var(--bleu); color: #fff; font-size: 12px; font-weight: 800;
}
.pack h3 { font-size: 20px; margin-bottom: 4px; }
.pack__pour { font-size: 14px; color: var(--texte-doux); min-height: 42px; margin-bottom: 18px; }
.pack--vedette .pack__pour { color: #b9c6e0; }
.pack__prix { font-size: 40px; font-weight: 800; letter-spacing: -.04em; line-height: 1; margin: 0 0 6px; white-space: nowrap; font-family: "Plus Jakarta Sans", sans-serif; }
.pack__prix small { font-size: 15px; font-weight: 600; letter-spacing: 0; color: var(--texte-doux); font-family: var(--police); }
.pack--vedette .pack__prix small { color: #b9c6e0; }
.pack__note { font-size: 12.5px; color: var(--texte-pale); margin-bottom: 20px; }
.pack--vedette .pack__note { color: #8fa0c4; }
.pack .bouton { margin-bottom: 22px; }
.pack ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; font-size: 14.5px; }
.pack li { display: flex; gap: 10px; align-items: flex-start; }
.pack li svg { width: 18px; height: 18px; margin-top: 2px; color: var(--vert); stroke-width: 2.6; }
.pack li.plus { font-weight: 700; }
.pack li.plus svg { color: var(--bleu); }
.pack--vedette li svg { color: #6ee7a8; }
.pack--vedette li.plus svg { color: var(--ciel); }
.pack__separateur { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--texte-pale); margin: 18px 0 10px; }
[dir="rtl"] .pack__separateur { letter-spacing: 0; font-size: 13px; }
.pack--vedette .pack__separateur { color: #8fa0c4; }
/* « Voir les 8 autres prestations » : un vrai bouton, pour que personne ne le prenne pour du simple texte. */
.pack details summary {
  cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: center; gap: 6px;
  margin-top: 14px; min-height: 42px; padding: 0 14px; border-radius: 12px;
  border: 1.5px solid #c9d6f5; background: #fff; color: var(--bleu);
  font-size: 14px; font-weight: 700; transition: background .15s, border-color .15s;
}
.pack details summary:hover { background: var(--bleu-clair); border-color: var(--bleu); }
.pack--vedette details summary { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .25); color: #fff; }
.pack--vedette details summary:hover { background: rgba(255, 255, 255, .16); }
.pack details summary::-webkit-details-marker { display: none; }
.pack details summary svg { width: 16px; height: 16px; transition: transform .2s; }
.pack details[open] summary svg { transform: rotate(180deg); }
/* Une fois ouvert, le bouton disparaît : la liste complète reste affichée. */
.pack details[open] summary { display: none; }
.pack details[open] ul { margin-top: 10px; }
.pack details ul { margin-top: 12px; }
.note-tarifs { text-align: center; font-size: 14px; color: var(--texte-pale); margin-top: 22px; }

/* ---------- Questionnaire ---------- */
.quiz { display: grid; gap: 32px; align-items: center; }
.quiz__carte { background: #fff; border-radius: var(--rayon); padding: 24px; box-shadow: var(--ombre-haute); border: 1px solid var(--trait); color: var(--texte); }
.quiz__progression { display: flex; gap: 6px; margin-bottom: 18px; }
.quiz__progression span { flex: 1; height: 5px; border-radius: 99px; background: #e6eaf1; transition: background .25s; }
.quiz__progression span.fait { background: var(--bleu); }
.quiz__etape { font-size: 12px; font-weight: 800; color: var(--texte-pale); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 6px; }
[dir="rtl"] .quiz__etape { letter-spacing: 0; font-size: 13px; }
.quiz__question { font-size: 21px; font-weight: 800; letter-spacing: var(--interlettre-titre); margin-bottom: 16px; }
.quiz__choix { display: grid; gap: 10px; }
.quiz__choix button {
  display: flex; align-items: center; gap: 12px; text-align: start; width: 100%;
  padding: 15px 16px; border-radius: 14px; border: 1.5px solid var(--trait); background: #fff; cursor: pointer;
  transition: border-color .15s, background .15s, transform .1s;
}
.quiz__choix button:hover { border-color: var(--bleu); background: #f7f9ff; }
.quiz__choix button:active { transform: scale(.99); }
.quiz__choix strong { display: block; font-size: 15.5px; }
.quiz__choix small { display: block; font-size: 13px; color: var(--texte-doux); }
.quiz__choix .chevron { margin-inline-start: auto; color: #b5bccb; }
.quiz__badge { display: inline-block; padding: 5px 12px; border-radius: 99px; background: var(--vert-clair); color: var(--vert); font-size: 12.5px; font-weight: 800; margin-bottom: 10px; }
.quiz__forme { font-size: 26px; font-weight: 800; letter-spacing: var(--interlettre-titre); margin-bottom: 6px; }
.quiz__resultat ul { list-style: none; padding: 0; margin: 14px 0 18px; display: grid; gap: 8px; font-size: 15px; }
.quiz__resultat li { display: flex; gap: 10px; }
.quiz__resultat li svg { width: 19px; height: 19px; color: var(--vert); margin-top: 2px; stroke-width: 2.6; }
.quiz__recommencer { border: 0; background: none; color: var(--texte-doux); font-weight: 700; cursor: pointer; padding: 12px; }
.petit { font-size: 13px; color: var(--texte-pale); margin-top: 14px; }

/* ==========================================================================
   Parcours « Créer ma société » (page creer.html)
   ========================================================================== */
.parcours-page { background: var(--fond-doux); padding: 24px 0 48px; min-height: 70vh; }
.parcours { max-width: 760px; margin: 0 auto; }
.parcours__tete { margin-bottom: 20px; }
.parcours__tete h1 { font-size: clamp(28px, 5vw, 40px); color: var(--marine); margin-bottom: 8px; }
.parcours__tete p { color: var(--texte-doux); margin: 0; }

.progression { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin: 22px 0 8px; }
.progression span { height: 6px; border-radius: 99px; background: #dde2ec; transition: background .3s; }
.progression span.fait { background: var(--bleu); }
.progression__texte { display: flex; justify-content: space-between; font-size: 13px; font-weight: 700; color: var(--texte-doux); margin-bottom: 18px; }

.etape-parcours {
  border: 0; margin: 0; padding: 24px 20px; min-width: 0;
  background: #fff; border-radius: var(--rayon); box-shadow: var(--ombre); border: 1px solid var(--trait);
}
.js-parcours .etape-parcours:not(.active) { display: none; }
.js-parcours .etape-parcours.active { animation: glisse .35s cubic-bezier(.2, .8, .2, 1); }
@keyframes glisse { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
[dir="rtl"] .js-parcours .etape-parcours.active { animation-name: glisse-rtl; }
@keyframes glisse-rtl { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: none; } }
.etape-parcours + .etape-parcours { margin-top: 16px; }
.js-parcours .etape-parcours + .etape-parcours { margin-top: 0; }
.etape-parcours legend { float: left; width: 100%; padding: 0; margin-bottom: 4px; font-size: 22px; font-weight: 800; letter-spacing: var(--interlettre-titre); }
[dir="rtl"] .etape-parcours legend { float: right; }
.etape-parcours legend + * { clear: both; }
.etape-parcours__aide { color: var(--texte-doux); font-size: 14.5px; margin-bottom: 18px; clear: both; padding-top: 2px; }

.choix-cartes { display: grid; gap: 10px; }
.choix-carte { position: relative; cursor: pointer; display: block; }
.choix-carte input { position: absolute; opacity: 0; pointer-events: none; }
.choix-carte__corps {
  display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 16px;
  border: 1.5px solid var(--trait); background: #fff; transition: border-color .15s, background .15s, box-shadow .15s;
}
.choix-carte__corps strong { display: block; font-size: 16px; }
.choix-carte__corps small { display: block; font-size: 13.5px; color: var(--texte-doux); line-height: 1.4; }
.choix-carte__prix { margin-inline-start: auto; font-weight: 800; color: var(--marine); white-space: nowrap; font-size: 15px; }
.choix-carte__rond {
  margin-inline-start: auto; width: 24px; height: 24px; border-radius: 50%; flex: none;
  border: 2px solid #c9d0dd; display: grid; place-items: center; transition: all .15s;
}
.choix-carte__prix + .choix-carte__rond { margin-inline-start: 4px; }
.choix-carte__rond svg { width: 14px; height: 14px; stroke-width: 3; color: #fff; opacity: 0; }
.choix-carte:hover .choix-carte__corps { border-color: #b8c7ec; }
.choix-carte input:checked + .choix-carte__corps { border-color: var(--bleu); background: #f6f9ff; box-shadow: 0 0 0 3px rgba(36, 89, 211, .12); }
.choix-carte input:checked + .choix-carte__corps .choix-carte__rond { background: var(--bleu); border-color: var(--bleu); }
.choix-carte input:checked + .choix-carte__corps .choix-carte__rond svg { opacity: 1; }
.choix-carte input:focus-visible + .choix-carte__corps { outline: 3px solid rgba(36, 89, 211, .4); outline-offset: 2px; }
.note-parcours { margin-top: 14px; padding: 12px 14px; border-radius: 12px; background: var(--or-clair); color: #7a5312; font-size: 14px; }

.parcours__nav {
  display: flex; gap: 10px; margin-top: 16px;
}
.parcours__nav .bouton { flex: 1; }
.parcours__nav .bouton--contour { flex: 0 0 auto; }
/* Sur téléphone, les boutons Continuer / Retour restent collés en bas, au-dessus des onglets. */
@media (max-width: 1023px) {
  .js-parcours .parcours__nav {
    position: sticky; bottom: calc(var(--onglets) + 10px + env(safe-area-inset-bottom)); z-index: 20;
    padding: 10px; margin: 16px -10px 0; border-radius: 20px;
    background: rgba(255, 255, 255, .92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 10px 30px -12px rgba(15, 26, 46, .3);
  }
}

/* Dernière étape : seul « Retour » reste, il ne doit pas cacher les deux choix d'envoi. */
.js-parcours.derniere-etape .parcours__nav {
  position: static; padding: 0; margin: 16px 0 0; background: none; box-shadow: none;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}

.recap { list-style: none; margin: 0 0 18px; padding: 0; border: 1px solid var(--trait); border-radius: 16px; overflow: hidden; }
.recap li { display: flex; justify-content: space-between; gap: 16px; padding: 12px 16px; font-size: 14.5px; }
.recap li + li { border-top: 1px solid var(--trait); }
.recap span { color: var(--texte-doux); }
.recap strong { text-align: end; }
.recap button { border: 0; background: none; color: var(--bleu); font-weight: 700; cursor: pointer; padding: 0; font-size: 13px; }
/* Boutons d'envoi : « Envoyer par e-mail » (bleu) et « Envoyer sur WhatsApp » (vert) */
.envoi-boutons { display: grid; gap: 10px; margin-top: 22px; }
.envoi-boutons .bouton { width: 100%; }
.envoi-note { font-size: 13px; color: var(--texte-pale); margin: 12px 0 0; text-align: center; }
@media (min-width: 640px) { .envoi-boutons { grid-template-columns: 1fr 1fr; } }

/* Dernière étape : choisir l'envoi par e-mail ou par WhatsApp */
.envoi__titre { font-weight: 800; font-size: 16.5px; margin: 6px 0 12px; }
.envoi { display: grid; gap: 10px; }
.envoi__choix {
  position: relative; display: flex; align-items: center; gap: 14px; width: 100%;
  padding: 16px; border-radius: 16px; border: 1.5px solid var(--trait); background: #fff;
  font: inherit; color: inherit; text-align: start; cursor: pointer;
  transition: transform .25s cubic-bezier(.3, 1.4, .5, 1), box-shadow .2s, border-color .2s;
}
.envoi__choix strong { display: block; font-size: 16px; }
.envoi__choix small { display: block; font-size: 13px; color: var(--texte-doux); line-height: 1.4; margin-top: 2px; }
.envoi__choix .chevron { margin-inline-start: auto; color: #b5bccb; }
.envoi__choix--mail { border-color: var(--bleu); background: #f6f9ff; }
.envoi__choix--mail:hover { box-shadow: 0 0 0 3px rgba(36, 89, 211, .14); }
.envoi__choix--wa:hover { border-color: var(--whatsapp); box-shadow: 0 0 0 3px rgba(37, 211, 102, .14); }
.envoi__choix:active { transform: scale(.975); }
.envoi__choix[disabled] { opacity: .6; cursor: wait; }
@media (min-width: 640px) { .envoi { grid-template-columns: 1fr 1fr; } }

.ou { display: flex; align-items: center; gap: 12px; color: var(--texte-pale); font-size: 13px; font-weight: 700; margin: 16px 0; }
.ou::before, .ou::after { content: ""; flex: 1; height: 1px; background: var(--trait); }

.succes { text-align: center; padding: 32px 22px; background: #fff; border-radius: var(--rayon); box-shadow: var(--ombre-haute); border: 1px solid var(--trait); }
.succes__rond {
  width: 72px; height: 72px; margin: 0 auto 18px; border-radius: 50%; display: grid; place-items: center;
  background: var(--vert-clair); color: var(--vert); animation: pop .5s cubic-bezier(.2, 1.4, .4, 1);
}
.succes__rond svg { width: 36px; height: 36px; stroke-width: 2.6; }
@keyframes pop { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }
.succes h2 { font-size: 26px; margin-bottom: 8px; }
.succes > p { color: var(--texte-doux); max-width: 480px; margin: 0 auto 22px; }
.succes .boutons { justify-content: center; }
.succes__etape { display: inline-block; padding: 5px 12px; border-radius: 99px; background: #e3f8eb; color: var(--whatsapp-fonce); font-size: 13px; font-weight: 800; margin-bottom: 12px; }

/* Bandeau qui pousse vers le parcours (pages intérieures) */
.bandeau-creer {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px 22px; border-radius: var(--rayon); background: var(--bleu-clair); border: 1px solid #d5e1fb;
}
.bandeau-creer strong { display: block; font-size: 18px; color: var(--marine); }
.bandeau-creer span { color: var(--texte-doux); font-size: 14.5px; }

/* ---------- Formations ---------- */
.formations { display: grid; gap: 20px; }
.formation {
  display: flex; flex-direction: column; gap: 14px; padding: 26px; border-radius: var(--rayon);
  background: #fff; border: 1px solid var(--trait);
}
.formation h3 { font-size: 22px; }
.formation__niveau { display: inline-block; align-self: flex-start; padding: 4px 10px; border-radius: 99px; background: var(--vert-clair); color: var(--vert); font-size: 12.5px; font-weight: 800; }
.formation p { color: var(--texte-doux); margin: 0; }
.formation .coches { font-size: 14.5px; gap: 9px; }
.formation .bouton { margin-top: auto; }
.langues-bientot { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 22px 0; }
.langue-carte {
  padding: 18px 12px; border-radius: var(--rayon-m); text-align: center;
  background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .12);
}
.langue-carte strong { display: block; font-size: 22px; color: #fff; margin-bottom: 2px; }
.langue-carte span { font-size: 13px; color: #b9c6e0; }
.langue-carte .etiquette-bientot { margin-top: 10px; }

/* ---------- Carte (plan d'accès) ---------- */
.plan { display: grid; gap: 20px; align-items: stretch; }
.plan__carte { border-radius: var(--rayon); overflow: hidden; border: 1px solid var(--trait); background: #dfe5ef; min-height: 320px; position: relative; }
.plan__carte iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.plan__infos { display: grid; gap: 12px; align-content: start; }

/* ---------- Galerie ---------- */
.galerie {
  display: grid; grid-auto-flow: column; grid-auto-columns: 80%; gap: 14px;
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  margin: 0 -20px; padding: 0 20px 6px; scroll-padding-inline: 20px;
}
.galerie::-webkit-scrollbar { display: none; }
.galerie figure { margin: 0; scroll-snap-align: start; position: relative; border-radius: var(--rayon); overflow: hidden; aspect-ratio: 4 / 5; background: #dfe5ef; }
.galerie img { width: 100%; height: 100%; object-fit: cover; }
.galerie figcaption {
  position: absolute; inset-inline-start: 12px; bottom: 12px; padding: 8px 14px; border-radius: 12px;
  background: rgba(12, 26, 54, .6); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  color: #fff; font-size: 13.5px; font-weight: 700;
}

/* ---------- FAQ ---------- */
.faq { max-width: 820px; margin: 0 auto; display: grid; gap: 12px; }
.faq details { background: #fff; border: 1px solid var(--trait); border-radius: var(--rayon-m); transition: box-shadow .2s; }
.faq details[open] { box-shadow: var(--ombre); }
.faq summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px 22px; font-weight: 700; font-size: 16.5px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary span.plus {
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: var(--fond-doux); color: var(--marine); transition: transform .2s, background .2s, color .2s;
}
.faq summary span.plus svg { width: 16px; height: 16px; stroke-width: 2.4; }
.faq details[open] summary span.plus { transform: rotate(45deg); background: var(--bleu); color: #fff; }
.faq details p { padding: 0 22px 20px; margin: 0; color: var(--texte-doux); }

/* ---------- Bandeau d'appel ---------- */
.appel {
  position: relative; overflow: hidden;
  border-radius: 28px; padding: 36px 24px;
  background: radial-gradient(600px 300px at 100% 0%, rgba(36, 89, 211, .55), transparent 70%), var(--marine);
  color: #fff; display: grid; gap: 24px;
}
.appel h2 { font-size: clamp(26px, 3.6vw, 38px); margin-bottom: 10px; }
.appel p { color: #b9c6e0; font-size: 17px; margin: 0; max-width: 560px; }

/* ---------- Titre des pages intérieures ---------- */
.page-titre {
  padding: 32px 0 48px;
  background: radial-gradient(700px 360px at 95% 0%, rgba(36, 89, 211, .1), transparent 70%), var(--fond-doux);
}
.page-titre__grille { display: grid; gap: 32px; align-items: center; }
.fil { font-size: 13.5px; color: var(--texte-pale); margin-bottom: 18px; display: flex; gap: 8px; align-items: center; }
.fil svg { width: 15px; height: 15px; }
.fil a:hover { color: var(--bleu); }
.page-titre h1 { font-size: clamp(34px, 5.4vw, 54px); letter-spacing: calc(var(--interlettre-titre) * 1.6); color: var(--marine); margin-bottom: 16px; }
.page-titre h1 em { font-style: normal; color: var(--bleu); }
.page-titre .chapeau { max-width: 620px; margin-bottom: 26px; }
.page-titre__photo { border-radius: 24px; overflow: hidden; aspect-ratio: 4 / 3; box-shadow: var(--ombre-haute); background: #dfe5ef; }
.page-titre__photo img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Texte + photo ---------- */
.duo { display: grid; gap: 36px; align-items: center; }
.duo h2 { font-size: clamp(28px, 3.8vw, 40px); margin-bottom: 14px; }
.duo > div > p { color: var(--texte-doux); font-size: 16.5px; }
.duo__photo { border-radius: 24px; overflow: hidden; aspect-ratio: 4 / 3; background: #dfe5ef; }
.duo__photo img { width: 100%; height: 100%; object-fit: cover; }
.logo-center { width: 150px; border-radius: 14px; margin-bottom: 20px; box-shadow: var(--ombre); }

/* ---------- Ce qui est inclus ---------- */
.inclus { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.inclus li {
  display: flex; flex-direction: column; gap: 12px; padding: 18px; border-radius: var(--rayon-m);
  background: #fff; border: 1px solid var(--trait); font-weight: 700; font-size: 14.5px; line-height: 1.3;
}
.inclus .icone { width: 40px; height: 40px; border-radius: 12px; }
.inclus .icone svg { width: 20px; height: 20px; }

/* ---------- Tableau comparatif ---------- */
.tableau { position: relative; overflow-x: auto; border-radius: var(--rayon); border: 1px solid var(--trait); background: #fff; }
.tableau table { width: 100%; min-width: 620px; border-collapse: collapse; font-size: 15px; }
.tableau th, .tableau td { padding: 15px 16px; text-align: center; border-top: 1px solid var(--trait); }
.tableau thead th { border-top: 0; background: var(--fond-doux); font-size: 14px; }
.tableau tbody th, .tableau tfoot th, .tableau thead th:first-child { text-align: start; font-weight: 600; }
.tableau tfoot th, .tableau tfoot td { font-weight: 800; color: var(--marine); }
.tableau .oui { color: var(--vert); }
.tableau .non { color: #c4cad6; }
.tableau .oui svg, .tableau .non svg { width: 20px; height: 20px; stroke-width: 2.6; vertical-align: middle; }

/* ---------- Cabinet ---------- */
.valeurs { display: grid; gap: 16px; }
.valeur { padding: 26px; border-radius: var(--rayon); background: #fff; border: 1px solid var(--trait); }
.valeur__lettre { font-size: 46px; font-weight: 800; line-height: 1; color: var(--bleu); letter-spacing: -.04em; margin-bottom: 14px; }
.valeur h3 { font-size: 20px; margin-bottom: 6px; }
.valeur p { color: var(--texte-doux); margin: 0; }
.citation { font-size: 22px; font-weight: 800; letter-spacing: var(--interlettre-titre); color: var(--marine); border-inline-start: 4px solid var(--bleu); padding-block: 4px; padding-inline-start: 18px; margin: 22px 0; }
.dirigeant { display: flex; align-items: center; gap: 14px; }
.avatar { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--marine); color: #fff; font-weight: 800; flex: none; font-family: "Plus Jakarta Sans", sans-serif; }
.dirigeant strong { display: block; }
.dirigeant span { font-size: 14px; color: var(--texte-doux); }
.publics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.public { padding: 20px; border-radius: var(--rayon-m); background: #fff; border: 1px solid var(--trait); }
.public strong { display: block; font-size: 17px; color: var(--marine); margin-bottom: 2px; }
.public span { font-size: 14px; color: var(--texte-doux); }

/* ---------- Formulaires ---------- */
.contact { display: grid; gap: 24px; align-items: start; }
.formulaire { background: #fff; border-radius: var(--rayon); padding: 24px; border: 1px solid var(--trait); box-shadow: var(--ombre); }
.formulaire h2 { font-size: 24px; margin-bottom: 4px; }
.formulaire > p { color: var(--texte-doux); margin-bottom: 20px; }
.champs { display: grid; gap: 16px; }
.champ label, .champ .legende { display: block; font-size: 14px; font-weight: 700; margin-bottom: 7px; }
.champ .facultatif { font-weight: 500; color: var(--texte-pale); }
.champ label.requis::after { content: " *"; color: #dc4b4b; }
.champ input, .champ textarea, .champ select {
  width: 100%; min-height: 52px; padding: 13px 15px; border-radius: 14px;
  border: 1.5px solid #d6dce7; background: #fbfcfe; font-size: 16px;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.champ textarea { min-height: 120px; resize: vertical; }
.champ input:focus, .champ textarea:focus, .champ select:focus { outline: 0; border-color: var(--bleu); background: #fff; box-shadow: 0 0 0 4px rgba(36, 89, 211, .14); }
.champ input:user-invalid { border-color: #dc4b4b; }
.champ input[type="tel"], .champ input[type="email"] { direction: ltr; }
[dir="rtl"] .champ input[type="tel"], [dir="rtl"] .champ input[type="email"] { text-align: right; }
.puces-choix { display: flex; flex-wrap: wrap; gap: 8px; border: 0; padding: 0; margin: 0; min-inline-size: 0; }
.puces-choix legend { padding: 0; }
.puces-choix label { position: relative; cursor: pointer; }
.puces-choix input { position: absolute; opacity: 0; pointer-events: none; }
.puces-choix span {
  display: inline-flex; padding: 10px 16px; border-radius: 99px; border: 1.5px solid #d6dce7;
  font-size: 14px; font-weight: 700; color: var(--texte-doux); transition: all .15s;
}
.puces-choix input:checked + span { background: var(--marine); border-color: var(--marine); color: #fff; }
.puces-choix input:focus-visible + span { outline: 3px solid rgba(36, 89, 211, .4); outline-offset: 2px; }
[data-assa-form-status]:empty { display: none; }
[data-assa-form-status] { margin-top: 14px; padding: 14px 16px; border-radius: 12px; background: var(--vert-clair); color: #146c3c; font-weight: 600; }
[data-assa-form-status][data-state="error"] { background: #fdeaea; color: #a12828; }

/* Page Contact : carte des coordonnées */
.carte-contact {
  background: #fff; border-radius: var(--rayon); padding: 24px; border: 1px solid var(--trait); box-shadow: var(--ombre);
}
.carte-contact h2 { font-size: 22px; margin-bottom: 8px; }
.infos-contact { list-style: none; margin: 0; padding: 0; }
.infos-contact li { display: flex; align-items: center; gap: 14px; padding: 14px 0; }
.infos-contact li + li { border-top: 1px solid var(--trait); }
.infos-contact .icone { width: 42px; height: 42px; border-radius: 12px; }
.infos-contact .icone svg { width: 20px; height: 20px; }
.infos-contact small { display: block; font-size: 12.5px; font-weight: 700; color: var(--texte-pale); text-transform: uppercase; letter-spacing: .05em; }
[dir="rtl"] .infos-contact small { letter-spacing: 0; font-size: 13px; }
.infos-contact a { font-weight: 600; color: var(--texte); line-height: 1.45; }
.infos-contact a:hover { color: var(--bleu); }
.carte-contact__creer {
  margin-top: 10px; padding: 18px; border-radius: var(--rayon-m); background: var(--bleu-clair);
  display: grid; gap: 4px;
}
.carte-contact__creer strong { color: var(--marine); font-size: 16px; }
.carte-contact__creer span { font-size: 14px; color: var(--texte-doux); margin-bottom: 10px; }

/* Bannière d'accueil : un bouton principal et un lien discret */
.heros__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; }
@media (max-width: 639px) {
  .heros__actions .bouton { flex: 1 1 100%; }
  .heros__actions .lien-fleche { margin-inline: auto; }
}

.coordonnees { display: grid; gap: 12px; }
.coordonnee {
  display: flex; align-items: center; gap: 14px; padding: 18px; border-radius: var(--rayon-m);
  background: #fff; border: 1px solid var(--trait); transition: border-color .15s, transform .15s;
}
.coordonnee:hover { border-color: var(--bleu); transform: translateY(-2px); }
.coordonnee strong { display: block; font-size: 15px; }
.coordonnee span { display: block; font-size: 14px; color: var(--texte-doux); }
.coordonnee--whatsapp .icone { background: #e3f8eb; color: var(--whatsapp-fonce); }
.coordonnee--marine { background: var(--marine); border-color: var(--marine); color: #fff; }
.coordonnee--marine span { color: #b9c6e0; }
.coordonnee--marine .icone { background: rgba(255, 255, 255, .1); color: #fff; }

/* ---------- Texte long ---------- */
.texte-long { max-width: 780px; }
.texte-long h2 { font-size: 22px; margin: 32px 0 10px; }
.texte-long h2:first-child { margin-top: 0; }
.texte-long p { color: var(--texte-doux); }

/* ==========================================================================
   Pied de page
   ========================================================================== */
.pied { background: var(--marine-2); color: #9fb0d0; padding: 56px 0 calc(var(--onglets) + 28px + env(safe-area-inset-bottom)); font-size: 15px; }
.pied__grille { display: grid; gap: 36px; }
.pied__marque .logo__nom { color: #fff; }
.pied__marque .logo__metier { color: #8fa0c4; }
.pied__marque p { margin: 16px 0 18px; max-width: 320px; }
.pied h4 { color: #fff; font-size: 15px; margin-bottom: 14px; letter-spacing: 0; }
.pied ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.pied a:hover { color: #fff; }
.reseaux { display: flex; gap: 10px; }
.reseaux a { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: rgba(255, 255, 255, .07); color: #fff; transition: background .15s; }
.reseaux a:hover { background: var(--bleu); }
.pied__bas { margin-top: 40px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .08); display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: space-between; font-size: 13.5px; }

/* ==========================================================================
   Téléphone : onglets en bas, feuille de menu qui monte
   ========================================================================== */
.onglets {
  position: fixed; inset: auto 0 0 0; z-index: 40;
  height: calc(var(--onglets) + env(safe-area-inset-bottom));
  padding: 0 6px env(safe-area-inset-bottom);
  background: rgba(255, 255, 255, .95);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  border-top: 1px solid var(--trait);
  display: grid; grid-template-columns: repeat(5, 1fr); align-items: center;
}
.onglets a {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  height: 100%; font-size: 11px; font-weight: 700; color: var(--texte-pale); text-align: center; line-height: 1.2;
}
.onglets svg { width: 23px; height: 23px; }
.onglets [aria-current="page"] { color: var(--bleu); }
/* Pastille derrière l'icône de l'onglet actif (comme la barre de navigation de Material / Flutter).
   Elle porte un nom de transition : en changeant de page, elle glisse d'un onglet à l'autre. */
.onglets__icone {
  width: 58px; height: 30px; border-radius: 99px; display: grid; place-items: center;
  transition: background .25s;
}
.onglets [aria-current="page"] .onglets__icone { background: var(--bleu-clair); view-transition-name: pastille-onglet; }
.onglets a.tape svg { animation: rebond .45s cubic-bezier(.3, 1.6, .5, 1); }
.onglets__centre { color: var(--marine) !important; }
.onglets__centre .rond {
  position: relative;
  width: 56px; height: 56px; border-radius: 50%; margin-top: -30px;
  display: grid; place-items: center; background: var(--bleu); color: #fff;
  box-shadow: 0 10px 22px -8px rgba(36, 89, 211, .9), 0 0 0 5px #fff;
  transition: transform .2s cubic-bezier(.3, 1.6, .5, 1);
}
/* Onde qui attire l'œil vers « Créer », de temps en temps. */
.onglets__centre .rond::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--bleu);
  animation: onde 3.2s cubic-bezier(.2, .8, .2, 1) infinite; pointer-events: none;
}
.onglets__centre .rond svg { width: 27px; height: 27px; stroke-width: 2.4; transition: transform .35s cubic-bezier(.3, 1.6, .5, 1); }
.onglets__centre:active .rond { transform: scale(.9); }
.onglets__centre:active .rond svg { transform: rotate(90deg); }
@keyframes onde { 0% { transform: scale(1); opacity: .7; } 60%, 100% { transform: scale(1.55); opacity: 0; } }
@keyframes rebond { 0% { transform: scale(1); } 35% { transform: scale(.78) translateY(2px); } 70% { transform: scale(1.12) translateY(-2px); } 100% { transform: none; } }

.feuille {
  border: 0; padding: 0; margin: auto auto 0; width: 100%; max-width: 100%;
  max-height: 90vh; border-radius: 26px 26px 0 0; background: #fff; color: var(--texte);
  box-shadow: 0 -10px 40px rgba(12, 26, 54, .25); overflow-y: auto;
}
.feuille::backdrop { background: rgba(12, 26, 54, .5); }
.feuille[open] { animation: monte .3s cubic-bezier(.2, .8, .2, 1); }
.feuille__poignee { width: 42px; height: 5px; border-radius: 99px; background: #d5dae4; margin: 10px auto 2px; }
.feuille__tete { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 20px 8px; }
.feuille__tete strong { font-size: 19px; font-weight: 800; }
.feuille__corps { padding: 4px 12px calc(18px + env(safe-area-inset-bottom)); }
.feuille__liens { list-style: none; margin: 0; padding: 0; }
.feuille__liens a {
  display: flex; align-items: center; gap: 14px; padding: 11px 10px; border-radius: 14px; font-weight: 700;
}
.feuille__liens a:active, .feuille__liens a:hover { background: var(--fond-doux); }
.feuille__liens a[aria-current="page"] { color: var(--bleu); }
.feuille__liens .icone { width: 42px; height: 42px; border-radius: 12px; }
.feuille__liens .icone svg { width: 21px; height: 21px; }
.feuille__liens small { display: block; font-weight: 500; font-size: 13px; color: var(--texte-doux); }
.feuille__liens .chevron { margin-inline-start: auto; color: #b5bccb; }
.feuille__creer { margin: 4px 10px 10px; }
.feuille__bas { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 12px 10px 0; }

@keyframes monte { from { transform: translateY(100%); } to { transform: none; } }

/* ==========================================================================
   Animations (sensation d'application, façon Flutter)
   Uniquement transform / opacity : fluide même sur un téléphone modeste.
   Tout est coupé si le visiteur a demandé « réduire les animations ».
   ========================================================================== */
:root { interpolate-size: allow-keywords; }

/* ---------- Transition entre les pages ----------
   L'en-tête, la barre du haut et les onglets restent immobiles ; seul le contenu change. */
.barre-haut { view-transition-name: barre-haut; }
.entete { view-transition-name: entete; }
.onglets { view-transition-name: onglets; }
::view-transition-old(root) { animation: page-sort .2s cubic-bezier(.4, 0, 1, 1) both; }
::view-transition-new(root) { animation: page-entre .42s cubic-bezier(.05, .7, .1, 1) .05s both; }
::view-transition-group(pastille-onglet) { animation-duration: .45s; animation-timing-function: cubic-bezier(.3, 1.35, .5, 1); }
@keyframes page-sort { to { opacity: 0; transform: translateY(-10px) scale(.985); } }
@keyframes page-entre { from { opacity: 0; transform: translateY(26px); } }

/* ---------- Apparition au défilement, en cascade ----------
   La classe « anime » est posée par assets/app.js : sans script, tout reste visible.
   --i (posé par le script) décale chaque élément d'un même groupe. */
.anime .revele { opacity: 0; }
.anime .revele.visible {
  opacity: 1;
  animation: apparition .75s cubic-bezier(.2, .9, .3, 1.12) backwards;
  animation-delay: calc(var(--i, 0) * 85ms);
}
@keyframes apparition { from { opacity: 0; transform: translateY(32px) scale(.96); } }

/* ---------- Titres principaux : les mots montent un par un ---------- */
.mot { display: inline-block; animation: mot .8s cubic-bezier(.2, .9, .3, 1.15) backwards; animation-delay: calc(var(--i, 0) * 55ms + 120ms); }
@keyframes mot { from { opacity: 0; transform: translateY(.55em) rotate(2deg); filter: blur(4px); } }

/* ---------- Onde au toucher (« ripple ») ---------- */
.encre { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; pointer-events: none; }
.encre i {
  position: absolute; border-radius: 50%; background: currentColor; opacity: .2;
  transform: scale(0); animation: encre .6s cubic-bezier(.2, .8, .2, 1) forwards;
}
@keyframes encre { to { transform: scale(1); opacity: 0; } }

/* ---------- Pression : tout ce qui se touche s'enfonce légèrement ---------- */
.bouton { position: relative; isolation: isolate; overflow: hidden; }
.bouton:active { transform: scale(.96); }
.type, .service, .mini-service, .coordonnee, .choix-carte__corps, .formation, .pack, .quiz__choix button, .feuille__liens a, .raccourci {
  transition: transform .25s cubic-bezier(.3, 1.4, .5, 1), box-shadow .2s, border-color .2s, background .2s;
}
.type:active, .service:active, .mini-service:active, .coordonnee:active, .choix-carte:active .choix-carte__corps, .feuille__liens a:active { transform: scale(.975); }

/* Reflet qui balaie les gros boutons « Créer ma société » */
.bouton--principal.bouton--grand::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .35) 50%, transparent 65%);
  transform: translateX(-120%); animation: reflet 4.5s ease-in-out 1.2s infinite;
}
@keyframes reflet { 0%, 55% { transform: translateX(-120%); } 85%, 100% { transform: translateX(120%); } }

/* ---------- Bannière d'accueil vivante ---------- */
.heros::before, .heros::after {
  content: ""; position: absolute; border-radius: 50%; pointer-events: none; filter: blur(10px);
}
.heros::before {
  width: 460px; height: 460px; top: -170px; inset-inline-end: -140px;
  background: radial-gradient(circle, rgba(36, 89, 211, .2), transparent 65%);
  animation: derive 13s ease-in-out infinite alternate;
}
.heros::after {
  width: 340px; height: 340px; bottom: -150px; inset-inline-start: -120px;
  background: radial-gradient(circle, rgba(21, 163, 90, .12), transparent 65%);
  animation: derive 16s ease-in-out -4s infinite alternate-reverse;
}
.heros__grille { position: relative; z-index: 1; }
@keyframes derive { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-40px, 30px) scale(1.12); } 100% { transform: translate(25px, -20px) scale(.95); } }
.flottant { animation: flotte 5s ease-in-out infinite; }
.flottant--haut { animation-delay: -2.5s; }
@keyframes flotte { 0%, 100% { translate: 0 0; } 50% { translate: 0 -9px; } }
.heros__photo img { animation: zoom-lent 18s ease-in-out infinite alternate; }
@keyframes zoom-lent { from { transform: scale(1); } to { transform: scale(1.07); } }

/* ---------- Carrousels : la carte au centre est pleine taille, les autres reculent ----------
   --echelle est calculée par le script pendant le défilement (propriété « scale » séparée de « transform »). */
[data-carrousel] > * { scale: var(--echelle, 1); transition: scale .12s linear; }

/* ---------- En-tête qui se resserre au défilement ---------- */
.entete__barre { transition: height .3s cubic-bezier(.2, .8, .2, 1); }
.entete.est-defile .entete__barre { height: 56px; }
.logo img { transition: transform .3s; }
.entete.est-defile .logo img { transform: scale(.9); }

/* ---------- Feuille du menu : lignes en cascade, glisser vers le bas pour fermer ---------- */
.feuille[open] .feuille__liens li, .feuille[open] .feuille__creer, .feuille[open] .feuille__bas {
  animation: apparition .5s cubic-bezier(.2, .9, .3, 1.12) backwards;
  animation-delay: calc(var(--i, 0) * 35ms + 90ms);
}
.feuille.glisse { transition: none; }
.feuille.relache { transition: transform .3s cubic-bezier(.2, .8, .2, 1); }
.feuille__poignee, .feuille__tete { touch-action: none; }
.feuille[open]::backdrop { animation: voile .3s ease both; }
@keyframes voile { from { opacity: 0; } }

/* ---------- Parcours : sélection qui « saute », progression qui se remplit ---------- */
.choix-carte input:checked + .choix-carte__corps .choix-carte__rond { animation: saute .45s cubic-bezier(.3, 1.8, .5, 1); }
.choix-carte input:checked + .choix-carte__corps .icone { animation: saute .45s cubic-bezier(.3, 1.8, .5, 1) .05s; }
@keyframes saute { 0% { transform: scale(.6); } 60% { transform: scale(1.18); } 100% { transform: none; } }
.progression span { position: relative; overflow: hidden; background: #dde2ec !important; }
.progression span::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--bleu);
  transform: scaleX(0); transform-origin: left; transition: transform .5s cubic-bezier(.2, .8, .2, 1);
}
[dir="rtl"] .progression span::after { transform-origin: right; }
.progression span.fait::after { transform: none; }

/* ---------- Succès : la coche se dessine, des confettis jaillissent ---------- */
.succes__rond { position: relative; }
.succes__rond svg { stroke-dasharray: 26; stroke-dashoffset: 26; animation: trace .55s ease-out .35s forwards; }
@keyframes trace { to { stroke-dashoffset: 0; } }
.succes__rond::before, .succes__rond::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--vert);
  animation: anneau 1.4s cubic-bezier(.2, .8, .2, 1) .2s both; pointer-events: none;
}
.succes__rond::after { animation-delay: .5s; }
@keyframes anneau { from { transform: scale(1); opacity: .6; } to { transform: scale(2.1); opacity: 0; } }
.confetti {
  position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; border-radius: 2px; pointer-events: none;
  animation: confetti 1.1s cubic-bezier(.15, .7, .3, 1) forwards;
}
@keyframes confetti {
  0% { transform: translate(-50%, -50%) scale(.4); opacity: 1; }
  100% { transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) rotate(var(--r)) scale(1); opacity: 0; }
}

/* ---------- Questions fréquentes et détails des packs : ouverture en douceur ---------- */
.faq details::details-content, .pack details::details-content {
  block-size: 0; overflow: hidden;
  transition: block-size .35s cubic-bezier(.2, .8, .2, 1), content-visibility .35s allow-discrete;
}
.faq details[open]::details-content, .pack details[open]::details-content { block-size: auto; }

/* ---------- Carte Google Maps : reflet pendant le chargement ---------- */
.plan__carte {
  background: linear-gradient(100deg, #e3e8f1 30%, #f1f4f9 50%, #e3e8f1 70%) 0 0 / 300% 100%;
  animation: chargement 1.4s linear infinite;
}
@keyframes chargement { to { background-position: -150% 0; } }

/* ---------- Visiteurs qui ont demandé moins d'animations ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  .anime .revele { opacity: 1; }
  .succes__rond svg { stroke-dashoffset: 0; }
  [data-carrousel] > * { scale: 1; }
}

/* ==========================================================================
   Téléphone (< 640 px) : version compacte, façon application
   ========================================================================== */
@media (max-width: 639px) {
  .section { padding: 48px 0; }
  .en-tete-section { margin-bottom: 22px; }
  .en-tete-section h2 { font-size: 27px; margin-bottom: 10px; }
  .chapeau { font-size: 15.5px; }

  .heros { padding: 22px 0 40px; }
  .heros__grille { gap: 28px; }
  .heros .chapeau { font-size: 16px; margin-bottom: 22px; }
  .heros__photo { aspect-ratio: 16 / 10; border-radius: 22px; }
  .heros__garanties { margin-top: 18px; gap: 8px 16px; font-size: 13.5px; }
  .page-titre { padding: 18px 0 34px; }
  .page-titre__grille { gap: 24px; }
  .page-titre .chapeau { margin-bottom: 20px; }
  .page-titre__photo { aspect-ratio: 16 / 10; }

  /* Cartes qui défilent au doigt au lieu de s'empiler */
  .defile-tel {
    display: grid; grid-auto-flow: column; grid-auto-columns: 80%; grid-template-columns: none; gap: 12px;
    overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin: 0 -20px; padding: 16px 20px 6px; scroll-padding-inline: 20px;
  }
  .defile-tel::-webkit-scrollbar { display: none; }
  .defile-tel > * { scroll-snap-align: start; }
  .type, .formation, .valeur { padding: 20px; }
  .pack { padding: 22px 20px; }
  .pack ul { gap: 7px; font-size: 14px; }
  .pack .bouton { margin-bottom: 16px; }
  .pack__separateur { margin: 12px 0 8px; }

  /* Étapes : frise verticale compacte */
  .etapes { gap: 0; }
  .etape {
    display: grid; grid-template-columns: 38px 1fr; column-gap: 14px;
    padding: 0 0 18px; background: none !important; border: 0 !important; border-radius: 0;
  }
  .etape::before {
    content: counter(etape); grid-row: span 2; width: 38px; height: 38px; margin: 0; border-radius: 50%;
    display: grid; place-items: center; font-size: 14px; background: rgba(255, 255, 255, .1); color: #fff;
  }
  .etape::after { content: ""; position: absolute; inset-inline-start: 18px; top: 42px; bottom: 4px; width: 2px; background: rgba(255, 255, 255, .15); }
  .etape:last-child { padding-bottom: 0; }
  .etape:last-child::after { display: none; }
  .etape h3 { font-size: 17px; margin: 7px 0 2px; }
  .etape p { font-size: 14px; }
  .section:not(.section--marine) .etape::before { background: var(--bleu-clair); color: var(--bleu); }
  .section:not(.section--marine) .etape::after { background: var(--trait); }
  .apres-etapes { margin-top: 24px; }

  /* Petits services : liste façon application */
  .mini-services { gap: 0; border-radius: var(--rayon); overflow: hidden; border: 1px solid var(--trait); background: #fff; margin-top: 14px; }
  .mini-service { border: 0; border-radius: 0; padding: 14px 16px; gap: 14px; align-items: center; }
  .mini-service + .mini-service { border-top: 1px solid var(--trait); }
  .mini-service .icone { width: 40px; height: 40px; border-radius: 12px; }
  .mini-service .icone svg { width: 20px; height: 20px; }
  .mini-service h3 { font-size: 15.5px; margin-bottom: 1px; }
  .mini-service p { font-size: 13px; line-height: 1.45; }

  .inclus { gap: 8px; }
  .inclus li { flex-direction: row; align-items: center; padding: 10px 12px; font-size: 13px; gap: 10px; }
  .inclus .icone { width: 34px; height: 34px; border-radius: 10px; }
  .inclus .icone svg { width: 18px; height: 18px; }

  /* Plan d'accès : tuiles compactes */
  .plan__carte { min-height: 250px; }
  .plan__infos { grid-template-columns: 1fr 1fr; gap: 10px; }
  .plan__infos .coordonnee--marine { grid-column: 1 / -1; }
  .plan__infos .coordonnee:not(.coordonnee--marine) { flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px; }
  .plan__infos .coordonnee span { font-size: 12.5px; }
  .plan__infos .coordonnee:last-child { display: none; } /* le fixe reste dans le pied de page */
  .coordonnees { grid-template-columns: 1fr 1fr; gap: 10px; }
  .coordonnees .coordonnee:first-child { grid-column: 1 / -1; }
  .coordonnees .coordonnee:not(:first-child) { flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px; }
  .coordonnees .coordonnee span { font-size: 12.5px; }

  .faq { gap: 8px; }
  .faq summary { padding: 16px 18px; font-size: 15.5px; }
  .confiance__item { padding: 14px 6px; gap: 10px; }
  .duo { gap: 24px; }
  .duo__photo { aspect-ratio: 16 / 10; }
  .appel { padding: 28px 20px; border-radius: 24px; }
  .galerie figure { aspect-ratio: 4 / 4.4; }
  .publics { gap: 8px; }
  .public { padding: 14px; }
  .formulaire { padding: 20px; }

  /* Pied de page allégé : la navigation est déjà dans les onglets et le menu */
  .pied { padding-top: 36px; }
  .pied__grille { gap: 24px; }
  .pied__grille > div:nth-child(2), .pied__grille > div:nth-child(3) { display: none; }
  .pied__bas { margin-top: 24px; }
}
@media (min-width: 640px) { .points--tel { display: none; } }

/* ==========================================================================
   Tablette (≥ 640 px)
   ========================================================================== */
@media (min-width: 640px) {
  .conteneur { padding: 0 32px; }
  .section { padding: 80px 0; }
  .heros { padding: 56px 0 80px; }
  .flottant--haut { display: flex; }
  .barre-haut a.barre-haut__info { display: inline-flex; }
  .confiance__liste { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .types { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mini-services { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .etapes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tarifs { margin: 0 -32px; padding-inline: 32px; scroll-padding-inline: 32px; grid-auto-columns: 46%; }
  .galerie { margin: 0 -32px; padding-inline: 32px; scroll-padding-inline: 32px; grid-auto-columns: 44%; }
  .inclus { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .champs--2 { grid-template-columns: 1fr 1fr; }
  .champ--large { grid-column: 1 / -1; }
  .formulaire { padding: 32px; }
  .etape-parcours { padding: 32px; }
  .choix-cartes--2 { grid-template-columns: 1fr 1fr; }
  .formations { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .valeurs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .publics { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .appel { padding: 48px; }
  .pied__grille { grid-template-columns: 1fr 1fr; }
  .feuille { max-width: 480px; margin: auto; border-radius: 24px; }
  .feuille__poignee { display: none; }
  .feuille__tete { padding-top: 18px; }
}

/* ==========================================================================
   Ordinateur (≥ 1024 px) : menu en haut, plus d'onglets en bas
   ========================================================================== */
@media (min-width: 1024px) {
  .entete__barre { height: var(--entete); gap: 24px; }
  .menu { display: flex; align-items: center; gap: 2px; }
  .menu a {
    padding: 9px 11px; border-radius: 10px; font-size: 15px; font-weight: 600; color: var(--texte-doux); white-space: nowrap;
    transition: color .15s, background .15s;
  }
  .menu a:hover { color: var(--marine); background: var(--fond-doux); }
  .menu a[aria-current="page"] { color: var(--bleu); background: var(--bleu-clair); }
  .entete__actions .bouton--principal { display: inline-flex; min-height: 48px; }
  .entete__actions .rond-bouton { display: none; }
  .onglets { display: none; }
  .pied { padding-bottom: 32px; }

  .section { padding: 104px 0; }
  .heros { padding: 72px 0 104px; }
  .heros__grille { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 64px; }
  .heros__photo { aspect-ratio: 5 / 5.4; }
  .flottant--bas { inset-inline-start: -28px; bottom: 48px; }
  .flottant--haut { inset-inline-end: -20px; top: 40px; }

  .types { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
  .types--detail { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
  .services { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
  .mini-services { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
  .etapes { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
  .tarifs { grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: visible; margin: 0; padding: 14px 0 0; gap: 18px; }
  .tarifs--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .galerie { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; margin: 0; padding: 0; gap: 20px; }
  .galerie figure { aspect-ratio: 4 / 3.4; }
  .points { display: none; }
  .quiz { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; }
  .quiz__carte { padding: 32px; }
  .parcours-page { padding: 48px 0 96px; }
  .page-titre { padding: 48px 0 80px; }
  .page-titre__grille--photo { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 56px; }
  .duo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; }
  .inclus { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
  .formations { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  .plan { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 24px; }
  .plan__carte { min-height: 420px; }
  .contact { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 32px; }
  .appel { grid-template-columns: 1fr auto; align-items: center; padding: 56px 64px; }
  .pied__grille { grid-template-columns: 1.4fr 1fr 1fr 1.3fr; gap: 48px; }
}

@media (min-width: 1024px) and (max-width: 1380px) {
  /* Écran moyen : l'en-tête garde seulement l'icône du logo pour que le menu tienne sur une ligne. */
  .entete__barre { gap: 14px; }
  .entete .logo > span { display: none; }
  .menu a { padding: 9px 10px; font-size: 14.5px; }
}

@media (max-width: 360px) {
  .conteneur { padding: 0 16px; }
  .tarifs, .galerie, .defile-tel { margin: 0 -16px; padding-inline: 16px; scroll-padding-inline: 16px; }
  .entete__barre { gap: 10px; }
  .logo__metier { display: none; }
  .logo__nom { font-size: 15px; }
  .entete .logo > span { display: none; } /* très petit écran : l'icône du logo suffit, place au lien de langue */
  .rond-bouton { width: 40px; height: 40px; }
  .onglets a { font-size: 10px; }
  .pack__prix { font-size: 34px; }
  .etape-parcours { padding: 20px 16px; }
  .bouton { white-space: normal; text-align: center; padding: 0 16px; }
  .bouton--grand { padding: 0 18px; font-size: 15.5px; }
}