/* Daycarelink, site vitrine.
   Les couleurs, les polices et les rayons sont ceux de l'application : le site
   et l'application sont la même chose, vue de deux côtés. Bleu du logo pour la
   marque, vert pour ce qui est acquis, jaune pour ce qui attire l'oeil,
   violet en accent. Page claire, cartes blanches à filet fin, ombres douces.
   Deux rayons seulement : 20 px pour un bloc, 12 px pour une puce. */

:root {
  --bg: #F4F7FA; --card: #FFFFFF; --card2: #FAFCFD;
  --soft: #E4EFF9; --soft2: #F1F7FC;
  --txt: #0E1C28; --txt2: #55707F; --txt3: #90A4B2;
  --line: #E3EAF0; --line2: #EEF3F7;

  /* Les trois couleurs du logo. */
  --bleu: #146BB8; --bleu2: #2E88D6; --bleu3: #7FC0F0; --bleu-f: #0C4A80;
  --vert: #2A775B; --vert2: #3E9B78; --vert-bg: #DFF1E9;
  --jaune: #906506; --jaune-a: #FCB418; --jaune-bg: #FDF0D4;
  --violet: #7C6CF0; --violet-bg: #EAE7FD;
  --rose: #B4477E; --rose-bg: #FAE6F0;

  --ok: #2A775B; --ok-bg: #DFF1E9;
  --attention: #906506; --attention-bg: #FDF0D4;
  --alerte: #C0453C; --alerte-bg: #FBE7E5;

  --filet: 1px solid var(--line);
  --sh: 0 1px 2px rgba(14, 28, 40, .05);
  --sh-lift: 0 1px 2px rgba(14, 28, 40, .06), 0 14px 30px -18px rgba(14, 28, 40, .32);
  --sh-bleu: 0 10px 24px -14px rgba(20, 107, 184, .75);
  --anneau: 0 0 0 3px rgba(20, 107, 184, .18);

  --titres: "Bricolage Grotesque", "Plus Jakarta Sans", -apple-system, "Segoe UI", sans-serif;
  --police: "Plus Jakarta Sans", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --chiffres: ui-monospace, SFMono-Regular, "Cascadia Mono", Menlo, monospace;

  --e1: 4px; --e2: 8px; --e3: 12px; --e4: 16px; --e5: 22px; --e6: 30px; --e7: 42px;
  --r-bloc: 20px; --r-puce: 12px; --r-champ: 12px;

  --degrade: linear-gradient(140deg, #2E88D6 0%, #146BB8 55%, #0C4A80 100%);
  --degrade-doux: linear-gradient(135deg, #DCEBF8 0%, #FDF0D4 55%, #DFF1E9 100%);
  --largeur: 1160px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--txt); font-family: var(--police);
  font-size: 16px; line-height: 1.55; letter-spacing: -.005em;
  -webkit-font-smoothing: antialiased; overflow-x: clip;
}
/* Garde-fou à spécificité nulle : toute règle de contexte passe devant. */
:where(svg.icone) { width: 1.25em; height: 1.25em; flex: none; }
img, svg.illus { max-width: 100%; height: auto; display: block; }
a { color: var(--bleu); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { margin: 0; font-family: var(--titres); font-weight: 800; letter-spacing: -.03em; line-height: 1.1; }
h1 { font-size: clamp(33px, 5.2vw, 58px); }
h2 { font-size: clamp(25px, 3.3vw, 37px); }
h3 { font-size: 19px; letter-spacing: -.02em; }
p { margin: 0; }
:focus-visible { outline: 3px solid var(--bleu2); outline-offset: 2px; border-radius: 8px; }
.visuellement-cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.conteneur { width: min(100% - 2 * var(--e5), var(--largeur)); margin-inline: auto; }
@media (max-width: 600px) { .conteneur { width: min(100% - 2 * var(--e4), var(--largeur)); } }

/* Le titre en deux tons, comme le bandeau de l'application. */
.deux-tons em { font-style: normal; color: var(--jaune-a); }
.sur-clair .deux-tons em { color: var(--bleu); }

/* ------------------------------------------------------------------ */
/* Boutons                                                             */
/* ------------------------------------------------------------------ */
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 22px; border-radius: 999px; font-weight: 800; font-size: 15px;
  border: 0; cursor: pointer; font-family: inherit; text-decoration: none; white-space: nowrap;
  transition: transform .15s ease, box-shadow .15s ease;
}
.bouton:hover { text-decoration: none; transform: translateY(-1px); }
.bouton.plein { background: var(--degrade); color: #fff; box-shadow: var(--sh-bleu); }
.bouton.blanc { background: #fff; color: var(--bleu-f); box-shadow: var(--sh-lift); }
.bouton.fantome { background: rgba(255, 255, 255, .16); color: #fff; border: 1px solid rgba(255, 255, 255, .26); }
.bouton.fantome:hover { background: rgba(255, 255, 255, .26); }
.bouton.secondaire { background: var(--soft); color: var(--bleu-f); }
.bouton.secondaire:hover { background: #d5e7f7; }
.bouton svg { width: 18px; height: 18px; }

/* ------------------------------------------------------------------ */
/* En-tête                                                             */
/* ------------------------------------------------------------------ */
.tete {
  position: sticky; top: 0; z-index: 20;
  background: rgba(12, 74, 128, .93); backdrop-filter: blur(14px) saturate(140%);
  color: #fff; border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.tete .conteneur { display: flex; align-items: center; gap: var(--e4); min-height: 64px; }
.marque { display: inline-flex; align-items: center; gap: 10px; color: #fff; font-family: var(--titres); font-weight: 800; letter-spacing: -.02em; font-size: 17px; }
.marque:hover { text-decoration: none; }
.marque .jeton {
  width: 36px; height: 36px; border-radius: var(--r-puce); flex: 0 0 36px;
  box-shadow: 0 0 0 2px rgba(252, 180, 24, .45);
}
.marque span em { font-style: normal; color: var(--jaune-a); }
.nav { margin-left: auto; display: flex; gap: 4px; align-items: center; }
.nav a { color: rgba(255, 255, 255, .88); padding: 8px 13px; border-radius: 999px; font-weight: 700; font-size: 14px; white-space: nowrap; }
.nav a:hover { background: rgba(255, 255, 255, .12); text-decoration: none; }
.nav a[aria-current="page"] { background: #fff; color: var(--bleu-f); }
.nav .bouton { padding: 9px 16px; font-size: 14px; margin-left: 6px; }
.nav-bascule {
  display: none; margin-left: auto; background: rgba(255, 255, 255, .14); color: #fff; border: 0;
  width: 44px; height: 44px; border-radius: var(--r-puce); cursor: pointer; align-items: center; justify-content: center;
}
.nav-bascule svg { width: 22px; height: 22px; }
@media (max-width: 1130px) {
  .nav-bascule { display: inline-flex; }
  .nav {
    display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch;
    background: var(--bleu-f); padding: var(--e3) var(--e4) var(--e5); gap: 6px;
    box-shadow: 0 30px 40px -20px rgba(0, 0, 0, .55);
  }
  .nav.ouverte { display: flex; }
  .nav a { padding: 12px 14px; font-size: 16px; }
  .nav .bouton { margin: 6px 0 0; }
}

/* ------------------------------------------------------------------ */
/* Bandeaux                                                            */
/* ------------------------------------------------------------------ */
.bandeau {
  position: relative; color: #fff; overflow: hidden; isolation: isolate;
  background: linear-gradient(160deg, #0C4A80 0%, #146BB8 58%, #1F5F7E 100%);
}
.bandeau::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(70% 90% at 88% 0%, rgba(252, 180, 24, .26), transparent 62%),
              radial-gradient(60% 80% at 10% 100%, rgba(42, 119, 91, .34), transparent 60%);
}
.bandeau .conteneur { position: relative; padding-block: clamp(44px, 7vw, 82px); }
.sur-titre { display: block; font-size: 12px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; color: var(--jaune-a); margin-bottom: 14px; }
.bandeau p.chapeau { font-size: clamp(17px, 1.8vw, 21px); color: rgba(255, 255, 255, .86); max-width: 620px; margin-top: 18px; line-height: 1.5; }
.bandeau .gestes { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 30px; }
.bandeau-page .conteneur { padding-block: clamp(34px, 5vw, 60px); }
.bandeau-page h1 { font-size: clamp(29px, 4.3vw, 46px); }

/* Le héros : le texte à gauche, la scène dessinée à droite. */
.heros .conteneur { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: var(--e6); align-items: center; }
.heros-scene { position: relative; min-height: 300px; display: grid; place-items: center; }
@media (max-width: 880px) {
  .heros .conteneur { grid-template-columns: 1fr; }
  .heros-scene { min-height: 0; order: -1; }
  .heros-scene .illus { width: min(78%, 340px); }
}

/* ------------------------------------------------------------------ */
/* Sections                                                            */
/* ------------------------------------------------------------------ */
.section { padding-block: clamp(46px, 7vw, 88px); }
.section.serree { padding-block: clamp(30px, 4vw, 54px); }
.section + .section { border-top: var(--filet); }
.section.bleue { background: linear-gradient(160deg, #0C4A80 0%, #146BB8 60%, #1F5F7E 100%); color: #fff; border-top: 0; }
.section.bleue .mut { color: rgba(255, 255, 255, .74); }
.section.douce { background: var(--soft2); }
.tete-section { max-width: 720px; margin-bottom: clamp(24px, 4vw, 42px); }
.tete-section p { margin-top: 12px; color: var(--txt2); font-size: 17px; }
.bleue .tete-section p { color: rgba(255, 255, 255, .8); }
.mut { color: var(--txt2); }
.centre { text-align: center; margin-inline: auto; }

.carte { background: var(--card); border: var(--filet); border-radius: var(--r-bloc); box-shadow: var(--sh); padding: var(--e5); }
.carte.lift:hover { box-shadow: var(--sh-lift); }
.grille { display: grid; gap: var(--e4); }
.grille.deux { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grille.trois { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grille.quatre { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) { .grille.trois, .grille.quatre { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .grille.deux, .grille.trois, .grille.quatre { grid-template-columns: 1fr; } }

.pastille {
  display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
  border-radius: var(--r-puce); background: var(--soft); color: var(--bleu); flex: 0 0 44px;
}
.pastille svg { width: 22px; height: 22px; }
.pastille.vert { background: var(--vert-bg); color: var(--vert); }
.pastille.jaune { background: var(--jaune-bg); color: var(--jaune); }
.pastille.violet { background: var(--violet-bg); color: var(--violet); }
.pastille.rose { background: var(--rose-bg); color: var(--rose); }
.bleue .pastille { background: rgba(255, 255, 255, .14); color: #FFE3A4; }

/* La journée d'une crèche : des étapes, une illustration chacune. */
.etapes { display: grid; gap: clamp(38px, 6vw, 70px); }
.etape { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(22px, 4vw, 54px); align-items: center; }
.etape:nth-child(even) .etape-texte { order: 2; }
.etape-numero { font-family: var(--chiffres); font-size: 13px; font-weight: 700; color: var(--bleu); letter-spacing: .08em; text-transform: uppercase; display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.etape-numero::before { content: ""; width: 26px; height: 2px; background: var(--jaune-a); border-radius: 2px; }
.etape h3 { font-size: clamp(21px, 2.4vw, 27px); }
.etape p { margin-top: 12px; color: var(--txt2); font-size: 16.5px; }
@media (max-width: 800px) { .etape { grid-template-columns: 1fr; } .etape:nth-child(even) .etape-texte { order: 0; } }
/* 02/10 : une étape sans écran prend la largeur du texte, centrée (moins de captures). */
.etape-seule { grid-template-columns: minmax(0, 720px); justify-content: center; }
.etape-seule .etape-texte { order: 0; }

/* La place d'une capture d'écran, le jour où il y en aura. */
.ecran { border-radius: var(--r-bloc); border: var(--filet); box-shadow: var(--sh-lift); overflow: hidden; background: var(--card); }
.ecran img { width: 100%; }
.ecran-tel {
  width: min(100%, 290px); margin-inline: auto; border-radius: 34px; padding: 10px;
  background: #0E1C28; box-shadow: 0 24px 50px -24px rgba(14, 28, 40, .65);
}
.ecran-tel .dedans { border-radius: 26px; overflow: hidden; background: var(--soft2); }

.chiffres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e4); }
.chiffre { text-align: center; padding: var(--e5) var(--e4); }
.chiffre .pastille { margin-inline: auto; margin-bottom: 12px; }
.chiffre strong { display: block; font-family: var(--titres); font-size: 30px; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.chiffre span { display: block; margin-top: 4px; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--txt3); }
.bleue .chiffre { background: rgba(255, 255, 255, .07); border-radius: var(--r-bloc); }
.bleue .chiffre span { color: rgba(255, 255, 255, .62); }
@media (max-width: 560px) { .chiffres { grid-template-columns: 1fr; } }

.tuiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.tuile {
  display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 18px 12px; text-align: center;
  background: var(--card); border: var(--filet); border-radius: var(--r-puce); color: var(--txt); font-weight: 700; font-size: 14px;
}
.tuile svg { width: 24px; height: 24px; color: var(--bleu); }
.tuile:hover { border-color: var(--bleu3); background: var(--soft2); text-decoration: none; }

.fonction { display: flex; flex-direction: column; gap: 12px; }
.fonction h3 { font-size: 18px; }
.fonction p { color: var(--txt2); font-size: 15px; }

.onglets-page { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 24px; }
.onglets-page a { padding: 8px 14px; border-radius: 999px; background: rgba(255, 255, 255, .14); color: #fff; font-weight: 700; font-size: 13.5px; border: 1px solid rgba(255, 255, 255, .2); }
.onglets-page a:hover { background: rgba(255, 255, 255, .24); text-decoration: none; }
.bloc-fonction { scroll-margin-top: 84px; }
.bloc-fonction + .bloc-fonction { margin-top: clamp(38px, 6vw, 70px); padding-top: clamp(38px, 6vw, 70px); border-top: var(--filet); }

.liste { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 10px; }
.liste li { position: relative; padding-left: 26px; color: var(--txt2); }
.liste li::before { content: ""; position: absolute; left: 0; top: .62em; width: 14px; height: 2px; background: var(--jaune-a); border-radius: 2px; }
.liste li strong { color: var(--txt); }
.bleue .liste li { color: rgba(255, 255, 255, .84); }
.bleue .liste li strong { color: #fff; }
.liste.vert li::before { background: var(--vert2); }
.liste.rouge li::before { background: var(--alerte); }

/* Le formulaire de contact. */
.formulaire { display: grid; gap: var(--e4); }
.formulaire .champs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e4); }
@media (max-width: 600px) { .formulaire .champs { grid-template-columns: 1fr; } }
.champ { display: flex; flex-direction: column; gap: 6px; }
.champ label { font-size: 12.5px; font-weight: 800; color: var(--txt2); }
.champ input, .champ textarea, .champ select {
  font: inherit; padding: 11px 13px; border: 1px solid var(--line); border-radius: var(--r-champ);
  background: var(--card2); color: var(--txt); width: 100%;
}
.champ input:focus, .champ textarea:focus, .champ select:focus { outline: none; border-color: var(--bleu); box-shadow: var(--anneau); background: #fff; }
.champ textarea { min-height: 140px; resize: vertical; }
.aide-champ { font-size: 12.5px; color: var(--txt3); }
.message { padding: 12px 14px; border-radius: var(--r-puce); background: var(--ok-bg); color: var(--ok); font-weight: 700; }
.message.attention { background: var(--attention-bg); color: var(--attention); }
.message.erreur { background: var(--alerte-bg); color: var(--alerte); }

.appel { background: var(--degrade); color: #fff; border-radius: var(--r-bloc); padding: clamp(28px, 4vw, 46px); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--e5); align-items: center; box-shadow: var(--sh-bleu); }
.appel h2 { color: #fff; }
.appel p { color: rgba(255, 255, 255, .84); margin-top: 8px; max-width: 560px; }
@media (max-width: 700px) { .appel { grid-template-columns: 1fr; } }

.pied { background: var(--bleu-f); color: rgba(255, 255, 255, .8); padding-block: var(--e6) var(--e5); font-size: 14px; }
.pied .conteneur { display: grid; grid-template-columns: minmax(0, 1.3fr) repeat(2, minmax(0, 1fr)); gap: var(--e5); }
.pied h4 { color: #fff; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 12px; }
.pied a { color: rgba(255, 255, 255, .86); }
.pied ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pied .bas { grid-column: 1 / -1; border-top: 1px solid rgba(255, 255, 255, .12); padding-top: var(--e4); margin-top: var(--e3); display: flex; justify-content: space-between; gap: var(--e3); flex-wrap: wrap; color: rgba(255, 255, 255, .58); font-size: 13px; }
@media (max-width: 700px) { .pied .conteneur { grid-template-columns: 1fr; } }

.etiquette { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 800; background: var(--soft); color: var(--bleu-f); white-space: nowrap; }
.etiquette::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.etiquette.vert { background: var(--ok-bg); color: var(--ok); }
.etiquette.jaune { background: var(--attention-bg); color: var(--attention); }
.etiquette.gris { background: var(--line2); color: var(--txt3); }
.etiquette.aujourdhui { background: var(--jaune-bg); color: var(--jaune); }
.etiquette.aujourdhui::before { animation: battement 1.6s ease-in-out infinite; }
@keyframes battement { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) {
  .etiquette.aujourdhui::before { animation: none; }
  html { scroll-behavior: auto; }
  .bouton { transition: none; }
}

/* ------------------------------------------------------------------ */
/* La page publique : infos pratiques, actualités, menus                */
/* ------------------------------------------------------------------ */
.publique-tete { display: flex; gap: var(--e4); align-items: flex-end; flex-wrap: wrap; }
.publique-tete .grandir { flex: 1 1 320px; }
.entete-meta { display: flex; gap: 6px 16px; flex-wrap: wrap; margin-top: 14px; color: rgba(255, 255, 255, .86); font-size: 14px; font-weight: 600; }
.entete-meta span { display: inline-flex; align-items: center; gap: 7px; }
.entete-meta svg { width: 16px; height: 16px; color: var(--jaune-a); }
.publique-corps { padding-block: var(--e5) var(--e7); display: grid; gap: var(--e4); }
.deux-colonnes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e4); align-items: start; }
@media (max-width: 880px) { .deux-colonnes { grid-template-columns: 1fr; } }
.publique-corps .carte header { display: flex; align-items: center; gap: 12px; margin: calc(var(--e5) * -1) calc(var(--e5) * -1) var(--e4); padding: var(--e4) var(--e5); border-bottom: var(--filet); }
.publique-corps .carte header h2 { font-size: 17px; }
.publique-corps .carte header .grandir { flex: 1; min-width: 0; }

/* Un jour de menu : la date en puce, les plats en dessous. */
.jour-menu { display: flex; gap: var(--e3); padding: 12px 0; border-bottom: 1px solid var(--line2); }
.jour-menu:last-child { border-bottom: 0; }
.date-puce { flex: 0 0 48px; width: 48px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 6px 0; border-radius: var(--r-puce); background: var(--soft); color: var(--bleu); line-height: 1.1; height: fit-content; }
.date-puce strong { font-family: var(--titres); font-size: 18px; }
.date-puce span { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.jour-menu.aujourdhui .date-puce { background: var(--degrade); color: #fff; }
.jour-menu .plats { flex: 1; min-width: 0; display: grid; gap: 3px; }
.jour-menu .plats strong { font-size: 15px; letter-spacing: -.02em; }
.jour-menu .plats span { font-size: 13.5px; color: var(--txt2); }
.jour-menu .allergenes { margin-top: 6px; font-size: 12.5px; color: var(--attention); background: var(--attention-bg); padding: 4px 10px; border-radius: 999px; display: inline-block; }

/* Les actualités : date, titre, texte. */
.actualites { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--e4); }
.actualite { display: flex; flex-direction: column; gap: 8px; }
.actualite .date { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--bleu); }
.actualite h3 { font-size: 18px; }
.actualite p { color: var(--txt2); font-size: 15px; white-space: pre-line; }

.vide { text-align: center; padding: var(--e6) var(--e4); color: var(--txt3); }
.vide svg { width: 34px; height: 34px; margin-bottom: 8px; opacity: .6; }
.maj { font-size: 12.5px; color: var(--txt3); display: inline-flex; align-items: center; gap: 6px; }
.maj svg { width: 14px; height: 14px; flex: 0 0 14px; }
.bandeau-demo { background: var(--attention-bg); color: var(--attention); font-weight: 700; font-size: 13.5px; text-align: center; padding: 8px var(--e4); }

/* Les horaires, en lignes régulières. */
.horaires { display: grid; gap: 2px; }
.horaires div { display: flex; justify-content: space-between; gap: var(--e3); padding: 8px 10px; border-radius: var(--r-puce); font-size: 14.5px; }
.horaires div:nth-child(odd) { background: var(--soft2); }
.horaires .ferme { color: var(--txt3); }
.horaires strong { font-variant-numeric: tabular-nums; }

/* Les maquettes d'écran dans les étapes : un téléphone, ce n'est pas une
   affiche. Sans bride, chaque étape faisait une page à elle seule et le texte
   paraissait minuscule à côté. */
.etape .illus { width: min(100%, 268px); max-height: 430px; margin-inline: auto; }
.heros-scene .illus { width: min(100%, 380px); }
@media (max-width: 800px) { .etape .illus { width: min(72%, 240px); max-height: 380px; } }

/* ------------------------------------------------------------------ */
/* Maquettes d'écran                                                    */
/* ------------------------------------------------------------------ */
/* Les écrans ne sont pas des images : ce sont les vrais composants de
   l'application, refaits en HTML avec ses jetons de couleur et ses deux
   rayons. Net à tous les zooms, rien à charger, et quand la charte de
   l'application bouge celle du site bouge avec. */

.tel { width: min(100%, 272px); margin-inline: auto; }
.tel-cadre {
  border-radius: 38px; padding: 9px; background: #0E1C28;
  box-shadow: 0 28px 56px -26px rgba(14, 28, 40, .68), 0 0 0 1px rgba(255, 255, 255, .05) inset;
}
.tel-ecran {
  position: relative; border-radius: 30px; overflow: hidden; background: var(--bg);
  aspect-ratio: 9 / 18.6; font-size: 9.5px; line-height: 1.35;
}
.tel-encoche {
  position: absolute; top: 7px; left: 50%; transform: translateX(-50%);
  width: 64px; height: 15px; border-radius: 999px; background: #0E1C28; z-index: 3;
}
.tel-legende { margin-top: 14px; text-align: center; font-size: 12px; color: var(--txt3); font-weight: 700; }

/* L'en-tête d'ambiance : le paysage dessiné, le titre posé dessus. */
.mq-ambi { position: relative; padding: 26px 13px 13px; color: #fff; isolation: isolate; }
.mq-ambi svg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
.mq-ambi::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 58%; z-index: -1;
  background: linear-gradient(180deg, transparent, rgba(8, 22, 40, .55));
}
.mq-ambi .haut { display: flex; align-items: center; gap: 7px; }
.mq-ambi .ic {
  width: 20px; height: 20px; border-radius: 999px; display: grid; place-items: center;
  background: rgba(255, 255, 255, .22); border: 1px solid rgba(255, 255, 255, .3);
}
.mq-ambi .ic svg { position: static; width: 11px; height: 11px; }
.mq-ambi .exergue {
  font-size: 6.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  padding-bottom: 2px; border-bottom: 1px solid rgba(255, 255, 255, .4);
}
.mq-ambi .pousse { margin-left: auto; }
.mq-ambi h4 { font-size: 15px; margin-top: 22px; color: #fff; text-shadow: 0 1px 6px rgba(8, 22, 40, .5); }
.mq-ambi p {
  font-size: 8.5px; margin-top: 2px; color: rgba(255, 255, 255, .95);
  text-shadow: 0 1px 3px rgba(8, 22, 40, .8), 0 2px 10px rgba(8, 22, 40, .6);
}

.mq-corps { padding: 10px; display: grid; gap: 8px; }

/* Les listes groupées de l'application : un cadre, des lignes. */
.mq-liste { border: 1px solid var(--line); background: #fff; border-radius: 14px; overflow: hidden; }
.mq-ligne { display: flex; align-items: center; gap: 7px; padding: 7px 9px; }
.mq-ligne + .mq-ligne { border-top: 1px solid var(--line2); }
.mq-ligne .corps { flex: 1; min-width: 0; }
.mq-tuile > span:last-child { min-width: 0; }
.mq-ligne .t { display: block; font-weight: 700; font-size: 9.5px; color: var(--txt); }
.mq-ligne .s { display: block; font-size: 8px; color: var(--txt2); }
.mq-av {
  width: 23px; height: 23px; border-radius: 999px; flex: 0 0 23px; display: grid; place-items: center;
  font-weight: 800; font-size: 9px; color: #fff;
}
.mq-pastille {
  width: 22px; height: 22px; border-radius: 8px; flex: 0 0 22px; display: grid; place-items: center; font-size: 11px;
}
.mq-etat {
  font-size: 6.8px; font-weight: 800; padding: 2px 6px; border-radius: 999px; white-space: nowrap;
}
.mq-etat.present { background: var(--vert-bg); color: var(--vert); }
.mq-etat.attendu { background: var(--soft); color: var(--bleu-f); }
.mq-etat.parti { background: var(--line2); color: var(--txt3); }

.mq-recherche {
  display: flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: #fff;
  border-radius: 14px; padding: 6px 9px; font-size: 8.5px; color: var(--txt3);
}
.mq-bouton {
  border-radius: 14px; padding: 9px; text-align: center; font-weight: 800; font-size: 10px;
  background: var(--degrade); color: #fff;
}
.mq-bouton.vert { background: linear-gradient(140deg, #3E9B78, #2A775B); }

.mq-carte { border: 1px solid var(--line); background: #fff; border-radius: 14px; overflow: hidden; }
.mq-carte .chapeau { padding: 8px 10px; background: var(--degrade-doux); }
.mq-carte .chapeau strong { font-family: var(--titres); font-size: 11px; display: block; }
.mq-carte .chapeau span { font-size: 7.5px; color: var(--txt2); display: inline-block; margin-top: 2px; }
.mq-carte .dedans { padding: 8px; display: grid; gap: 6px; }

.mq-tuiles { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.mq-tuile {
  display: flex; align-items: center; gap: 5px; padding: 6px 7px; border-radius: 10px;
  background: var(--soft2);
}
.mq-tuile .emo { font-size: 11px; }
.mq-tuile .t { display: block; font-weight: 700; font-size: 8.5px; }
.mq-tuile .s { display: block; font-size: 7px; color: var(--txt2); }

.mq-savoir { border: 1px solid #F0D9A4; background: var(--jaune-bg); border-radius: 10px; padding: 6px 8px; }
.mq-savoir strong { color: var(--jaune); font-size: 8px; display: block; }
.mq-savoir span { font-size: 7.5px; color: var(--txt); display: block; margin-top: 2px; }

.mq-humeur { display: flex; align-items: center; gap: 7px; background: var(--soft2); border-radius: 10px; padding: 6px 8px; }
.mq-humeur .emo { font-size: 16px; }

.mq-grand-av {
  width: 62px; height: 62px; border-radius: 999px; margin: 0 auto; display: grid; place-items: center;
  font-family: var(--titres); font-weight: 800; font-size: 22px; color: #fff;
  background: linear-gradient(140deg, #2E88D6, #146BB8); box-shadow: 0 8px 20px -10px rgba(20, 107, 184, .8);
}

.mq-nav {
  position: absolute; left: 9px; right: 9px; bottom: 9px; display: flex; justify-content: space-around;
  background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 6px 4px;
  box-shadow: 0 8px 20px -12px rgba(14, 28, 40, .4);
}
.mq-nav span { font-size: 6.5px; font-weight: 700; color: var(--txt3); text-align: center; display: grid; gap: 2px; justify-items: center; }
.mq-nav span i { width: 12px; height: 12px; border-radius: 4px; background: var(--line2); display: block; }
.mq-nav span.actif { color: var(--bleu); }
.mq-nav span.actif i { background: var(--bleu); }


/* Le logo de l'application, en grand sur l'accueil. Il n'est pas dans un
   cadre : il flotte sur un halo aux trois couleurs du logo, qui le decolle du
   bandeau sans lui poser de bord. */
.heros-scene { position: relative; }
.heros-scene::before {
  content: ""; position: absolute; inset: 6%; border-radius: 50%; z-index: 0;
  background: radial-gradient(circle at 50% 44%, rgba(252, 180, 24, .38), transparent 62%),
              radial-gradient(circle at 30% 70%, rgba(62, 155, 120, .34), transparent 60%),
              radial-gradient(circle at 72% 68%, rgba(127, 192, 240, .38), transparent 60%);
  filter: blur(18px);
}
.logo-geant {
  position: relative; z-index: 1;
  width: min(100%, 340px); height: auto; margin-inline: auto;
  border-radius: 26%;
  box-shadow: 0 26px 60px -26px rgba(8, 30, 52, .65);
}
@media (max-width: 880px) { .logo-geant { width: min(62%, 260px); } }


/* Le bouton de remontee. Discret : petit, translucide, dans le coin, et
   absent tant qu'on n'a pas descendu. Il devient franc au survol. */
.remonter {
  position: fixed; right: 18px; bottom: 18px; z-index: 30;
  width: 42px; height: 42px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .3);
  background: rgba(12, 74, 128, .78); color: #fff; cursor: pointer;
  display: grid; place-items: center;
  backdrop-filter: blur(10px) saturate(140%);
  box-shadow: 0 10px 26px -12px rgba(8, 30, 52, .7);
  opacity: .72; transition: opacity .18s ease, transform .18s ease, background-color .18s ease;
}
.remonter:hover { opacity: 1; transform: translateY(-2px); background: var(--bleu); }
.remonter:focus-visible { opacity: 1; }
.remonter svg { width: 19px; height: 19px; }
.remonter[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .remonter { transition: none; } }
@media (max-width: 600px) { .remonter { right: 14px; bottom: 14px; width: 40px; height: 40px; } }

/* Une section de la page Fonctionnalités : le texte et l'écran côte à côte,
   et on alterne les côtés pour que l'oeil ne tombe pas dans une colonne. */
.bloc-fonction.duo {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(24px, 4vw, 56px); align-items: center;
}
.bloc-fonction.duo:nth-of-type(even) .fonction-texte { order: 2; }
.fonction-ecran .tel { width: min(100%, 244px); }
@media (max-width: 860px) {
  .bloc-fonction.duo { grid-template-columns: 1fr; }
  .bloc-fonction.duo:nth-of-type(even) .fonction-texte { order: 0; }
  .fonction-ecran .tel { width: min(66%, 220px); }
}

/* ------------------------------------------------------------ tarifs (29/09) */
.offre { padding: clamp(22px, 3.4vw, 38px); }
.offre-tete { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--e5); }
.offre-prix { margin: 0; display: flex; align-items: baseline; gap: 8px; }
.offre-prix strong { font-family: var(--titres); font-size: clamp(44px, 6vw, 60px); font-weight: 800; letter-spacing: -.04em; line-height: 1; color: var(--txt); }
.offre-prix span { font-weight: 700; color: var(--txt); }
.offre-accroche { font-size: clamp(22px, 2.6vw, 28px); }
.offre-titre { font-size: 20px; margin-top: var(--e6); padding-top: var(--e5); border-top: var(--filet); }
.offre-liste { list-style: none; padding: 0; margin: var(--e4) 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 28px; }
.offre-liste li { position: relative; padding-left: 30px; display: grid; gap: 2px; align-content: start; }
.offre-liste li::before { content: ""; position: absolute; left: 0; top: 2px; width: 20px; height: 20px; border-radius: 50%; background: var(--vert-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232A775B' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12 4 4 8-8'/%3E%3C/svg%3E") center / 12px no-repeat; }
.offre-liste strong { color: var(--txt); }
.offre-liste span { color: var(--txt2); font-size: 15px; }
.offre-note { margin-top: var(--e4); font-size: 14.5px; }
.paliers { list-style: none; padding: 0; margin: 16px 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.paliers li { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border-radius: 20px; border: 1px solid rgba(20, 107, 184, .14); background: #F5F9FD; }
.paliers li:first-child { background: #fff; }
.paliers span { font-size: 14px; color: var(--txt2); }
.paliers strong { font-family: var(--titres); font-size: 26px; font-variant-numeric: tabular-nums; color: var(--txt); }
.paliers em { font-style: normal; font-size: 13px; font-weight: 800; color: var(--vert); }
.paliers-note { margin-top: 10px; font-size: 14px; }
@media (max-width: 720px) { .paliers { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .offre-liste { grid-template-columns: 1fr; } .offre-tete .bouton { width: 100%; justify-content: center; } }
.lien-fleche { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--bleu); }
.lien-fleche svg { width: 16px; height: 16px; }

.galerie { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(22px, 3vw, 36px); }
.galerie .carte-capture h3 { font-size: 19px; margin-top: 16px; }
.galerie .carte-capture p { color: var(--txt2); margin-top: 6px; font-size: 15.5px; }
@media (max-width: 760px) { .galerie { grid-template-columns: 1fr; } }

.notice-captures { font-size: 13.5px; color: var(--txt3); margin-top: 18px; }

.faq { display: grid; gap: 12px; }
.faq details { background: var(--card); border: var(--filet); border-radius: var(--r-bloc); padding: 16px 20px; }
.faq summary { cursor: pointer; font-weight: 700; color: var(--txt); list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 20px; line-height: 1; color: var(--bleu); }
.faq details[open] summary::after { content: "−"; }
.faq details p { margin-top: 10px; color: var(--txt2); }

/* =====================================================================
   LES APPAREILS (30/09) : de vraies captures dans des cadres soignés.
   Fenêtre de navigateur façon macOS, ordinateur portable pour l'accueil,
   téléphone avec barre d'état et îlot. Les noms visibles sont fictifs.
   ===================================================================== */

/* ---- la fenêtre ---- */
.capture {
  position: relative; margin: 0; border-radius: 14px; background: #fff; overflow: hidden;
  border: 1px solid rgba(14, 28, 40, .09);
  box-shadow: 0 50px 90px -40px rgba(12, 74, 128, .55), 0 18px 36px -18px rgba(14, 28, 40, .28), 0 0 0 1px rgba(255, 255, 255, .6) inset;
  transform: perspective(1400px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(0);
  transition: transform .6s cubic-bezier(.2, .8, .2, 1), box-shadow .6s;
  will-change: transform;
}
.capture:hover { box-shadow: 0 70px 110px -40px rgba(12, 74, 128, .6), 0 22px 40px -18px rgba(14, 28, 40, .3); }
.capture::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .4s;
  background: radial-gradient(420px circle at var(--gx, 50%) var(--gy, 0%), rgba(255, 255, 255, .38), transparent 60%);
}
.capture:hover::after { opacity: 1; }
.capture-barre {
  position: relative; display: flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px;
  background: linear-gradient(180deg, #FAFBFC, #EDF1F5); border-bottom: 1px solid #DDE4EA;
}
.capture-barre i { width: 11px; height: 11px; border-radius: 50%; background: #FF5F57; box-shadow: inset 0 0 0 .5px rgba(0, 0, 0, .12); }
.capture-barre i:nth-child(2) { background: #FEBC2E; }
.capture-barre i:nth-child(3) { background: #28C840; }
.capture-barre span {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: 6px; height: 21px; padding: 0 12px; max-width: 58%;
  border-radius: 7px; background: #fff; border: 1px solid #E1E7EC; color: #6B7F8D;
  font-size: 11px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.capture-barre span::before {
  content: ""; width: 9px; height: 9px; flex: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232A775B' stroke-width='3' stroke-linecap='round'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E") center / contain no-repeat;
}
.capture a { display: block; cursor: zoom-in; }
.capture img { display: block; width: 100%; height: auto; }
.capture-legende { font-size: 14px; color: var(--txt2); text-align: center; margin-top: 16px; font-weight: 600; }

/* ---- le téléphone ---- */
.telephone {
  position: relative; width: 100%; max-width: 280px; margin-inline: auto; padding: 9px;
  border-radius: 48px;
  background: linear-gradient(150deg, #3B4652 0%, #121A22 32%, #0A1016 60%, #2A333D 100%);
  box-shadow:
    inset 0 0 0 1.5px rgba(255, 255, 255, .16), inset 0 0 0 3px #05090D,
    0 60px 90px -40px rgba(12, 74, 128, .6), 0 22px 36px -20px rgba(0, 0, 0, .55);
  transform: perspective(1400px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .6s cubic-bezier(.2, .8, .2, 1);
  will-change: transform;
}
.telephone::before, .telephone::after {
  content: ""; position: absolute; width: 3px; border-radius: 2px; background: linear-gradient(90deg, #1b232b, #3b4652);
}
.telephone::before { left: -2px; top: 22%; height: 11%; box-shadow: 0 64px 0 #232c35; }
.telephone::after { right: -2px; top: 28%; height: 16%; }
.telephone-ecran { position: relative; border-radius: 39px; overflow: hidden; background: #F4F8FB; cursor: zoom-in; }
.telephone-statut {
  position: relative; height: 34px; display: flex; align-items: center; justify-content: space-between;
  padding: 0 24px 0 28px; font: 700 12px/1 -apple-system, "Segoe UI", sans-serif; color: #0E1C28; background: #F4F8FB;
}
.telephone-statut .ilot { position: absolute; left: 50%; top: 8px; transform: translateX(-50%); width: 34%; height: 21px; border-radius: 12px; background: #05090D; }
.telephone-statut .icones { display: inline-flex; gap: 5px; align-items: center; }
.telephone-statut .icones b { display: block; width: 3px; border-radius: 1px; background: #0E1C28; }
.telephone-statut .icones b:nth-child(1) { height: 5px; } .telephone-statut .icones b:nth-child(2) { height: 7px; }
.telephone-statut .icones b:nth-child(3) { height: 9px; } .telephone-statut .icones b:nth-child(4) { height: 11px; }
.telephone-statut .icones em { display: block; width: 22px; height: 11px; border-radius: 3px; border: 1.5px solid #0E1C28; margin-left: 4px; position: relative; }
.telephone-statut .icones em::before { content: ""; position: absolute; inset: 1.5px; right: 5px; background: #0E1C28; border-radius: 1px; }
.telephone-ecran img { display: block; width: 100%; height: auto; }
.telephone-ecran::after {
  content: ""; position: absolute; left: 50%; bottom: 7px; transform: translateX(-50%);
  width: 36%; height: 4px; border-radius: 3px; background: rgba(14, 28, 40, .55);
}
.telephones { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(16px, 2.2vw, 30px); align-items: start; }
.telephones .telephone { padding: 7px; border-radius: 36px; }
.telephones .telephone-ecran { border-radius: 30px; }
.telephones .telephone-statut { height: 26px; font-size: 10px; padding: 0 16px 0 20px; }
.telephones .telephone-statut .ilot { top: 6px; height: 16px; }
.telephones > div:nth-child(even) { margin-top: 40px; }
@media (max-width: 1000px) { .telephones { grid-template-columns: repeat(3, minmax(0, 1fr)); } .telephones > div:nth-child(even) { margin-top: 0; } }
@media (max-width: 600px) { .telephones { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.etape .telephone { max-width: 262px; }

/* ---- l'ordinateur portable, pour l'accueil ---- */
.scene-appareils { position: relative; padding: 10px 0 40px; }
.portable { position: relative; width: 100%; }
.portable-cadre {
  position: relative; padding: 2.2% 2.2% 3%; border-radius: 20px 20px 8px 8px;
  background: linear-gradient(180deg, #1F2830, #0A1016);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .12), 0 60px 100px -40px rgba(5, 20, 40, .8);
}
.portable-cadre::before { content: ""; position: absolute; top: .9%; left: 50%; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: #2B3640; box-shadow: inset 0 0 0 1.5px #0A1016; }
.portable-ecran { border-radius: 6px; overflow: hidden; background: #fff; cursor: zoom-in; }
.portable-ecran img { display: block; width: 100%; height: auto; }
.portable-base {
  position: relative; height: 18px; margin: 0 -7%; border-radius: 3px 3px 22px 22px;
  background: linear-gradient(180deg, #E6EBEF 0%, #C7D0D8 55%, #9AA6B1 100%);
  box-shadow: 0 30px 40px -20px rgba(0, 0, 0, .55);
}
.portable-base::before { content: ""; position: absolute; left: 50%; top: 0; width: 16%; height: 7px; transform: translateX(-50%); border-radius: 0 0 10px 10px; background: linear-gradient(180deg, #AEB8C1, #C9D1D8); }
.scene-appareils .telephone-flottant { position: absolute; right: -4%; bottom: -6%; width: 29%; min-width: 120px; z-index: 2; }
.scene-appareils .telephone-flottant .telephone { padding: 6px; border-radius: 30px; }
.scene-appareils .telephone-flottant .telephone-ecran { border-radius: 25px; }
.scene-appareils .telephone-flottant .telephone-statut { height: 20px; font-size: 8px; padding: 0 12px 0 16px; }
.scene-appareils .telephone-flottant .telephone-statut .ilot { top: 5px; height: 12px; }
.heros .conteneur:has(.scene-appareils) { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); }
@media (max-width: 880px) {
  .heros .conteneur:has(.scene-appareils) { grid-template-columns: 1fr; }
  .scene-appareils { order: 2; margin-top: 10px; }
  .scene-appareils .telephone-flottant { right: -2%; width: 30%; }
}

/* =====================================================================
   LE MOUVEMENT (30/09) : entrées au défilement, appareils qui flottent,
   inclinaison à la souris, reflets, compteurs, bandeau défilant.
   ===================================================================== */
.progression { position: fixed; left: 0; top: 0; height: 3px; width: 100%; z-index: 80; transform-origin: 0 50%; transform: scaleX(var(--p, 0)); background: linear-gradient(90deg, #FCB418, #2E88D6, #7C6CF0); pointer-events: none; }

html.mouvement .revele { opacity: 0; transform: translateY(34px) scale(.985); filter: blur(6px); transition: opacity .9s cubic-bezier(.2, .8, .2, 1), transform .9s cubic-bezier(.2, .8, .2, 1), filter .9s; transition-delay: var(--d, 0ms); }
html.mouvement .revele.vu { opacity: 1; transform: none; filter: none; }
html.mouvement .revele.depuis-gauche { transform: translateX(-46px); }
html.mouvement .revele.depuis-droite { transform: translateX(46px) rotate(1.5deg); }
html.mouvement .revele.depuis-gauche.vu, html.mouvement .revele.depuis-droite.vu { transform: none; }

/* Le titre de l'accueil arrive mot par mot. */
.mot { display: inline-block; opacity: 0; transform: translateY(.6em) rotate(3deg); animation: mot-entre .8s cubic-bezier(.2, .8, .2, 1) forwards; animation-delay: var(--d, 0ms); }
@keyframes mot-entre { to { opacity: 1; transform: none; } }

/* Les appareils flottent. */
@keyframes flotte { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@keyframes flotte-lent { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-20px) rotate(1deg); } }
.scene-appareils .portable { animation: flotte 7s ease-in-out infinite; }
.scene-appareils .telephone-flottant { animation: flotte-lent 6s ease-in-out infinite; animation-delay: -2s; }
.telephones > div { animation: flotte 6.5s ease-in-out infinite; }
.telephones > div:nth-child(2) { animation-delay: -1.2s; } .telephones > div:nth-child(3) { animation-delay: -2.4s; }
.telephones > div:nth-child(4) { animation-delay: -3.6s; } .telephones > div:nth-child(5) { animation-delay: -4.8s; }
.etape .telephone, .fonction-ecran .telephone { animation: flotte 7.5s ease-in-out infinite; }

/* Le ciel du bandeau bouge doucement. */
.bandeau::after {
  content: ""; position: absolute; inset: -30%; pointer-events: none; opacity: .55;
  background:
    radial-gradient(28% 34% at 20% 30%, rgba(252, 180, 24, .35), transparent 70%),
    radial-gradient(30% 36% at 80% 20%, rgba(124, 108, 240, .38), transparent 70%),
    radial-gradient(34% 40% at 60% 90%, rgba(62, 155, 120, .32), transparent 70%);
  animation: ciel 18s ease-in-out infinite alternate;
}
.bandeau > .conteneur { position: relative; z-index: 1; }
@keyframes ciel { 0% { transform: translate3d(-4%, -2%, 0) rotate(0deg); } 50% { transform: translate3d(4%, 3%, 0) rotate(8deg); } 100% { transform: translate3d(-2%, 5%, 0) rotate(-6deg); } }

/* Les boutons pleins ont un reflet qui passe. */
.bouton { position: relative; overflow: hidden; }
.bouton::after { content: ""; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .45), transparent); transform: skewX(-18deg); transition: left .7s cubic-bezier(.2, .8, .2, 1); pointer-events: none; }
.bouton:hover::after { left: 130%; }
.bouton.plein { background-size: 180% 180%; animation: degrade 6s ease-in-out infinite; }
@keyframes degrade { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

/* Les cartes se soulèvent. */
.carte.fonction, .carte-capture, .carte.chiffre { transition: transform .45s cubic-bezier(.2, .8, .2, 1), box-shadow .45s; }
.carte.fonction:hover, .carte.chiffre:hover { transform: translateY(-6px); box-shadow: var(--sh-lift); }
.carte.fonction .pastille { transition: transform .5s cubic-bezier(.3, 1.6, .5, 1); }
.carte.fonction:hover .pastille { transform: rotate(-8deg) scale(1.12); }

/* Le bandeau des mots qui défile. */
.defile { overflow: hidden; border-block: var(--filet); background: #fff; padding: 16px 0; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.defile-piste { display: flex; width: max-content; gap: 14px; animation: defile 42s linear infinite; }
.defile:hover .defile-piste { animation-play-state: paused; }
.defile-piste span { display: inline-flex; align-items: center; gap: 10px; padding: 9px 16px; border-radius: 999px; background: var(--soft2); border: var(--filet); font-weight: 700; font-size: 14.5px; color: var(--bleu-f); white-space: nowrap; }
.defile-piste span::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--jaune-a); }
.defile-piste span:nth-child(3n+2)::before { background: var(--vert2); }
.defile-piste span:nth-child(3n)::before { background: var(--violet); }
@keyframes defile { to { transform: translateX(-50%); } }

/* =====================================================================
   LA VISIONNEUSE : une capture s'ouvre en grand. Fermer avec la croix,
   en cliquant à côté, ou avec Échap. Flèches pour passer à la suivante.
   ===================================================================== */
.visionneuse { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: clamp(14px, 4vw, 56px); background: rgba(6, 18, 30, .78); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); opacity: 0; visibility: hidden; transition: opacity .35s, visibility .35s; }
.visionneuse.ouverte { opacity: 1; visibility: visible; }
.visionneuse figure { margin: 0; max-width: min(1280px, 100%); max-height: 100%; display: grid; gap: 14px; justify-items: center; transform: scale(.92) translateY(18px); transition: transform .45s cubic-bezier(.2, .8, .2, 1); }
.visionneuse.ouverte figure { transform: none; }
.visionneuse img { display: block; max-width: 100%; max-height: calc(100vh - 150px); width: auto; height: auto; border-radius: 12px; background: #fff; box-shadow: 0 40px 100px -20px rgba(0, 0, 0, .7); }
.visionneuse figcaption { color: #fff; font-weight: 600; font-size: 15px; text-align: center; max-width: 720px; }
.visionneuse-fermer, .visionneuse-nav { position: absolute; display: grid; place-items: center; border: 0; cursor: pointer; color: #fff; background: rgba(255, 255, 255, .14); border-radius: 50%; transition: background .2s, transform .2s; }
.visionneuse-fermer { top: 18px; right: 18px; width: 48px; height: 48px; }
.visionneuse-nav { top: 50%; width: 50px; height: 50px; margin-top: -25px; }
.visionneuse-nav.prec { left: 18px; } .visionneuse-nav.suiv { right: 18px; }
.visionneuse-fermer:hover, .visionneuse-nav:hover { background: rgba(255, 255, 255, .26); transform: scale(1.06); }
.visionneuse-fermer:focus-visible, .visionneuse-nav:focus-visible { outline: 3px solid #FCB418; outline-offset: 2px; }
.visionneuse svg { width: 24px; height: 24px; }
@media (max-width: 600px) { .visionneuse-nav { top: auto; bottom: 18px; margin-top: 0; } }
html.bloque { overflow: hidden; }
html.mouvement .revele.fini { transition: transform .45s cubic-bezier(.2, .8, .2, 1), box-shadow .45s; transition-delay: 0ms; }
html.mouvement .carte.fonction.fini:hover, html.mouvement .carte.chiffre.fini:hover { transform: translateY(-6px); }
main { overflow-x: clip; }
@media (max-width: 860px) { html.mouvement .revele.depuis-gauche, html.mouvement .revele.depuis-droite { transform: translateY(34px); } }

/* =====================================================================
   PREMIUM (30/09) : nuit profonde, aurores, bento, frise, rôles.
   ===================================================================== */
:root {
  --nuit: #061A2E; --nuit2: #0A2745; --nuit3: #10365E;
  --or: linear-gradient(135deg, #FFD36B 0%, #FCB418 45%, #F29A1F 100%);
  --aurore: radial-gradient(40% 50% at 15% 20%, rgba(46, 136, 214, .45), transparent 70%),
            radial-gradient(35% 45% at 85% 15%, rgba(124, 108, 240, .40), transparent 70%),
            radial-gradient(40% 50% at 70% 95%, rgba(62, 155, 120, .30), transparent 70%),
            radial-gradient(30% 40% at 30% 100%, rgba(252, 180, 24, .22), transparent 70%);
}
body { background: #F6F8FB; }
h2 { font-size: clamp(30px, 4.1vw, 50px); letter-spacing: -.035em; line-height: 1.05; }
.tete-section { max-width: 780px; }
.tete-section.centre { margin-inline: auto; text-align: center; }
.tete-section p { font-size: 18px; line-height: 1.6; }
.centre { text-align: center; }
.sur-clair .deux-tons em, .deux-tons.sur-clair em { background: linear-gradient(120deg, #146BB8 10%, #7C6CF0 90%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.oeil { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; background: #fff; border: 1px solid #DCE6F0; color: var(--bleu-f); font-size: 12.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 18px; box-shadow: 0 6px 16px -10px rgba(12, 74, 128, .4); }
.oeil::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--jaune-a); box-shadow: 0 0 0 4px rgba(252, 180, 24, .2); }
.oeil.clair { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .2); color: #fff; box-shadow: none; }

/* En-tête et bandeaux : la nuit */
.tete { background: rgba(6, 26, 46, .72); border-bottom-color: rgba(255, 255, 255, .08); }
.bandeau { background: var(--nuit); }
.bandeau::before { z-index: 0; background: var(--aurore); }
.bandeau::after { opacity: .9; }
.bandeau > .conteneur::before {
  content: ""; position: absolute; inset: -40px -200px; z-index: -1; pointer-events: none; opacity: .35;
  background-image: linear-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .06) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(60% 70% at 50% 40%, #000, transparent 75%); -webkit-mask-image: radial-gradient(60% 70% at 50% 40%, #000, transparent 75%);
}
.bandeau .deux-tons em { background: var(--or); -webkit-background-clip: text; background-clip: text; color: transparent; }
.bouton.or { background: var(--or); color: #1B1300; box-shadow: 0 14px 30px -12px rgba(242, 154, 31, .75), inset 0 1px 0 rgba(255, 255, 255, .5); }
.bouton.or:hover { box-shadow: 0 18px 36px -12px rgba(242, 154, 31, .9), inset 0 1px 0 rgba(255, 255, 255, .5); }
.bouton.fantome { backdrop-filter: blur(8px); }

/* Le héros */
.heros-premium .conteneur { padding-block: clamp(56px, 8vw, 110px) clamp(64px, 9vw, 120px); }
.heros-premium h1 { font-size: clamp(40px, 5.8vw, 76px); line-height: 1; letter-spacing: -.045em; }
.heros-premium .chapeau { font-size: clamp(17px, 1.6vw, 20px); color: rgba(255, 255, 255, .78); max-width: 560px; }
.pastille-nouveau { display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px 6px 6px; border-radius: 999px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16); color: rgba(255, 255, 255, .9); font-size: 13.5px; font-weight: 700; margin-bottom: 26px; backdrop-filter: blur(8px); }
.pastille-nouveau:hover { text-decoration: none; background: rgba(255, 255, 255, .14); }
.pastille-nouveau b { padding: 3px 10px; border-radius: 999px; background: var(--or); color: #1B1300; font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase; }
.pastille-nouveau svg { width: 15px; height: 15px; }
.confiance { list-style: none; padding: 0; margin: 30px 0 0; display: flex; flex-wrap: wrap; gap: 10px 22px; }
.confiance li { display: inline-flex; align-items: center; gap: 8px; color: rgba(255, 255, 255, .72); font-size: 14px; font-weight: 600; }
.confiance li::before { content: ""; width: 18px; height: 18px; border-radius: 50%; background: rgba(62, 155, 120, .25) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237BE0B4' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12 4 4 8-8'/%3E%3C/svg%3E") center / 11px no-repeat; }
.scene-appareils .lueur { position: absolute; inset: 8% 4% 0; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, rgba(46, 136, 214, .55), rgba(124, 108, 240, .25) 55%, transparent); filter: blur(30px); animation: pulse-lueur 6s ease-in-out infinite; }
@keyframes pulse-lueur { 0%, 100% { opacity: .75; transform: scale(1); } 50% { opacity: 1; transform: scale(1.06); } }
.bulle { position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: 9px; padding: 10px 14px; border-radius: 14px; background: rgba(255, 255, 255, .92); color: var(--txt); font-size: 13px; font-weight: 700; box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .5); backdrop-filter: blur(10px); white-space: nowrap; }
.bulle .point { width: 9px; height: 9px; border-radius: 50%; background: var(--vert2); box-shadow: 0 0 0 4px rgba(62, 155, 120, .2); }
.bulle .point.violet { background: var(--violet); box-shadow: 0 0 0 4px rgba(124, 108, 240, .2); }
.bulle-a { left: -6%; top: 14%; animation: flotte 5.5s ease-in-out infinite; }
.bulle-b { left: 8%; bottom: 4%; animation: flotte 6.5s ease-in-out infinite; animation-delay: -2.5s; }
@media (max-width: 880px) { .bulle-a { left: 0; top: -2%; } .bulle-b { left: 2%; } }
/* 03/10 : les notifications vivent sous les appareils, jamais par-dessus. */
.heros-visuel { min-width: 0; }
.bulles-ligne { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 44px; }
.bulles-ligne .bulle { position: static; animation: flotte 6s ease-in-out infinite; }
.bulles-ligne .bulle + .bulle { animation-delay: -3s; }

/* Le défilé passe au blanc chaud */
.defile { background: #fff; border-color: #E6EDF4; }

/* Le bento */
.section-bento { background: radial-gradient(60% 50% at 50% 0%, #EAF2FB, transparent 70%), #F6F8FB; }
.bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(250px, auto); gap: 18px; }
.tuile {
  position: relative; display: flex; flex-direction: column; overflow: hidden; border-radius: 28px; padding: 28px 28px 0;
  background: #fff; border: 1px solid #E3EBF3; color: var(--txt); isolation: isolate;
  box-shadow: 0 1px 2px rgba(14, 28, 40, .04), 0 30px 60px -40px rgba(12, 74, 128, .35);
  transition: transform .5s cubic-bezier(.2, .8, .2, 1), box-shadow .5s, border-color .5s;
}
.tuile:hover { text-decoration: none; transform: translateY(-6px); border-color: #C9DAEC; box-shadow: 0 1px 2px rgba(14, 28, 40, .04), 0 40px 80px -40px rgba(12, 74, 128, .5); }
html.mouvement .tuile.fini:hover { transform: translateY(-6px); }
.tuile::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .5s; background: radial-gradient(500px circle at var(--gx, 50%) var(--gy, 0%), rgba(46, 136, 214, .09), transparent 60%); }
.tuile:hover::before { opacity: 1; }
.tuile-grande { grid-column: span 2; grid-row: span 2; }
.tuile-large { grid-column: span 2; }
.tuile-texte h3 { font-size: clamp(20px, 1.8vw, 25px); letter-spacing: -.03em; line-height: 1.15; margin-top: 14px; }
.tuile-grande .tuile-texte h3 { font-size: clamp(26px, 2.6vw, 36px); }
.tuile-texte p { margin-top: 10px; color: var(--txt2); font-size: 15.5px; line-height: 1.55; max-width: 460px; }
.tuile-tag { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px 5px 8px; border-radius: 999px; font-size: 12.5px; font-weight: 800; background: var(--soft); color: var(--bleu-f); }
.tuile-tag svg { width: 15px; height: 15px; }
.tuile-tag.violet { background: var(--violet-bg); color: #5B4BD0; }
.tuile-tag.vert { background: var(--vert-bg); color: var(--vert); }
.tuile-tag.jaune { background: var(--jaune-bg); color: var(--jaune); }
.tuile-tag.rose { background: var(--rose-bg); color: var(--rose); }
.tuile-tag.blanc { background: rgba(255, 255, 255, .18); color: #fff; }
.tuile-visuel { position: relative; margin-top: auto; padding-top: 22px; }
.tuile-visuel img {
  display: block; width: 118%; max-width: none; height: 220px; object-fit: cover; object-position: 0 0;
  border-radius: 14px 14px 0 0; border: 1px solid #E1E9F1; border-bottom: 0;
  box-shadow: 0 -10px 40px -20px rgba(12, 74, 128, .35);
  transition: transform .7s cubic-bezier(.2, .8, .2, 1);
}
.tuile:hover .tuile-visuel img { transform: translateY(-8px) scale(1.02); }
.tuile-grande .tuile-visuel img { height: 360px; }
.pos-assistant img { object-position: 22% 62%; width: 150%; }
.pos-prev img { object-position: 35% 42%; width: 150%; }
.pos-fact img { object-position: 35% 52%; width: 150%; }
.pos-site img { object-position: 30% 60%; width: 190%; height: 170px; }
.pos-code img, .pos-equipe img { width: 78%; margin-inline: auto; height: 190px; object-position: 50% 30%; border-radius: 24px 24px 0 0; border: 6px solid #0E1419; border-bottom: 0; }
.pos-equipe img { object-position: 50% 58%; }
.tuile-couleur { background: linear-gradient(150deg, #7C6CF0 0%, #5B4BD0 45%, #146BB8 100%); border: 0; color: #fff; padding-bottom: 28px; }
.tuile-couleur .tuile-texte p { color: rgba(255, 255, 255, .85); }
.tuile-couleur::after { content: ""; position: absolute; right: -40px; bottom: -40px; width: 180px; height: 180px; border-radius: 50%; background: radial-gradient(circle, rgba(252, 180, 24, .55), transparent 70%); }
@media (max-width: 1000px) { .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tuile-grande { grid-row: auto; } }
@media (max-width: 620px) { .bento { grid-template-columns: 1fr; } .tuile-grande, .tuile-large { grid-column: auto; } .tuile-grande .tuile-visuel img { height: 240px; } }

/* La frise de la journée */
.section-journee { background: #fff; }
.frise { position: relative; display: grid; gap: clamp(50px, 7vw, 90px); }
.frise::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; transform: translateX(-50%); background: linear-gradient(180deg, transparent, #D6E3EF 8%, #D6E3EF 92%, transparent); }
.frise .etape { position: relative; }
.frise .etape::before { content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; transform: translate(-50%, -50%); border-radius: 50%; background: #fff; border: 4px solid var(--bleu2); box-shadow: 0 0 0 6px rgba(46, 136, 214, .14); z-index: 1; }
.etape-numero .heure { display: inline-block; padding: 4px 11px; margin-right: 4px; border-radius: 999px; background: var(--nuit); color: #FFD36B; font-family: var(--titres); letter-spacing: 0; text-transform: none; font-size: 13px; }
.etape-numero::before { display: none; }
@media (max-width: 800px) { .frise::before, .frise .etape::before { display: none; } }

/* Les rôles */
.section-roles { background: #F6F8FB; }
.roles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: stretch; }
.role { position: relative; padding: 30px; border-radius: 26px; background: #fff; border: 1px solid #E3EBF3; box-shadow: 0 30px 60px -44px rgba(12, 74, 128, .4); }
.role h3 { font-size: 24px; margin-top: 16px; }
.role-icone { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: var(--soft); color: var(--bleu); }
.role-icone svg { width: 26px; height: 26px; }
.role-mis { background: var(--nuit); color: #fff; border: 0; transform: translateY(-14px); box-shadow: 0 40px 80px -30px rgba(6, 26, 46, .7); }
.role-mis .role-icone { background: rgba(252, 180, 24, .16); color: #FFD36B; }
.role-mis .coches li { color: rgba(255, 255, 255, .82); }
.coches { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 11px; }
.coches li { position: relative; padding-left: 28px; color: var(--txt2); font-size: 15.5px; }
.coches li::before { content: ""; position: absolute; left: 0; top: 2px; width: 19px; height: 19px; border-radius: 50%; background: var(--vert-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232A775B' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12 4 4 8-8'/%3E%3C/svg%3E") center / 11px no-repeat; }
.role-mis .coches li::before { background-color: rgba(62, 155, 120, .25); }
@media (max-width: 900px) { .roles { grid-template-columns: 1fr; } .role-mis { transform: none; } }

/* La gestion en liste d'icônes */
.section-gestion { background: #fff; }
.icones-liste { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 34px 38px; }
.icones-liste h3 { font-size: 18px; margin-top: 14px; }
.icones-liste p { margin-top: 6px; color: var(--txt2); font-size: 15px; }
@media (max-width: 900px) { .icones-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .icones-liste { grid-template-columns: 1fr; } }

/* Les chiffres */
.bande-chiffres { position: relative; overflow: hidden; background: var(--nuit); color: #fff; padding-block: clamp(50px, 7vw, 86px); isolation: isolate; }
.bande-chiffres::before { content: ""; position: absolute; inset: -20%; z-index: -1; background: var(--aurore); animation: ciel 20s ease-in-out infinite alternate; }
.chiffres-premium { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
.chiffres-premium > div { border-left: 1px solid rgba(255, 255, 255, .14); padding-left: 22px; }
.chiffres-premium strong { display: block; font-family: var(--titres); font-size: clamp(48px, 6vw, 76px); line-height: 1; letter-spacing: -.05em; background: var(--or); -webkit-background-clip: text; background-clip: text; color: transparent; font-variant-numeric: tabular-nums; }
.chiffres-premium span { display: block; margin-top: 10px; color: rgba(255, 255, 255, .75); font-size: 15px; max-width: 220px; }
@media (max-width: 900px) { .chiffres-premium { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* La confiance */
.securite { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: 30px; align-items: center; padding: clamp(30px, 5vw, 64px); border-radius: 32px; background: linear-gradient(150deg, var(--nuit2), var(--nuit)); color: #fff; isolation: isolate; }
.securite::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(40% 60% at 90% 30%, rgba(62, 155, 120, .35), transparent 70%), radial-gradient(40% 60% at 10% 100%, rgba(46, 136, 214, .3), transparent 70%); }
.securite p { color: rgba(255, 255, 255, .78); margin-top: 14px; font-size: 17px; max-width: 560px; }
.securite .liste li { color: rgba(255, 255, 255, .85); }
.securite-visuel { display: grid; place-items: center; }
.securite-visuel svg { width: min(220px, 60%); height: auto; color: #7BE0B4; filter: drop-shadow(0 20px 40px rgba(62, 155, 120, .5)); animation: flotte 6s ease-in-out infinite; stroke-width: 1.2; }
@media (max-width: 760px) { .securite { grid-template-columns: 1fr; } .securite-visuel { display: none; } }

/* L'appel final */
.appel-premium { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, .6fr); gap: 20px; align-items: center; padding: clamp(34px, 5vw, 70px) clamp(28px, 5vw, 70px) 0; border-radius: 36px; background: var(--nuit); color: #fff; isolation: isolate; }
.appel-premium::before { content: ""; position: absolute; inset: -30%; z-index: -1; background: var(--aurore); animation: ciel 16s ease-in-out infinite alternate; }
.appel-premium h2 { color: #fff; font-size: clamp(32px, 4.6vw, 58px); }
.appel-premium h2 em { font-style: normal; background: var(--or); -webkit-background-clip: text; background-clip: text; color: transparent; }
.appel-premium p { color: rgba(255, 255, 255, .8); font-size: 18px; margin-top: 16px; max-width: 520px; }
.appel-premium .gestes { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; padding-bottom: clamp(34px, 5vw, 70px); }
.appel-visuel { align-self: end; }
.appel-visuel .telephone { max-width: 240px; margin-bottom: -60px; transform: rotate(6deg); }
@media (max-width: 760px) { .appel-premium { grid-template-columns: 1fr; } .appel-visuel { display: none; } }

/* Les autres bandeaux de page et le pied, au diapason */
.bandeau-page h1 { font-size: clamp(34px, 4.8vw, 58px); letter-spacing: -.04em; }
.pied { background: var(--nuit); }
.appel { background: linear-gradient(140deg, var(--nuit3), var(--nuit)); box-shadow: 0 40px 80px -40px rgba(6, 26, 46, .7); border-radius: 28px; }
.appel .bouton.blanc { background: var(--or); color: #1B1300; }
.carte { border-radius: 24px; border-color: #E3EBF3; }
.carte.fonction { box-shadow: 0 30px 60px -46px rgba(12, 74, 128, .45); }
.bento .tuile { align-items: stretch; text-align: left; gap: 0; padding: 28px 28px 0; }
.bento .tuile-couleur { padding-bottom: 28px; }
.bento .tuile-tag { align-self: flex-start; }
/* Le titre en or, mot par mot : le dégradé se pose sur chaque mot. */
.bandeau .deux-tons em { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: #FCB418; }
.bandeau .deux-tons em .mot { background: var(--or); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: .06em; }
.bento .tuile { font-weight: 400; }
.bento .tuile-texte p { font-weight: 500; }
.tuile-grande .tuile-visuel img { height: 440px; }

/* ---------------------------------------------------- la démo de l'assistant */
.section-demo { position: relative; overflow: hidden; background: var(--nuit); color: #fff; isolation: isolate; }
.section-demo::before { content: ""; position: absolute; inset: -20%; z-index: -1; background: var(--aurore); animation: ciel 22s ease-in-out infinite alternate; }
.section-demo + .section { border-top: 0; }
.demo-grille { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(30px, 5vw, 70px); align-items: center; }
.demo-texte h2 { color: #fff; }
.demo-texte > p { margin-top: 16px; color: rgba(255, 255, 255, .78); font-size: 18px; max-width: 520px; }
.demo-puces { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 12px; }
.demo-puces li { color: rgba(255, 255, 255, .75); font-size: 15.5px; }
.demo-puces b { display: inline-block; min-width: 92px; margin-right: 8px; padding: 3px 10px; border-radius: 999px; background: rgba(255, 255, 255, .1); color: #FFD36B; font-size: 12.5px; letter-spacing: .02em; text-align: center; }
.demo-app { position: relative; }
.demo-app::before { content: ""; position: absolute; inset: 6% 2%; z-index: -1; border-radius: 40px; background: radial-gradient(closest-side, rgba(124, 108, 240, .55), transparent); filter: blur(40px); }
.demo-carte { border-radius: 26px; padding: 24px; background: linear-gradient(180deg, #FBFCFF, #F2F5FE); color: var(--txt); box-shadow: 0 50px 100px -40px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .6) inset; }
.demo-tete { display: flex; align-items: center; gap: 12px; font-family: var(--titres); font-size: 19px; }
.demo-avatar { width: 40px; height: 40px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #FFE3B0, #F29A1F); box-shadow: 0 0 0 3px #fff, 0 6px 16px -6px rgba(242, 154, 31, .8); }
.demo-champ { position: relative; display: flex; align-items: center; gap: 4px; margin-top: 16px; padding: 12px 12px 12px 16px; border-radius: 16px; background: #fff; border: 2px solid #CFE0F3; box-shadow: 0 0 0 5px rgba(46, 136, 214, .12); min-height: 58px; }
.demo-saisie { font-size: 16px; font-weight: 600; color: var(--txt); white-space: nowrap; overflow: hidden; }
.demo-curseur { width: 2px; height: 22px; background: var(--bleu); animation: curseur 1s steps(1) infinite; }
@keyframes curseur { 50% { opacity: 0; } }
.demo-bouton { margin-left: auto; flex: none; padding: 9px 16px; border-radius: 12px; background: var(--degrade); color: #fff; font-weight: 800; font-size: 14px; transition: transform .2s, box-shadow .2s; }
.demo-bouton.presse { transform: scale(.94); box-shadow: 0 0 0 6px rgba(46, 136, 214, .2); }
.demo-resultat { margin-top: 16px; padding: 16px 18px; border-radius: 18px; background: #fff; border: 1px solid #E1E9F2; opacity: 0; transform: translateY(12px); transition: opacity .5s, transform .5s cubic-bezier(.2, .8, .2, 1); min-height: 238px; }
.demo-resultat.visible { opacity: 1; transform: none; }
.demo-compris { font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--txt3); }
.demo-compris + .demo-sujet { margin-top: 8px; }
.demo-sujet { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 15px; }
.demo-etiquette { padding: 3px 9px; border-radius: 7px; background: var(--soft); color: var(--bleu-f); font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.demo-sujet em { font-style: normal; color: #5B4BD0; font-weight: 700; }
.demo-date { margin: 6px 0 14px; color: var(--txt2); font-size: 13.5px; }
.demo-effets { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 8px; }
.demo-effets li { display: flex; gap: 10px; font-size: 14.5px; color: var(--txt2); opacity: 0; transform: translateX(-10px); transition: opacity .4s, transform .4s; }
.demo-effets li.visible { opacity: 1; transform: none; }
.demo-effets li::before { content: "→"; color: var(--bleu2); font-weight: 800; }
.demo-effets b { color: var(--txt); }
.demo-pied { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 16px; padding-top: 14px; border-top: 1px solid #EDF2F7; font-size: 12.5px; color: var(--txt3); }
.demo-appliquer { padding: 8px 14px; border-radius: 11px; background: var(--degrade); color: #fff; font-weight: 800; font-size: 13px; }
@media (max-width: 900px) { .demo-grille { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .demo-bouton { display: none; } .demo-saisie { font-size: 14.5px; } }

/* ---------------------------------------------------- la visite guidée */
.section-visite { background: #fff; }
.visite-grille { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(30px, 5vw, 70px); align-items: start; }
.visite-ecran { position: sticky; top: 110px; }
.visite-images { position: relative; aspect-ratio: 8 / 5; }
.visite-images img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.03); transition: opacity .7s, transform 1.2s cubic-bezier(.2, .8, .2, 1); }
.visite-images img.actif { opacity: 1; transform: none; }
.visite-etapes { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; }
.visite-etapes li { position: relative; padding: 34px 0 34px 30px; min-height: 42vh; display: flex; flex-direction: column; justify-content: center; border-left: 2px solid #E3EBF3; transition: border-color .4s; }
.visite-etapes li::before { content: ""; position: absolute; left: -2px; top: 0; bottom: 0; width: 2px; background: linear-gradient(180deg, #2E88D6, #7C6CF0); transform: scaleY(0); transform-origin: top; transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
.visite-etapes li.actif::before { transform: none; }
.visite-etapes h3 { font-size: clamp(21px, 2vw, 26px); margin-top: 8px; color: var(--txt3); transition: color .4s; }
.visite-etapes p { margin-top: 8px; color: var(--txt3); font-size: 16px; transition: color .4s; }
.visite-etapes li.actif h3 { color: var(--txt); }
.visite-etapes li.actif p { color: var(--txt2); }
.visite-num { font-family: var(--titres); font-size: 14px; font-weight: 800; color: var(--txt3); letter-spacing: .06em; }
.visite-etapes li.actif .visite-num { background: var(--or); -webkit-background-clip: text; background-clip: text; color: transparent; }
@media (max-width: 900px) {
  .visite-grille { grid-template-columns: 1fr; }
  .visite-ecran { top: 70px; z-index: 2; }
  .visite-etapes li { min-height: 0; padding: 22px 0 22px 20px; }
}

/* ---------------------------------------------------- avant, après */
.section-avant { background: radial-gradient(50% 60% at 50% 100%, #EAF2FB, transparent 70%), #F6F8FB; }
.avant-apres { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 22px; align-items: stretch; }
.colonne-avant, .colonne-apres { padding: 30px; border-radius: 26px; }
.colonne-avant { background: #fff; border: 1px dashed #CBD6E0; }
.colonne-avant h3 { color: var(--txt3); }
.colonne-avant ul, .colonne-apres ul { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 12px; }
.colonne-avant li { position: relative; padding-left: 28px; color: var(--txt3); text-decoration: line-through; text-decoration-color: rgba(192, 69, 60, .45); }
.colonne-avant li::before { content: "×"; position: absolute; left: 0; top: -1px; width: 19px; height: 19px; border-radius: 50%; display: grid; place-items: center; background: var(--alerte-bg); color: var(--alerte); font-weight: 800; font-size: 13px; }
.colonne-apres { background: var(--nuit); color: #fff; box-shadow: 0 40px 80px -40px rgba(6, 26, 46, .8); position: relative; overflow: hidden; isolation: isolate; }
.colonne-apres::before { content: ""; position: absolute; inset: -30%; z-index: -1; background: var(--aurore); opacity: .8; animation: ciel 20s ease-in-out infinite alternate; }
.colonne-apres h3 { color: #FFD36B; }
.colonne-apres li { position: relative; padding-left: 28px; color: rgba(255, 255, 255, .88); }
.colonne-apres li::before { content: ""; position: absolute; left: 0; top: 2px; width: 19px; height: 19px; border-radius: 50%; background: rgba(62, 155, 120, .3) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237BE0B4' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12 4 4 8-8'/%3E%3C/svg%3E") center / 11px no-repeat; }
.fleche-avant { display: grid; place-items: center; }
.fleche-avant svg { width: 44px; height: 44px; padding: 10px; border-radius: 50%; background: var(--or); color: #1B1300; box-shadow: 0 14px 30px -12px rgba(242, 154, 31, .8); animation: pousse 2.4s ease-in-out infinite; }
@keyframes pousse { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(6px); } }
@media (max-width: 860px) { .avant-apres { grid-template-columns: 1fr; } .fleche-avant svg { transform: rotate(90deg); animation: none; } }

/* ---------------------------------------------------- boutons aimantés et projecteur */
.bouton { will-change: transform; }
.projecteur { position: relative; }
.projecteur::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(600px circle at var(--sx, -999px) var(--sy, -999px), rgba(255, 255, 255, .07), transparent 60%); z-index: 0; }
.visite-images img { pointer-events: none; }
.visite-images img.actif { pointer-events: auto; }

/* La barre des rubriques, qui reste sous l'en-tête sur la page des fonctionnalités. */
.sous-nav { position: fixed; left: 0; right: 0; top: 64px; z-index: 19; background: rgba(255, 255, 255, .86); backdrop-filter: blur(14px) saturate(160%); -webkit-backdrop-filter: blur(14px) saturate(160%); border-bottom: 1px solid #E3EBF3; transform: translateY(-110%); transition: transform .4s cubic-bezier(.2, .8, .2, 1); box-shadow: 0 10px 30px -20px rgba(12, 74, 128, .35); }
.sous-nav.visible { transform: none; }
.sous-nav .conteneur { display: flex; gap: 6px; overflow-x: auto; padding-block: 10px; scrollbar-width: none; }
.sous-nav .conteneur::-webkit-scrollbar { display: none; }
.sous-nav a { flex: none; padding: 7px 14px; border-radius: 999px; font-size: 13.5px; font-weight: 700; color: var(--txt2); white-space: nowrap; transition: background .25s, color .25s; }
.sous-nav a:hover { text-decoration: none; background: var(--soft2); color: var(--bleu-f); }
.sous-nav a.actif { background: var(--nuit); color: #fff; }
.bloc-fonction { scroll-margin-top: 130px; }
@media (min-width: 861px) {
  .bloc-fonction.duo { align-items: start; }
  .bloc-fonction.duo .fonction-ecran { position: sticky; top: 150px; }
}

/* =====================================================================
   EN-TÊTE EN VERRE (30/09) : posé par-dessus la page, transparent.
   ===================================================================== */
.tete {
  position: fixed; left: 0; right: 0; top: 0;
  background: rgba(8, 24, 44, .18);
  backdrop-filter: blur(18px) saturate(180%); -webkit-backdrop-filter: blur(18px) saturate(180%);
  border-bottom: 1px solid rgba(255, 255, 255, .12);
  transition: background .35s, border-color .35s, box-shadow .35s, color .35s;
}
.tete.tete-defile { background: rgba(8, 24, 44, .38); box-shadow: 0 10px 30px -18px rgba(0, 0, 0, .5); }
.tete.tete-claire { background: rgba(255, 255, 255, .62); border-bottom-color: rgba(14, 28, 40, .08); color: var(--txt); box-shadow: 0 10px 30px -22px rgba(12, 74, 128, .4); }
.tete.tete-claire .marque { color: var(--txt); }
.tete.tete-claire .nav a { color: var(--txt2); }
.tete.tete-claire .nav a:hover { background: rgba(14, 28, 40, .06); color: var(--txt); }
.tete.tete-claire .nav a[aria-current="page"] { background: var(--nuit); color: #fff; }
.tete.tete-claire .nav a.bouton { color: #fff; }
.tete.tete-claire .nav-bascule { background: rgba(14, 28, 40, .08); color: var(--txt); }
.nav a { transition: background .25s, color .25s; }
@media (max-width: 1130px) {
  .nav { background: rgba(6, 26, 46, .94); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-radius: 0 0 22px 22px; }
  .tete.tete-claire .nav a { color: rgba(255, 255, 255, .9); }
  .tete.tete-claire .nav a[aria-current="page"] { background: #fff; color: var(--bleu-f); }
}
/* L'en-tête ne prend plus de place : le premier bandeau descend d'autant. */
main > .bandeau:first-child .conteneur, main > .bandeau-demo + .bandeau .conteneur { padding-top: calc(clamp(34px, 5vw, 60px) + 64px); }
main > .heros-premium:first-child .conteneur { padding-top: calc(clamp(56px, 8vw, 110px) + 64px); }
.sous-nav { top: 64px; }

/* La flèche retour des pages intérieures */
.retour { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 22px; padding: 8px 16px 8px 10px; border-radius: 999px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .18); color: #fff; font-weight: 700; font-size: 14px; backdrop-filter: blur(8px); transition: background .25s, transform .25s; }
.retour:hover { text-decoration: none; background: rgba(255, 255, 255, .18); transform: translateX(-3px); }
.retour svg { width: 18px; height: 18px; transition: transform .25s; }
.retour:hover svg { transform: translateX(-3px); }

/* =====================================================================
   CENTRAGE (30/09) : têtes de section, boutons, listes, sur tous écrans.
   ===================================================================== */
.tete-section { margin-inline: auto; text-align: center; }
.tete-section p { margin-inline: auto; }
.section-journee .tete-section, .section-gestion .tete-section { text-align: center; }
.bandeau-page .conteneur { text-align: center; }
.bandeau-page .chapeau { margin-inline: auto; }
.bandeau-page .onglets-page { justify-content: center; }
.bandeau-page .retour { margin-inline: auto; }
.bandeau-page .conteneur > .retour { display: flex; width: max-content; }
.publique-tete { text-align: left; }
.icones-liste > div { text-align: left; }
.chiffres-premium > div { text-align: left; }
.appel { text-align: left; }
@media (max-width: 880px) {
  .heros-premium .heros-texte { text-align: center; }
  .heros-premium .chapeau { margin-inline: auto; }
  .heros-premium .gestes, .heros-premium .confiance { justify-content: center; }
  .demo-texte { text-align: center; }
  .demo-texte > p { margin-inline: auto; }
  .demo-puces { justify-items: center; }
  .demo-puces li { display: grid; justify-items: center; gap: 6px; }
  .demo-puces b { margin-right: 0; }
  .appel-premium { text-align: center; }
  .appel-premium p { margin-inline: auto; }
  .appel-premium .gestes { justify-content: center; }
  .securite { text-align: center; }
  .securite p { margin-inline: auto; }
  .securite .liste { justify-items: center; }
  .chiffres-premium > div { text-align: center; border-left: 0; padding-left: 0; }
  .chiffres-premium span { margin-inline: auto; }
  .etape-texte { text-align: center; }
  .etape-texte .liste { justify-items: center; }
  .etape-texte .liste li { text-align: left; }
  .role { text-align: center; }
  .role .role-icone { margin-inline: auto; }
  .role .coches { justify-items: center; }
  .icones-liste > div { text-align: center; }
  .icones-liste .pastille { margin-inline: auto; }
  .visite-ecran { background: #fff; padding-bottom: 12px; }
  .fonction-texte { text-align: center; }
  .fonction-texte .pastille { margin-inline: auto; }
  .fonction-texte .liste { text-align: left; }
}
.gestes { justify-content: flex-start; }
.section-bento .centre, .section-bento .tete-section { text-align: center; }
.sous-nav { visibility: hidden; opacity: 0; transition: transform .4s cubic-bezier(.2, .8, .2, 1), opacity .3s, visibility .4s; }
.sous-nav.visible { visibility: visible; opacity: 1; }
.tuile-grande .tuile-visuel { flex: 1; display: flex; align-items: flex-end; min-height: 0; }
.tuile-grande .tuile-visuel img { height: 100%; min-height: 340px; }
@media (max-width: 880px) {
  .etape-texte .liste, .securite .liste, .role .coches, .fonction-texte .liste, .colonne-avant ul, .colonne-apres ul {
    justify-items: start; width: fit-content; max-width: 100%; margin-inline: auto; text-align: left;
  }
  .bento .tuile { text-align: center; }
  .bento .tuile-tag { align-self: center; }
  .bento .tuile-texte p { margin-inline: auto; }
  .galerie .carte-capture { text-align: center; }
  .colonne-avant, .colonne-apres { text-align: center; }
  .tete-section .oeil { margin-inline: auto; }
}

/* ---------------------------------------------------- le sommaire en chapitres */
.index-chapitres { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; margin-top: 38px; text-align: left; }
.chapitre-carte { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 20px 16px 16px; border-radius: 22px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .14); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); overflow: hidden; transition: transform .45s cubic-bezier(.2, .8, .2, 1), background .3s, border-color .3s; }
.chapitre-carte:hover { transform: translateY(-6px); background: rgba(255, 255, 255, .11); border-color: rgba(255, 255, 255, .24); }
.chapitre-carte::before { content: ""; position: absolute; top: -40px; right: -40px; width: 130px; height: 130px; border-radius: 50%; opacity: .5; filter: blur(10px); background: radial-gradient(circle, var(--c, #2E88D6), transparent 70%); }
.chapitre-carte.bleu { --c: #2E88D6; } .chapitre-carte.violet { --c: #7C6CF0; } .chapitre-carte.vert { --c: #3E9B78; }
.chapitre-carte.jaune { --c: #FCB418; } .chapitre-carte.rose { --c: #E36BA8; }
.chapitre-icone { position: relative; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--c); color: #fff; box-shadow: 0 10px 24px -10px var(--c); margin-bottom: 10px; }
.chapitre-icone svg { width: 22px; height: 22px; }
.chapitre-carte h2 { position: relative; font-size: 19px; color: #fff; letter-spacing: -.02em; margin-bottom: 8px; }
.chapitre-carte a { position: relative; display: flex; align-items: center; gap: 9px; padding: 7px 9px; margin-inline: -9px; border-radius: 10px; color: rgba(255, 255, 255, .8); font-size: 14px; font-weight: 600; transition: background .2s, color .2s, transform .2s; }
.chapitre-carte a:hover { text-decoration: none; background: rgba(255, 255, 255, .1); color: #fff; transform: translateX(3px); }
.chapitre-carte a svg { width: 16px; height: 16px; flex: none; color: var(--c); }
@media (max-width: 1100px) { .index-chapitres { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px) { .index-chapitres { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 440px) { .index-chapitres { grid-template-columns: 1fr; } }
.sous-nav a svg { display: none; }

/* ---------------------------------------------------- les chapitres */
.chapitre-tete { text-align: center; max-width: 720px; margin: clamp(70px, 9vw, 120px) auto clamp(34px, 5vw, 56px); scroll-margin-top: 130px; }
.chapitre-tete:first-child { margin-top: 0; }
.chapitre-tete p { margin-top: 12px; color: var(--txt2); font-size: 18px; }
.chapitre-tete + .bloc-fonction { border-top: 0; padding-top: 0; margin-top: 0; }
.cta-chapitre { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-top: clamp(40px, 6vw, 70px); padding: 22px 26px; border-radius: 22px; background: var(--nuit); color: #fff; position: relative; overflow: hidden; isolation: isolate; }
.cta-chapitre::before { content: ""; position: absolute; inset: -40%; z-index: -1; background: var(--aurore); opacity: .8; animation: ciel 18s ease-in-out infinite alternate; }
.cta-chapitre strong { display: block; font-family: var(--titres); font-size: 20px; letter-spacing: -.02em; }
.cta-chapitre span { display: block; color: rgba(255, 255, 255, .72); font-size: 15px; margin-top: 3px; }
.cta-chapitre + .chapitre-tete { margin-top: clamp(80px, 10vw, 130px); }
@media (max-width: 700px) { .cta-chapitre { justify-content: center; text-align: center; } }

.gestes-centre { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin-top: 34px; }

/* ---------------------------------------------------- la démo toujours à portée */
.demo-flottante { position: fixed; right: 84px; bottom: 22px; z-index: 30; display: inline-flex; align-items: center; gap: 10px; padding: 12px 20px 12px 16px; border-radius: 999px; background: var(--or); color: #1B1300; font-weight: 800; font-size: 14.5px; box-shadow: 0 18px 40px -14px rgba(242, 154, 31, .85), inset 0 1px 0 rgba(255, 255, 255, .5); opacity: 0; transform: translateY(20px) scale(.95); pointer-events: none; transition: opacity .35s, transform .45s cubic-bezier(.2, .8, .2, 1); }
.demo-flottante.visible { opacity: 1; transform: none; pointer-events: auto; }
.demo-flottante:hover { text-decoration: none; transform: translateY(-2px); }
.demo-flottante-point { width: 9px; height: 9px; border-radius: 50%; background: #1B1300; box-shadow: 0 0 0 0 rgba(27, 19, 0, .5); animation: appel-point 2s ease-out infinite; }
@keyframes appel-point { 0% { box-shadow: 0 0 0 0 rgba(27, 19, 0, .45); } 100% { box-shadow: 0 0 0 12px rgba(27, 19, 0, 0); } }
@media (max-width: 600px) { .demo-flottante { right: auto; left: 16px; bottom: 16px; } }

/* Barre des chapitres : cinq entrées centrées et la démo au bout. */
.sous-nav .conteneur:has(.sous-nav-demo) { justify-content: center; align-items: center; }
.sous-nav a.sous-nav-demo { margin-left: 14px; background: var(--or); color: var(--nuit); box-shadow: 0 8px 20px -10px rgba(252, 180, 24, .8); }
.sous-nav a.sous-nav-demo:hover { background: var(--or); color: var(--nuit); filter: brightness(1.05); }
@media (max-width: 720px) {
  .sous-nav .conteneur:has(.sous-nav-demo) { justify-content: flex-start; }
  .sous-nav a.sous-nav-demo { margin-left: 4px; }
}

/* Bento : chaque capture est centrée dans sa tuile, sans déborder d'un côté. */
.bento .tuile-visuel { display: flex; justify-content: center; align-items: flex-end; }
.bento .tuile-visuel img { width: 100%; max-width: 100%; margin-inline: auto; transform-origin: 50% 100%; }
.bento .pos-assistant img { object-position: 45% 55%; }
.bento .pos-prev img { object-position: 50% 40%; }
.bento .pos-fact img { object-position: 50% 50%; }
.bento .pos-site img { object-position: 50% 55%; }
.bento .pos-code img, .bento .pos-equipe img { width: 78%; max-width: 240px; }

/* =====================================================================
   L'assistant IA (01/10)
   ===================================================================== */
.oeil svg { width: 14px; height: 14px; }
.oeil:has(svg)::before { display: none; }
.demo-gestes { margin-top: 38px; display: flex; gap: 12px; flex-wrap: wrap; }

.bandeau-ia { position: relative; overflow: hidden; isolation: isolate; }
.bandeau-ia::after { content: ""; position: absolute; inset: -30% -10% auto auto; width: 620px; height: 620px; z-index: -1; border-radius: 50%; background: radial-gradient(circle, rgba(124, 108, 240, .55), transparent 65%); filter: blur(10px); animation: flotte 9s ease-in-out infinite; pointer-events: none; }
.bandeau-ia .gestes { justify-content: center; }
.pastille-ia { display: inline-flex; align-items: center; gap: 8px; padding: 7px 16px 7px 10px; border-radius: 999px; margin-bottom: 18px; background: linear-gradient(135deg, rgba(124, 108, 240, .35), rgba(20, 107, 184, .35)); border: 1px solid rgba(255, 255, 255, .22); color: #fff; font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; box-shadow: 0 0 30px -6px rgba(124, 108, 240, .8); }
.pastille-ia svg { width: 16px; height: 16px; color: #FFD36B; animation: scintille 2.6s ease-in-out infinite; }
@keyframes scintille { 0%, 100% { transform: scale(1) rotate(0); opacity: 1; } 50% { transform: scale(1.25) rotate(18deg); opacity: .8; } }

.ia-etapes { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 16px; }
.ia-etapes li { display: flex; gap: 16px; align-items: flex-start; text-align: left; }
.ia-etapes b { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; background: var(--or); color: #1B1300; font-weight: 900; }
.ia-etapes strong { display: block; color: #fff; font-size: 17px; }
.ia-etapes span { display: block; margin-top: 3px; color: rgba(255, 255, 255, .72); font-size: 15px; }

.defile-ia { background: linear-gradient(90deg, #F3F0FF, #EAF4FC); }
.defile-ia .defile-piste span { background: #fff; color: #4B3CC0; border-color: #E2DDFB; font-style: italic; }

.ia-cartes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.ia-carte { --c: var(--violet); --cbg: var(--violet-bg); position: relative; overflow: hidden; padding: 26px; border-radius: 20px; background: #fff; border: 1px solid #E3EBF3; box-shadow: 0 20px 40px -32px rgba(12, 74, 128, .5); transition: transform .4s cubic-bezier(.2, .8, .2, 1), box-shadow .4s; }
.ia-carte::before { content: ""; position: absolute; right: -60px; top: -60px; width: 160px; height: 160px; border-radius: 50%; background: radial-gradient(circle, var(--cbg), transparent 70%); }
.ia-carte:hover { transform: translateY(-6px); box-shadow: 0 30px 50px -30px rgba(12, 74, 128, .55); }
.ia-carte.vert { --c: var(--vert); --cbg: var(--vert-bg); }
.ia-carte.jaune { --c: var(--jaune); --cbg: var(--jaune-bg); }
.ia-carte.bleu { --c: var(--bleu); --cbg: var(--soft); }
.ia-carte.rose { --c: var(--rose); --cbg: var(--rose-bg); }
.ia-icone { position: relative; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: var(--cbg); color: var(--c); }
.ia-icone svg { width: 22px; height: 22px; }
.ia-carte h3 { position: relative; margin-top: 16px; font-size: 20px; }
.ia-carte p { position: relative; margin-top: 8px; color: var(--txt2); font-size: 15px; }
.ia-bulles { position: relative; display: grid; gap: 8px; margin-top: 16px; }
.ia-bulle { justify-self: start; padding: 8px 14px; border-radius: 14px 14px 14px 4px; background: var(--cbg); color: var(--c); font-weight: 700; font-size: 14px; }

.ia-places { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 60px); align-items: center; padding: clamp(26px, 4vw, 48px); border-radius: 24px; background: linear-gradient(135deg, #F3F0FF, #EAF4FC); border: 1px solid #E2DDFB; }
.ia-places p { margin-top: 12px; color: var(--txt2); font-size: 17px; }
.ia-ordre { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; counter-reset: none; }
.ia-ordre li { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-radius: 16px; background: #fff; border: 1px solid #E3EBF3; font-weight: 700; box-shadow: 0 12px 24px -20px rgba(12, 74, 128, .5); }
.ia-ordre b { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--violet); color: #fff; }

.ia-ecrans { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 22px; align-items: start; }
.ia-ecran-tel .telephone { width: 220px; margin-inline: auto; }
.ia-ecran-tel .capture-legende { text-align: center; }

@media (max-width: 1000px) {
  .ia-cartes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ia-ecrans { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .ia-cartes, .ia-places { grid-template-columns: minmax(0, 1fr); }
  .ia-carte { text-align: left; }
  .demo-gestes { justify-content: center; }
  .ia-places > div { text-align: center; }
}

/* Démo de l'IA : la carte n'est jamais vide (01/10). */
.demo-zone { position: relative; margin-top: 16px; }
.demo-zone .demo-resultat { margin-top: 0; }
.demo-attente, .demo-analyse { position: absolute; inset: 0; display: flex; flex-direction: column; opacity: 0; transform: translateY(8px); transition: opacity .45s, transform .45s cubic-bezier(.2, .8, .2, 1); pointer-events: none; }
.etat-saisie .demo-attente, .etat-analyse .demo-analyse { opacity: 1; transform: none; }
.demo-indice { margin: 2px 0 0; color: var(--txt3); font-size: 13.5px; }
.demo-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.demo-chips span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 999px; background: #fff; border: 1px solid #DCE6F0; color: var(--bleu-f); font-size: 12.5px; font-weight: 700; animation: chip 3.2s ease-in-out infinite; }
.demo-chips span:nth-child(2) { animation-delay: .25s; } .demo-chips span:nth-child(3) { animation-delay: .5s; }
.demo-chips span:nth-child(4) { animation-delay: .75s; } .demo-chips span:nth-child(5) { animation-delay: 1s; }
.demo-chips svg { width: 14px; height: 14px; }
@keyframes chip { 0%, 70%, 100% { box-shadow: 0 0 0 0 rgba(46, 136, 214, 0); } 35% { box-shadow: 0 0 0 4px rgba(46, 136, 214, .14); } }
.demo-connait-titre { margin-top: 20px; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--txt3); }
.demo-connait { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.demo-connait div { --c: var(--violet); --cbg: var(--violet-bg); display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: 14px; border-radius: 16px; background: #fff; border: 1px solid #E6ECF4; font-weight: 700; font-size: 14px; color: var(--txt); }
.demo-connait .vert { --c: var(--vert); --cbg: var(--vert-bg); }
.demo-connait .jaune { --c: var(--jaune); --cbg: var(--jaune-bg); }
.demo-connait .bleu { --c: var(--bleu); --cbg: var(--soft); }
.demo-connait svg { width: 34px; height: 34px; padding: 8px; border-radius: 11px; background: var(--cbg); color: var(--c); }
.demo-analyse { padding: 18px; border-radius: 18px; background: #fff; border: 1px solid #E1E9F2; }
.demo-reflexion { display: flex; align-items: center; gap: 10px; font-weight: 800; color: #4B3CC0; font-size: 15px; }
.demo-etincelle { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; background: linear-gradient(135deg, #7C6CF0, #146BB8); color: #fff; box-shadow: 0 0 24px -4px rgba(124, 108, 240, .9); animation: scintille 1.4s ease-in-out infinite; }
.demo-etincelle svg { width: 18px; height: 18px; }
.demo-points { display: inline-flex; gap: 4px; }
.demo-points i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: point-ia 1s ease-in-out infinite; }
.demo-points i:nth-child(2) { animation-delay: .15s; } .demo-points i:nth-child(3) { animation-delay: .3s; }
@keyframes point-ia { 0%, 100% { opacity: .25; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-3px); } }
.demo-squelette { flex: 1; display: grid; align-content: start; gap: 12px; margin-top: 20px; }
.demo-squelette i { height: 14px; border-radius: 8px; background: linear-gradient(90deg, #EEF2FA 0%, #E2E6FB 40%, #EEF2FA 80%); background-size: 200% 100%; animation: lueur-ia 1.2s linear infinite; }
.demo-squelette i:nth-child(1) { width: 45%; } .demo-squelette i:nth-child(2) { width: 80%; height: 18px; }
.demo-squelette i:nth-child(3) { width: 60%; } .demo-squelette i:nth-child(4) { width: 90%; } .demo-squelette i:nth-child(5) { width: 70%; }
@keyframes lueur-ia { from { background-position: 200% 0; } to { background-position: -200% 0; } }
/* Les trois états s'empilent dans la même case : la carte garde la hauteur
   du plus grand, elle ne saute plus d'un état à l'autre. */
.demo-zone { display: grid; }
.demo-zone > * { grid-area: 1 / 1; }
.demo-attente, .demo-analyse { position: relative; inset: auto; }
.demo-zone .demo-resultat { min-height: 0; }
.demo-zone .demo-resultat { display: flex; flex-direction: column; }
.demo-zone .demo-pied { margin-top: auto; }
.demo-zone .demo-effets { margin-bottom: 16px; }

/* Pendant la frappe (01/10, « c'est laid ») : une ligne de raccourcis
   discrète, comme dans l'application, et un emplacement vide sobre. */
.demo-attente { gap: 14px; }
.demo-chips { flex-wrap: nowrap; overflow: hidden; margin-top: 0; gap: 6px; mask-image: linear-gradient(90deg, #000 80%, transparent); -webkit-mask-image: linear-gradient(90deg, #000 80%, transparent); }
.demo-chips span { flex: none; animation: none; padding: 5px 10px; background: #fff; border-color: #E3EAF3; color: var(--txt2); font-weight: 600; font-size: 12px; }
.demo-chips svg { width: 13px; height: 13px; color: var(--bleu2); }
.demo-vide { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 24px; border-radius: 18px; border: 1.5px dashed #D6DEEC; background: rgba(255, 255, 255, .55); text-align: center; }
.demo-vide strong { margin-top: 8px; font-size: 15px; color: var(--txt); }
.demo-vide > span:last-child { font-size: 13.5px; color: var(--txt3); }
.demo-vide-icone { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--violet-bg); color: var(--violet); }
.demo-vide-icone svg { width: 20px; height: 20px; }
.demo-zone { min-height: 352px; }
.demo-zone > * { min-width: 0; }
@media (max-width: 480px) { .demo-zone { min-height: 420px; } }

/* L'assistant dessiné de l'application, avec sa pastille étincelle (01/10). */
.demo-avatar { position: relative; flex: none; width: 44px; height: 44px; border-radius: 50%; background: #FFF4E4; box-shadow: 0 0 0 3px #fff, 0 8px 18px -8px rgba(12, 74, 128, .45); }
.demo-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.demo-avatar svg { position: absolute; right: -4px; bottom: -4px; width: 20px; height: 20px; padding: 3px; border-radius: 50%; background: var(--violet); color: #fff; box-shadow: 0 0 0 2px #fff; }

/* La flèche retour vit dans l'en-tête, toujours visible (01/10). L'ancienne,
   posée dans le bandeau et qui partait au défilement, est seulement masquée. */
.bandeau .retour { display: none !important; }
.retour-tete { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 14px 0 10px; border-radius: 999px; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .22); color: #fff; font-weight: 700; font-size: 14px; transition: background .25s, color .25s, border-color .25s; }
.retour-tete[hidden] { display: none; }
.retour-tete:hover { text-decoration: none; background: rgba(255, 255, 255, .2); }
.retour-tete svg { width: 18px; height: 18px; transition: transform .25s; }
.retour-tete:hover svg { transform: translateX(-3px); }
.tete.tete-claire .retour-tete { background: rgba(14, 28, 40, .06); border-color: rgba(14, 28, 40, .12); color: var(--txt); }
.tete.tete-claire .retour-tete:hover { background: rgba(14, 28, 40, .1); }
.tete .conteneur:has(.retour-tete:not([hidden])) { gap: 12px; }
@media (max-width: 1100px) {
  .retour-tete { width: 38px; padding: 0; justify-content: center; }
  .retour-tete span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}

/* Formulaire de demande (01/10) : il part chez l'hébergeur, plus de mailto. */
#demo { scroll-margin-top: 90px; }
.carte-demande { border: 1px solid #E3EBF3; box-shadow: 0 30px 60px -40px rgba(12, 74, 128, .55); }
.cache-robot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.formulaire .bouton { justify-self: start; }
.formulaire button:disabled { opacity: .6; cursor: wait; }
.formulaire-etat { margin: 0; font-size: 14px; color: var(--txt2); }
.formulaire-etat:empty { display: none; }
.formulaire-etat.erreur { padding: 12px 14px; border-radius: 12px; background: #FDECEC; color: #9B2C2C; }
.formulaire-etat.erreur a { color: inherit; font-weight: 800; text-decoration: underline; }
.formulaire-merci { margin-top: 20px; padding: 28px; border-radius: 18px; background: var(--vert-bg); text-align: center; }
.formulaire-merci h3 { margin-top: 12px; font-size: 20px; }
.formulaire-merci p { margin-top: 6px; }
.merci-icone { display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: #fff; color: var(--vert); }
.merci-icone svg { width: 22px; height: 22px; }
.adresse-courriel { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 14px; padding: 12px 14px; border-radius: 14px; background: var(--soft2); border: 1px solid #E3EBF3; }
.adresse-courriel a { font-weight: 800; word-break: break-all; }
.bouton.petit { padding: 8px 14px; font-size: 13.5px; min-height: 0; }
@media (max-width: 720px) { .formulaire .bouton { justify-self: stretch; justify-content: center; } }

/* L attribut hidden gagne toujours, meme sur un bloc en grille ou en flex. */
[hidden] { display: none !important; }

/* Le mode tablette, dessiné (30/09). Il liste des enfants : prénoms fictifs, aucune photo. */
.bloc-fonction.duo.large { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
@media (max-width: 860px) { .bloc-fonction.duo.large { grid-template-columns: 1fr; } }
.tabm { margin: 0; width: min(100%, 560px); margin-inline: auto; }
.tabm-cadre { background: #14202B; border-radius: 26px; padding: 12px; box-shadow: 0 24px 60px rgba(14, 28, 40, .22); }
.tabm-ecran { display: flex; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 15px; background: #F5F8FB; font-size: 9px; color: var(--txt); }
.tabm-rail { width: 17%; flex-shrink: 0; display: flex; flex-direction: column; gap: 2px; padding: 6px 4px; background: #fff; border-right: 1px solid var(--line); }
.tabm-rail span { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 5px 2px; border-radius: 10px; font-weight: 700; font-size: 7.5px; text-align: center; line-height: 1.1; }
.tabm-rail span.on { background: var(--bleu); color: #fff; }
.tabm-rail i { position: relative; font-style: normal; font-size: 15px; line-height: 1; }
.tabm-rail hr { border: 0; border-top: 1px solid var(--line); margin: 3px 4px; }
.tabm-rail small { position: absolute; top: -5px; left: 60%; white-space: nowrap; border-radius: 99px; padding: 1px 4px; font-size: 6.5px; font-weight: 800; font-family: var(--texte, inherit); }
.tabm-min { background: var(--vert-bg); color: var(--vert); }
.tabm-nb { background: var(--jaune-a); color: #1B1300; }
.tabm-corps { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tabm-tete { display: flex; align-items: center; gap: 4px; padding: 6px 8px; background: #fff; border-bottom: 1px solid var(--line); }
.tabm-qui-l { font-weight: 700; color: var(--txt2); margin-right: 2px; }
.tabm-qui { display: flex; align-items: center; gap: 3px; padding: 2px 7px 2px 2px; border-radius: 99px; border: 1px solid var(--line); font-weight: 700; font-size: 8px; }
.tabm-qui i { display: grid; place-items: center; width: 15px; height: 15px; border-radius: 50%; background: #E7F1FA; color: var(--bleu); font-style: normal; font-size: 7px; }
.tabm-qui.on { background: var(--bleu); border-color: var(--bleu); color: #fff; }
.tabm-qui.on i { background: rgba(255, 255, 255, .3); color: #fff; }
.tabm-quitter { margin-left: auto; font-weight: 700; color: var(--txt2); }
.tabm-compte { display: flex; gap: 10px; padding: 6px 10px 0; font-weight: 700; color: var(--txt2); }
.tabm-compte .ok { color: var(--vert); }
.tabm-filtres { display: flex; gap: 4px; padding: 5px 8px; }
.tabm-filtres span { display: flex; align-items: center; gap: 3px; padding: 3px 8px; border-radius: 99px; background: #fff; border: 1px solid var(--line); font-weight: 700; font-size: 7.5px; }
.tabm-filtres span.on { background: var(--txt); border-color: var(--txt); color: #fff; }
.tabm-filtres i { width: 6px; height: 6px; border-radius: 50%; }
.tabm-grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; padding: 0 8px; }
.tabm-tuile { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 7px 4px 6px; border-radius: 12px; background: #fff; border: 1.5px solid var(--line); text-align: center; }
.tabm-tuile.choisi { border-color: var(--bleu); background: #EAF3FB; }
.tabm-av { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--vert-bg); color: var(--vert); font-weight: 800; font-size: 11px; }
.tabm-tuile b { font-size: 9.5px; }
.tabm-etat { font-size: 7px; font-weight: 700; }
.tabm-etat.vert { color: var(--vert); }
.tabm-coche { position: absolute; top: 4px; right: 4px; width: 12px; height: 12px; border-radius: 50%; background: var(--bleu); }
.tabm-coche::after { content: ""; position: absolute; left: 4px; top: 2px; width: 3px; height: 6px; border: solid #fff; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
.tabm-pai { position: absolute; top: 4px; left: 4px; padding: 0 4px; border-radius: 99px; background: #FBE4E4; color: #B42323; font-style: normal; font-weight: 800; font-size: 6.5px; }
.tabm-barre { position: absolute; left: 12%; right: 12%; bottom: 8px; display: flex; align-items: center; gap: 4px; padding: 3px; border-radius: 99px; background: #fff; border: 1px solid var(--line); box-shadow: 0 6px 18px rgba(14, 28, 40, .12); }
.tabm-barre span { padding: 5px 8px; font-weight: 700; font-size: 7.5px; color: var(--txt2); }
.tabm-barre b { flex: 1; padding: 6px; border-radius: 99px; background: var(--vert); color: #fff; text-align: center; font-size: 8.5px; }
@media (min-width: 1100px) { .tabm-ecran { font-size: 10px; } }
@media (max-width: 600px) {
  .tabm-cadre { padding: 8px; border-radius: 20px; }
  .tabm-ecran { aspect-ratio: 3 / 4; }
  .tabm-rail { width: 20%; }
  .tabm-grille { grid-template-columns: repeat(2, 1fr); }
  .tabm-qui:nth-of-type(n+3), .tabm-quitter { display: none; }
  .tabm-barre { left: 6%; right: 6%; }
}

/* ---- la tablette (30/09) : les vrais écrans du mode tablette, dans une tablette dessinée
   de la même matière que le téléphone. Les écrans se relaient seuls ; les puces dessous
   permettent de choisir. Captures prises dans l'application, noms remplacés par des
   prénoms fictifs, aucune photo d'enfant. ---- */
.ardoise-scene { width: 100%; max-width: 620px; margin-inline: auto; }
.ardoise-flotte { animation: flotte 8s ease-in-out infinite; }
.ardoise {
  position: relative; padding: clamp(9px, 1.6vw, 15px); border-radius: clamp(22px, 3.4vw, 36px);
  background: linear-gradient(150deg, #3B4652 0%, #121A22 32%, #0A1016 60%, #2A333D 100%);
  box-shadow:
    inset 0 0 0 1.5px rgba(255, 255, 255, .16), inset 0 0 0 3px #05090D,
    0 70px 100px -46px rgba(12, 74, 128, .6), 0 26px 40px -24px rgba(0, 0, 0, .55);
  transform: perspective(1800px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .6s cubic-bezier(.2, .8, .2, 1);
  will-change: transform;
}
.ardoise::before {
  content: ""; position: absolute; left: clamp(3px, .55vw, 6px); top: 50%; width: 5px; height: 5px; margin-top: -2.5px;
  border-radius: 50%; background: #2B3640; box-shadow: inset 0 0 0 1.5px #0A1016;
}
.ardoise::after {
  content: ""; position: absolute; top: -2px; right: 16%; width: 11%; height: 3px; border-radius: 2px;
  background: linear-gradient(90deg, #1b232b, #3b4652);
}
.ardoise-ecran {
  position: relative; aspect-ratio: 1180 / 820; overflow: hidden; border-radius: clamp(12px, 2vw, 22px);
  background: #F4F8FB; cursor: zoom-in;
}
.ardoise-ecran img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top left;
  opacity: 0; transform: scale(1.035); transition: opacity .9s ease, transform 6s ease-out;
}
.ardoise-ecran img.actif { opacity: 1; transform: scale(1); }
/* Un reflet de verre qui suit la souris, comme sur les captures. */
.ardoise-ecran::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(600px circle at var(--gx, 30%) var(--gy, 0%), rgba(255, 255, 255, .16), transparent 45%);
}
.ardoise-puces { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 22px; }
.ardoise-puces button {
  position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); background: #fff;
  font: inherit; font-size: 13.5px; font-weight: 700; color: var(--txt2); cursor: pointer;
  transition: color .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.ardoise-puces button span { font-size: 15px; line-height: 1; }
.ardoise-puces button::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: var(--bleu);
}
.ardoise-puces button.actif { color: var(--txt); border-color: rgba(20, 107, 184, .35); box-shadow: 0 8px 20px -14px rgba(20, 107, 184, .7); }
.ardoise-puces button.actif::after { animation: ardoise-temps var(--duree, 4.2s) linear forwards; }
.ardoise-scene.pause .ardoise-puces button.actif::after { animation-play-state: paused; }
@keyframes ardoise-temps { to { width: 100%; } }
.ardoise-legende { margin-top: 12px; text-align: center; font-size: 14px; font-weight: 600; color: var(--txt2); min-height: 1.5em; }
@media (max-width: 600px) { .ardoise-puces button { padding: 7px 11px; font-size: 12.5px; } }

/* Le téléphone d'un vrai écran à côté de la tablette : même matière, un peu plus petit. */
.fonction-ecran .telephone.petit { max-width: 250px; }
.ardoise-ecran img:not(.actif) { pointer-events: none; }

/* ---- accueil : la section du mode tablette (30/09) ---- */
.section-tablette {
  position: relative; overflow: hidden;
  background: radial-gradient(60% 55% at 50% 58%, rgba(124, 108, 240, .12), transparent 70%),
              radial-gradient(40% 40% at 20% 20%, rgba(46, 136, 214, .10), transparent 70%), #F6F8FB;
}
.section-tablette .ardoise-scene { max-width: 860px; margin-top: clamp(28px, 4vw, 48px); }
.tablette-atouts { list-style: none; padding: 0; margin: clamp(26px, 3.4vw, 40px) auto 0; max-width: 900px;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.tablette-atouts li { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 20px;
  background: #fff; border: var(--filet); box-shadow: 0 14px 30px -24px rgba(12, 74, 128, .5); }
.tablette-atouts i { flex-shrink: 0; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px;
  background: var(--soft); color: var(--bleu); }
.tablette-atouts i svg { width: 20px; height: 20px; }
.tablette-atouts strong { display: block; font-size: 15px; color: var(--txt); }
.tablette-atouts span { font-size: 13.5px; color: var(--txt2); line-height: 1.35; }
@media (max-width: 760px) { .tablette-atouts { grid-template-columns: 1fr; } }

/* =====================================================================
   03/10 : la page des fonctionnalités se replie. Une ligne par fonction
   (titre et phrase), le détail (points et écran) s'ouvre au clic. La page
   tient en quelques écrans au lieu de vingt.
   ===================================================================== */
.chapitre-tete { margin: clamp(46px, 6vw, 76px) auto clamp(18px, 2.5vw, 26px); }
.chapitre-tete h2 { font-size: clamp(26px, 3.4vw, 38px); }
.chapitre-tete p { font-size: 16.5px; margin-top: 8px; }
.plis { max-width: 980px; margin: 0 auto; border-radius: 22px; background: #fff; border: var(--filet); box-shadow: 0 18px 40px -30px rgba(14, 28, 40, .35); overflow: hidden; }
.pli { scroll-margin-top: 130px; }
.pli + .pli { border-top: var(--filet); margin-top: 0; padding-top: 0; }
.pli > .pli-tete { list-style: none; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 16px 20px; cursor: pointer; transition: background .2s; }
.pli > .pli-tete::-webkit-details-marker { display: none; }
.pli > .pli-tete:hover { background: var(--soft2); }
.pli > .pli-tete:focus-visible { outline: 2px solid var(--bleu2); outline-offset: -2px; }
.pli-tete .pastille { width: 40px; height: 40px; }
.pli-titre { min-width: 0; }
.pli-titre h3 { margin: 0; font-size: 18px; letter-spacing: -.015em; line-height: 1.25; }
.pli-titre > span { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; margin-top: 3px; color: var(--txt2); font-size: 14.5px; line-height: 1.45; }
.pli[open] .pli-titre > span { -webkit-line-clamp: unset; display: block; }
.pli-chevron { width: 32px; height: 32px; border-radius: 999px; background: var(--soft2); position: relative; transition: transform .35s cubic-bezier(.2, .8, .2, 1), background .2s; }
.pli-chevron::before { content: ""; position: absolute; left: 50%; top: 46%; width: 8px; height: 8px; border-right: 2px solid var(--bleu-f); border-bottom: 2px solid var(--bleu-f); transform: translate(-50%, -50%) rotate(45deg); }
.pli[open] .pli-chevron { transform: rotate(180deg); background: var(--soft); }
.pli-corps { padding: 2px 20px 26px 76px; }
.pli-corps.duo { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(20px, 3vw, 40px); align-items: start; }
.pli-corps .fonction-texte .liste { margin-top: 0; }
.pli-corps .fonction-ecran { position: static; }
.pli[open] .pli-corps { animation: pliOuvre .45s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes pliOuvre { from { opacity: 0; transform: translateY(-8px); } }
@media (max-width: 860px) {
  .pli > .pli-tete { padding: 14px 14px; gap: 12px; }
  .pli-tete .pastille { width: 34px; height: 34px; }
  .pli-titre h3 { font-size: 16.5px; }
  .pli-titre > span { -webkit-line-clamp: 2; font-size: 14px; }
  .pli-corps { padding: 0 14px 22px; }
  .pli-corps.duo { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .pli[open] .pli-corps { animation: none; } .pli-chevron { transition: none; } }
/* Les cartes du sommaire : toute la carte mène à son chapitre. */
.chapitre-carte[data-cible] { cursor: pointer; }
.chapitre-carte h2 a.chapitre-lien { display: inline; padding: 0; margin: 0; color: inherit; font: inherit; }
.chapitre-carte h2 a.chapitre-lien:hover { background: none; transform: none; text-decoration: underline; text-underline-offset: 4px; }