/* Ajouts de la refonte du 1er octobre 2026, dans la DA du site en ligne
   (Archivo, fond rosé, encre chaude, verre). Rien ici ne redéfinit un
   composant existant : ce sont les nouveaux blocs (éventail de vraies
   captures, vidéo d'une minute, trois temps, univers, journal, équipe). */

/* ── Le téléphone autour d'une vraie capture ─────────────────────────────
   Même châssis que .sd-tel (tranche en dégradé, liseré, boutons), mais à la
   taille de son conteneur : --l est sa largeur. La capture porte déjà la
   barre d'état et l'îlot. Écran : 1000 × 2174. */
.vt { --l: 220px; position: relative; width: var(--l); flex: none; padding: calc(var(--l) * .035);
  border-radius: calc(var(--l) * .155);
  background: linear-gradient(100deg,#8d8d99 0%,#3b3b45 6%,#22222a 24%,#31313b 50%,#1d1d24 76%,#3b3b45 94%,#8d8d99 100%);
  box-shadow: 0 34px 64px -26px rgba(60,20,45,.5), 0 8px 20px rgba(60,20,45,.14),
              inset 0 1.5px 0 rgba(255,255,255,.34), inset 0 -1.5px 0 rgba(255,255,255,.14); }
.vt::before, .vt::after { content: ""; position: absolute; border-radius: 2px; width: 3px; }
.vt::before { left: -2px; top: 22%; height: 8%; background: linear-gradient(90deg,#9a9aa6,#43434e); }
.vt::after { right: -2px; top: 27%; height: 12%; background: linear-gradient(270deg,#9a9aa6,#43434e); }
.vt-ecran { position: relative; aspect-ratio: 1000 / 2174; border-radius: calc(var(--l) * .125); overflow: hidden;
  background: #FDF3F8; box-shadow: inset 0 0 0 1px rgba(255,255,255,.5); }
.vt-ecran img, .vt-ecran video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.vt-fig { display: flex; flex-direction: column; align-items: center; gap: 12px; margin: 0; }
.vt-fig figcaption { font-size: 13.5px; line-height: 1.45; color: var(--ink-3); text-align: center; max-width: 30ch; }

/* ── Le héros : l'éventail de cinq vraies captures (recette Tiimo) ──────
   Fiche App Store : le téléphone du milieu droit, plus grand et devant ;
   les voisins plus petits, inclinés, en retrait ; les extrêmes encore plus
   petits et atténués. Tout est en cqw : .ev mesure la scène, chaque .ev-tel
   se mesure lui-même. En %, border-radius rapporte la verticale à la hauteur
   et donnait des coins en ellipse ; en cqw les coins sont ronds. */
.hero h1 .suite { display: block; }
@media (min-width: 760px) { .hero h1 { max-width: none; } }
.hero .dispo { margin-top: 14px; font-size: 14.5px; font-weight: 600; color: var(--ink-2); }
.hero .decompte { margin-top: 10px; font-size: 13px; color: var(--ink-3); }
.ev { container-type: inline-size; position: relative; width: 100%; max-width: 980px;
  margin: clamp(26px, 4vh, 44px) auto 0; aspect-ratio: 100 / 58; }
.hero .ev[data-reveal] { transform: none; }
.ev-tel { --x: 50; --w: 25; --r: 0deg; --dy: 0; container-type: inline-size; position: absolute;
  top: calc(46% + var(--dy) * 1cqw); left: calc(var(--x) * 1%); width: calc(var(--w) * 1cqw);
  translate: -50% -50%; rotate: var(--r); }
.ev-tel.c  { z-index: 3; }
.ev-tel.g1 { --x: 32.5; --w: 20.5; --r: -5deg; --dy: 2.5; z-index: 2; }
.ev-tel.d1 { --x: 67.5; --w: 20.5; --r: 5deg;  --dy: 2.5; z-index: 2; }
.ev-tel.g2 { --x: 18.5; --w: 16.5; --r: -9deg; --dy: 5;   z-index: 1; }
.ev-tel.d2 { --x: 81.5; --w: 16.5; --r: 9deg;  --dy: 5;   z-index: 1; }
/* L'ombre posée sous chaque téléphone, en plus de celle du châssis. */
.ev-tel::after { content: ""; position: absolute; z-index: -1; left: 6%; right: 6%; bottom: -7cqw; height: 16cqw;
  background: radial-gradient(closest-side, rgba(70,24,52,.26), rgba(70,24,52,0)); }

/* Le châssis d'un iPhone 16 Pro : bande titane, bord noir, écran au rayon
   55 pt sur 402 (13,7 % de sa largeur). La capture porte déjà l'îlot. */
.ev .vt { --l: 100cqw; width: 100%; padding: 3cqw; border: 1.15cqw solid transparent; border-radius: 16.7cqw;
  background: linear-gradient(#0a0a0d, #0a0a0d) padding-box,
    linear-gradient(140deg, #e2dfe6 0%, #8a8691 16%, #55525c 42%, #6f6b76 64%, #c9c5ce 86%, #8a8691 100%) border-box;
  box-shadow: 0 2cqw 4cqw -1cqw rgba(60,20,45,.22), 0 16cqw 26cqw -9cqw rgba(60,20,45,.42); }
.ev .vt::before, .ev .vt::after { width: max(2px, 1cqw); border-radius: 1cqw 0 0 1cqw;
  background: linear-gradient(90deg, #b9b5bf, #6a6671); }
.ev .vt::before { left: calc(-2.15cqw); top: 21%; height: 9%; }
.ev .vt::after { left: auto; right: calc(-2.15cqw); top: 26%; height: 13%; border-radius: 0 1cqw 1cqw 0;
  background: linear-gradient(270deg, #b9b5bf, #6a6671); }
.ev .vt-ecran { border-radius: 12.6cqw; box-shadow: none; }
/* Le reflet de la vitre, puis le voile qui recule les téléphones du bord. */
.ev .vt-ecran::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(118deg, rgba(255,255,255,.2) 0%, rgba(255,255,255,.05) 34%, rgba(255,255,255,0) 34.2%); }
.ev .vt-ecran::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: rgba(251,243,247,0); }
.ev-tel.g1 .vt-ecran::before, .ev-tel.d1 .vt-ecran::before { background: rgba(251,243,247,.12); }
.ev-tel.g2 .vt-ecran::before, .ev-tel.d2 .vt-ecran::before { background: rgba(251,243,247,.3); }

/* Seli s'accoude au téléphone du milieu, du côté gauche. */
.ev-seli { position: absolute; z-index: 4; width: 66cqw; height: auto; left: -45cqw; bottom: 2cqw; pointer-events: none; }

/* L'entrée : les téléphones partent du centre et s'ouvrent en éventail,
   0,8 s avec un léger dépassement, puis plus rien ne bouge. */
@media (prefers-reduced-motion: no-preference) {
  .ev.vu .ev-tel { animation: ev-ouvre 800ms cubic-bezier(.3, 1.32, .55, 1) 520ms both; }
  .ev.vu .ev-tel.c { animation-name: ev-pose; }
  .ev.vu .ev-seli { animation: ev-seli 520ms cubic-bezier(.3, 1.4, .55, 1) 1080ms both; }
}
@keyframes ev-ouvre {
  from { left: 50%; rotate: 0deg; top: 50%; opacity: 0; }
  30% { opacity: 1; }
}
@keyframes ev-pose { from { top: 52%; opacity: 0; } 30% { opacity: 1; } }
@keyframes ev-seli { from { opacity: 0; translate: 6cqw 4cqw; scale: .85; } }

@media (max-width: 759px) {
  /* Au téléphone : trois téléphones, celui du milieu assez grand pour se lire. */
  .ev { aspect-ratio: 100 / 112; }
  .ev-tel { top: calc(47% + var(--dy) * 1cqw); }
  .ev-tel.c  { --w: 48; }
  .ev-tel.g1 { --x: 23; --w: 36; --r: -6deg; --dy: 4; }
  .ev-tel.d1 { --x: 77; --w: 36; --r: 6deg;  --dy: 4; }
  .ev-tel.g2, .ev-tel.d2 { display: none; }
  .ev-seli { width: 58cqw; left: -34cqw; bottom: 1cqw; }
}
.ev-legendes { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 10px; margin: 22px auto 0; max-width: 720px; }
.ev-legendes li { font-size: 13px; font-weight: 600; color: var(--ink-2); background: rgba(255,255,255,.66);
  border: 1px solid var(--glass-bord); border-radius: 999px; padding: 6px 12px; }

/* ── La vidéo d'une minute, en grand ─────────────────────────────────── */
.film { position: relative; margin: 26px auto 0; max-width: 1040px; aspect-ratio: 16 / 9; border-radius: 26px; overflow: hidden;
  background: #241B22; box-shadow: 0 40px 80px -36px rgba(60,20,45,.5), 0 0 0 1px rgba(255,255,255,.6); }
.film video { width: 100%; height: 100%; object-fit: cover; display: block; }
.film-lire { position: absolute; inset: 0; display: grid; place-items: center; border: 0; background: linear-gradient(transparent 55%, rgba(36,27,34,.18)); cursor: pointer; }
.film-lire span { width: 72px; height: 72px; border-radius: 50%; background: var(--ink); display: grid; place-items: center;
  box-shadow: 0 14px 30px -10px rgba(36,27,34,.6); transition: transform 160ms var(--ease); }
.film-lire:hover span { transform: scale(1.06); }
.film-lire svg { width: 26px; height: 26px; fill: #fff; margin-left: 4px; }
.film-lire:focus-visible { outline: 3px solid var(--accent); outline-offset: -6px; }
.film.joue .film-lire { display: none; }
.film-note { margin-top: 12px; font-size: 13px; color: var(--ink-3); text-align: center; }

/* ── Comment ça marche, en trois temps ───────────────────────────────── */
.temps { list-style: none; display: grid; gap: 18px; margin-top: 30px; counter-reset: t; }
.temps-c { counter-increment: t; display: flex; flex-direction: column; padding: 24px 22px 22px; border-radius: 26px; }
.temps-n { width: 34px; height: 34px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center;
  font-weight: 700; font-size: 15px; }
.temps-c h3 { margin-top: 14px; font-size: 21px; font-weight: 700; letter-spacing: -.02em; }
.temps-c > p { margin-top: 8px; font-size: 15px; line-height: 1.55; color: var(--ink-2); }
.temps-c .vt-fig { margin-top: auto; padding-top: 20px; }
.temps-c .vt { --l: 180px; }
@media (max-width: 759px) {
  .temps { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 14px; scrollbar-width: none;
    margin-left: calc(var(--gut) * -1); margin-right: calc(var(--gut) * -1); padding: 4px var(--gut) 20px; scroll-padding-left: var(--gut); }
  .temps::-webkit-scrollbar { display: none; }
  .temps-c { flex: none; width: min(300px, calc(100vw - 72px)); scroll-snap-align: start; }
}
@media (min-width: 760px) { .temps { grid-template-columns: repeat(3, 1fr); } .temps-c .vt { --l: 200px; } }
.glisse { margin-top: 2px; font-size: 13px; color: var(--ink-3); text-align: center; }
@media (min-width: 760px) { .glisse { display: none; } }

/* ── Ce qu'il y a dedans : texte et vrai écran, en alternance ────────── */
.dedans { display: grid; gap: 28px; align-items: center; padding: 36px 0; }
.dedans + .dedans { border-top: 1px solid var(--trait); }
.dedans .vt { --l: 230px; }
.dedans h3 { font-size: clamp(22px, 2.6vw, 30px); font-weight: 700; letter-spacing: -.025em; line-height: 1.15; }
.dedans p { margin-top: 10px; font-size: 16.5px; line-height: 1.6; color: var(--ink-2); max-width: 44ch; }
@media (min-width: 760px) {
  .dedans { grid-template-columns: 1fr 1fr; gap: 56px; }
  .dedans:nth-child(even) .vt-fig { order: -1; }
}
.seli-deco { width: 96px; height: auto; display: block; }

/* ── Le prix sur l'accueil ───────────────────────────────────────────── */
.prix-ac { display: grid; gap: 18px; margin-top: 26px; }
.prix-ac .verre { padding: 24px 22px; border-radius: 24px; }
.prix-ac .gros { font-size: clamp(28px, 3.4vw, 38px); font-weight: 700; letter-spacing: -.03em; }
.prix-ac .gros small { font-size: 16px; font-weight: 600; color: var(--ink-2); letter-spacing: 0; white-space: nowrap; }
.prix-ac .fin { margin-top: 6px; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.prix-ac ul { list-style: none; display: grid; gap: 8px; margin-top: 12px; }
.prix-ac li { font-size: 15px; line-height: 1.5; padding-left: 22px; position: relative; }
.prix-ac li::before { content: ""; position: absolute; left: 2px; top: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
@media (min-width: 760px) { .prix-ac { grid-template-columns: 1.2fr 1fr; align-items: stretch; } }

/* ── L'univers Seli : un rail d'émissions ────────────────────────────── */
.emissions { list-style: none; display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  margin: 26px calc(var(--gut) * -1) 0; padding: 6px var(--gut) 22px; scroll-padding-left: var(--gut); }
.emissions::-webkit-scrollbar { display: none; }
.emission { flex: none; width: min(280px, calc(100vw - 80px)); scroll-snap-align: start; border-radius: 24px; overflow: hidden;
  background: #fff; box-shadow: var(--glass-ombre); text-decoration: none; color: inherit; display: flex; flex-direction: column; }
.emission img { width: 100%; aspect-ratio: 1; height: auto; object-fit: cover; display: block; }
.emission-c { padding: 16px 18px 20px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.emission-c b { font-size: 18px; line-height: 1.25; letter-spacing: -.015em; }
.emission-c span { font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.emission-c .dans-app { margin-top: 4px; font-size: 13px; font-weight: 600; color: var(--ink); background: var(--accent-tint); border-radius: 10px; padding: 7px 9px; }
.emission-c .bientot { margin-top: auto; padding-top: 6px; font-size: 12.5px; font-weight: 600; color: var(--ink-3); }
@media (min-width: 1100px) { .emissions { overflow: visible; justify-content: center; flex-wrap: wrap; } }
.univers-pied { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 8px; }
.univers-pied .reseaux { font-size: 13.5px; color: var(--ink-3); }
.univers-pied .reseaux a { color: var(--ink-2); font-weight: 600; display: inline-flex; align-items: center; min-height: 44px; }
.portes { display: grid; gap: 12px; margin-top: 22px; }
@media (min-width: 760px) { .portes { grid-template-columns: 1fr 1fr; } }
.porte { display: flex; align-items: center; gap: 14px; min-height: 72px; padding: 10px 18px 10px 10px; border-radius: 22px;
  text-decoration: none; color: var(--ink); font-size: 15px; line-height: 1.4; font-weight: 600; }
.porte img { width: 52px; height: 52px; border-radius: 16px; object-fit: cover; flex: none; }
.porte .rond { width: 52px; height: 52px; border-radius: 16px; flex: none; display: grid; place-items: center; background: #DDF5F2; }
.porte .rond img { width: 46px; height: auto; border-radius: 0; object-fit: contain; }

/* ── Le journal sur l'accueil ────────────────────────────────────────── */
.journal-ac { display: grid; gap: 16px; margin-top: 26px; }
@media (min-width: 760px) { .journal-ac { grid-template-columns: repeat(3, 1fr); } }
.art { display: flex; flex-direction: column; border-radius: 22px; overflow: hidden; background: #fff; box-shadow: var(--glass-ombre);
  text-decoration: none; color: inherit; }
.art img { width: 100%; aspect-ratio: 16 / 9; height: auto; object-fit: cover; display: block; }
.art-c { padding: 14px 16px 18px; display: grid; gap: 6px; }
.art-c .rub { justify-self: start; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-ink);
  background: var(--accent-tint); border-radius: 999px; padding: 4px 9px; }
.art-c b { font-size: 17px; line-height: 1.3; letter-spacing: -.012em; }
.art-c small { font-size: 13px; line-height: 1.45; color: var(--ink-3); }
.art:hover b { text-decoration: underline; text-underline-offset: 3px; }

/* ── Qui on est ──────────────────────────────────────────────────────── */
.qui { display: grid; gap: 24px; align-items: center; }
@media (min-width: 760px) { .qui { grid-template-columns: 1fr 1.1fr; gap: 48px; } }
.photo-a-venir { aspect-ratio: 4 / 3; border-radius: 24px; display: grid; place-items: center; text-align: center;
  background: var(--foil-soft); border: 1.5px dashed rgba(196,43,107,.35); color: var(--ink-2); font-weight: 600; font-size: 14.5px; }
.photo-a-venir img { width: 110px; height: auto; margin: 0 auto 6px; display: block; }
.signature { margin-top: 14px; font-weight: 700; }

/* ── Accueil : quelques retouches de sections existantes ─────────────── */
.rassure + .lien-suite, .souv + .lien-suite { margin-top: 16px; }
.lien-suite { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 600; color: var(--accent-ink); text-decoration: none; }
.lien-suite:hover { text-decoration: underline; text-underline-offset: 3px; }
.lien-suite svg { width: 15px; height: 15px; }

/* Le pied garde son dessin ; il passe de trois à quatre listes. */
@media (min-width: 980px) { .pied-in { grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr; } }
@media (max-width: 719px) {
  .pied-in { grid-template-columns: 1fr 1fr; }
  .pied-marque { grid-column: 1 / -1; }
}
@media (max-width: 759px) { .ev-legendes { display: none; } }

/* ═══ Pages intérieures de la refonte : même grammaire que l'accueil ═══ */
[hidden] { display: none !important; }
.page-h { padding: clamp(120px, 16vh, 168px) 0 24px; position: relative; z-index: 2; }
.page-h h1 { margin-top: 12px; font-size: clamp(34px, 5vw, 56px); max-width: 18ch; }
.page-h .actions { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 12px; }
.page-h .seli-tete { width: 120px; height: auto; display: block; margin-bottom: 8px; }
.page-h .logo-tete { width: 132px; height: 132px; border-radius: 30px; box-shadow: var(--glass-ombre); margin-bottom: 18px; display: block; }
.carte { padding: 24px 22px; border-radius: 24px; }
.carte h2, .carte h3 { max-width: none; }
.carte h3 { font-size: 20px; font-weight: 700; letter-spacing: -.02em; line-height: 1.25; }
.carte p + p { margin-top: 10px; }
.carte .txt, .txt { font-size: 16px; line-height: 1.6; color: var(--ink-2); }
.txt b { color: var(--ink); }
.txt a, .fine a { color: var(--accent-ink); font-weight: 600; }
.fine { font-size: 13.5px; line-height: 1.5; color: var(--ink-3); }
.grille-c { display: grid; gap: 16px; margin-top: 26px; }
@media (min-width: 760px) { .grille-c.deux { grid-template-columns: 1fr 1fr; } .grille-c.trois { grid-template-columns: repeat(3, 1fr); } }
.ico-r { width: 44px; height: 44px; border-radius: 14px; background: var(--accent-tint); color: var(--accent-ink); display: grid; place-items: center; margin-bottom: 14px; }
.ico-r svg { width: 22px; height: 22px; }
.carte-encre { background: var(--ink); color: #fff; border-color: transparent; }
.carte-encre .txt, .carte-encre .fine { color: #E6DDE3; }
.carte-encre .champ { background: #fff; }
.carte-encre .err { color: #FFB3C7; }

/* Sommaire en pastilles (page /app) */
.sommaire { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 20px calc(var(--gut) * -1) 0; padding: 4px var(--gut) 6px; }
.sommaire::-webkit-scrollbar { display: none; }
.sommaire a { flex: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; text-decoration: none;
  color: var(--ink); font-weight: 600; font-size: 14.5px; background: var(--glass); border: 1px solid var(--glass-bord); }
@media (min-width: 1000px) { .sommaire { flex-wrap: wrap; overflow: visible; } }

/* Exemples avant / après */
.ex-avs { display: grid; gap: 12px; margin-top: 18px; }
.ex-av { text-align: left; padding: 14px 16px; border-radius: 18px; display: grid; gap: 8px; }
.ex-av .ex-dit { font-weight: 600; font-size: 15.5px; line-height: 1.5; }
.ex-av .ex-fait { font-size: 14.5px; line-height: 1.55; color: var(--ink-2); padding-left: 12px; border-left: 3px solid var(--accent); }

/* Listes */
.liste-ok { list-style: none; display: grid; gap: 10px; margin-top: 16px; }
.liste-ok li { position: relative; padding-left: 30px; font-size: 16px; line-height: 1.55; }
.liste-ok li::before { content: ""; position: absolute; left: 0; top: 3px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--accent-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C42B6B' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/12px no-repeat; }
.etapes { list-style: none; counter-reset: e; display: grid; gap: 12px; margin-top: 18px; }
.etapes li { counter-increment: e; display: grid; grid-template-columns: 36px 1fr; gap: 14px; align-items: center; padding: 14px 16px; border-radius: 18px; font-size: 16px; line-height: 1.5; }
.etapes li::before { content: counter(e); width: 36px; height: 36px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; font-weight: 700; }
.chiffre b { display: block; font-size: clamp(24px, 3vw, 32px); font-weight: 700; letter-spacing: -.03em; color: var(--ink); margin-bottom: 4px; }

/* Formulaires */
.formulaire { display: grid; gap: 14px; margin-top: 20px; }
.formulaire label { display: grid; gap: 6px; font-size: 14.5px; font-weight: 600; }
.formulaire fieldset { border: 0; display: grid; gap: 8px; }
.formulaire legend { font-size: 14.5px; font-weight: 600; margin-bottom: 8px; }
.formulaire textarea.champ { min-height: 120px; padding-top: 12px; resize: vertical; font-family: inherit; }
.formulaire .btn { min-height: 52px; justify-self: start; padding: 0 26px; }
.cases { display: flex; flex-wrap: wrap; gap: 8px; }
.cases label { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 999px; background: #fff; border: 1px solid var(--trait); cursor: pointer; }
.cases input { width: 18px; height: 18px; accent-color: var(--accent); }
.confirme { margin-top: 14px; padding: 16px 18px; border-radius: 18px; background: #E7F7EE; color: #11502F; font-weight: 600; }

/* Tarifs */
.bascule { display: inline-flex; gap: 4px; padding: 5px; border-radius: 999px; margin-top: 24px; }
.bascule button { min-height: 44px; padding: 0 18px; border: 0; border-radius: 999px; background: none; font: inherit; font-weight: 600; font-size: 15px; cursor: pointer; color: var(--ink); display: inline-flex; align-items: center; gap: 8px; }
.bascule button[aria-pressed="true"] { background: var(--ink); color: #fff; }
.bascule em { font-style: normal; font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--accent-tint); color: var(--accent-ink); }
.offres { display: grid; gap: 16px; margin-top: 24px; }
@media (min-width: 900px) { .offres { grid-template-columns: repeat(3, 1fr); } }
.offre-c { display: flex; flex-direction: column; gap: 10px; padding: 26px 22px; border-radius: 26px; }
.offre-c.mise { border: 2px solid var(--ink); }
.offre-c h2 { font-size: 24px; }
.offre-c .accroche { font-weight: 600; color: var(--ink-2); }
.offre-c .gros { font-size: 34px; font-weight: 700; letter-spacing: -.03em; }
.offre-c .gros small { font-size: 15px; font-weight: 600; color: var(--ink-2); letter-spacing: 0; }
.offre-c .liste-ok li { font-size: 15px; }
.offre-c .btn { margin-top: auto; }
[data-mode="mois"] .annee, [data-mode="annee"] .mois { display: none; }

/* Univers : la famille, le schéma, les fiches */
.famille { display: flex; justify-content: center; align-items: flex-end; margin: 26px auto 0; max-width: 620px; }
.famille img { width: 21%; height: auto; margin: 0 -1.5%; }
.famille img.centre { width: 33%; z-index: 2; }
.schema { position: relative; margin: 28px auto 0; width: min(340px, 100%); aspect-ratio: 1; }
.schema > div { position: absolute; display: grid; place-items: center; text-align: center; border-radius: 50%; font-weight: 600; font-size: 14px; line-height: 1.3; padding: 10px; }
.schema .s-c { inset: 30%; }
.schema .s-c img { width: 56px; height: auto; margin: 0 auto 2px; }
.schema .s-o { width: 36%; aspect-ratio: 1; }
.schema .o1 { left: 32%; top: -2%; } .schema .o2 { left: -2%; bottom: 4%; } .schema .o3 { right: -2%; bottom: 4%; }
/* Six fiches, même gabarit et même hauteur : la ligne « Comment participer »
   se cale en bas de chaque carte. */
.fiches { display: grid; gap: 18px; margin-top: 26px; }
@media (min-width: 760px) { .fiches { grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; } }
@media (min-width: 1100px) { .fiches { grid-template-columns: repeat(3, 1fr); } }
.fiche { border-radius: 26px; overflow: hidden; padding: 0; display: flex; flex-direction: column; }
.fiche-t { display: grid; grid-template-columns: 100px 1fr; gap: 16px; align-items: center; padding: 18px; }
.fiche-t img { width: 100px; height: 100px; border-radius: 22px; object-fit: cover; }
.fiche-t img.seule { object-fit: contain; background: var(--accent-tint); padding: 6px; }
.fiche-t img.tour { background: #DDF5F2; }
.fiche-t h3 { font-size: 21px; font-weight: 700; letter-spacing: -.02em; }
.fiche-t p { margin-top: 4px; font-size: 15px; line-height: 1.45; color: var(--ink-2); font-weight: 600; }
.fiche dl { padding: 0 18px 18px; display: grid; gap: 12px; }
.fiche dt { font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.fiche dd { margin-top: 2px; font-size: 15px; line-height: 1.5; }
.fiche dd.regle { background: #F1ECFF; border-radius: 12px; padding: 8px 10px; font-weight: 700; color: #3E2A86; }
.fiche-p { margin-top: auto; padding: 14px 18px 20px; display: grid; gap: 8px; justify-items: start;
  border-top: 1px solid var(--trait); background: rgba(255,255,255,.45); }
.fiche-p p { font-size: 15px; line-height: 1.5; }
.fiche-p p a { color: var(--accent-ink); font-weight: 600; }
.fiche-p .fiche-pt { font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-ink); }
.fiche-p .lien-suite { margin-top: 0; }

/* Équipe, presse, journal */
.duo { display: grid; gap: 16px; margin-top: 26px; }
@media (min-width: 760px) { .duo { grid-template-columns: 1fr 1fr; } }
.duo .photo-a-venir { aspect-ratio: 1; }
.duo h3 { margin-top: 12px; font-size: 20px; font-weight: 700; }
.dates { list-style: none; display: grid; gap: 10px; margin-top: 18px; }
.dates li { padding: 14px 16px; border-radius: 18px; font-size: 15.5px; line-height: 1.5; }
.dates b { display: block; }
.liste-art { list-style: none; margin-top: 22px; border-radius: 24px; overflow: hidden; padding: 0; }
.liste-art li + li { border-top: 1px solid var(--trait); }
.liste-art a { display: grid; gap: 6px; padding: 18px 20px; text-decoration: none; color: inherit; }
.liste-art a:hover b { text-decoration: underline; text-underline-offset: 3px; }
.liste-art b { font-size: 17px; line-height: 1.35; letter-spacing: -.012em; }
.liste-art .rub { justify-self: start; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-ink); background: var(--accent-tint); border-radius: 999px; padding: 4px 9px; }

/* Rejoindre */
.inscription { max-width: 540px; margin: 0 auto; text-align: center; }
.inscription .formulaire { text-align: left; }
.inscription .formulaire .btn { justify-self: stretch; }
.boite .merci-r { display: none; }
.boite.envoye .formulaire, .boite.envoye .err { display: none; }
.boite.envoye .merci-r { display: block; }
.merci-r img { width: 140px; height: auto; margin: 0 auto 8px; display: block; }
select.champ.vide { color: var(--ink-3); }
.ex-av p { margin: 0; max-width: none; }
.dedans p.fine { font-size: 13.5px; color: var(--ink-3); }
.schema { width: min(360px, 100%); }
.schema > div { font-size: 13px; line-height: 1.25; padding: 14px; }
.schema .s-c { inset: 32%; padding: 6px; }
.schema .s-c img { width: 44px; }
.schema .s-o { width: 39%; }
.schema .o1 { left: 30.5%; top: -1%; } .schema .o2 { left: -1%; bottom: 3%; } .schema .o3 { right: -1%; bottom: 3%; }
.famille img { width: 22%; }
.famille img.centre { width: 30%; }
/* Les PNG de la Seli vectorielle ont une large marge transparente : on les
   affiche plus grands que la place qu'ils semblent prendre. */
.seli-deco { width: 140px; }
.page-h .seli-tete { width: 170px; margin: -16px 0 -6px -18px; }
/* .seli-tete existe aussi dans v4.css (en-tête du chat) : on retire son filet et son padding. */
.page-h img.seli-tete { padding: 0; border: 0; }
.famille { max-width: 760px; }
.schema .s-c img { display: block; width: 58px; margin: -4px auto -4px; }
.schema .s-c > div { white-space: nowrap; }
.fiche-t img.seule { padding: 0; }
.photo-a-venir img { width: 150px; margin-bottom: -4px; }
.etapes li { background: rgba(255,255,255,.78); border: 1px solid var(--glass-bord); box-shadow: var(--glass-ombre); }
.dates li { background: rgba(255,255,255,.78); border: 1px solid var(--glass-bord); box-shadow: var(--glass-ombre); }
.carte .champ, .formulaire .champ { background: #fff; border: 1px solid rgba(36,27,34,.16); }
@media (max-width: 719px) { .pied-marque { margin-bottom: 12px; } }
.carte-encre .btn-verre { background: #fff; color: var(--ink); border-color: #fff; }
@media (max-width: 719px) { .pied-in { row-gap: 28px; } .pied-marque { margin-bottom: 8px; } }

/* ── Les espaces de l'app : des onglets comme la barre de l'app ─────────
   Téléphone : une rangée de pastilles qui défile, le téléphone, puis le texte.
   Ordinateur : trois colonnes serrées, onglets / texte / téléphone, centrées
   sur la même ligne pour qu'aucune ne laisse de grand vide. */
#espaces { padding: 56px 0 52px; }
.esp { margin-top: 22px; }
.esp-onglets { position: relative; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none;
  margin: 0 calc(var(--gut) * -1); padding: 4px var(--gut) 14px; scroll-padding: 0 var(--gut); }
.esp-onglets::-webkit-scrollbar { display: none; }
.esp-o { flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px 0 13px;
  border-radius: 999px; border: 1px solid var(--trait); background: rgba(255,255,255,.72); color: var(--ink-2);
  font: inherit; font-size: 15px; font-weight: 600; white-space: nowrap; cursor: pointer;
  transition: background-color 180ms var(--ease), color 180ms var(--ease), border-color 180ms var(--ease); }
.esp-o svg { width: 19px; height: 19px; flex: none; }
.esp-o:hover { color: var(--ink); }
.esp-o[aria-selected="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.esp-o:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.esp-p { display: grid; gap: 20px; justify-items: center; padding-top: 4px; }
.esp-p[hidden] { display: none; }
.esp-p:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; border-radius: 18px; }
.esp-p:not([hidden]) { animation: esp-entre 320ms var(--ease) both; }
@keyframes esp-entre { from { opacity: 0; transform: translateY(8px); } }
.esp-tel .vt { --l: min(250px, 64vw); }
.esp-t { width: 100%; max-width: 560px; }
.esp-t h3 { font-size: clamp(23px, 2.4vw, 30px); font-weight: 700; letter-spacing: -.025em; line-height: 1.15; }
.esp-t > p:not(.esp-fait) { margin-top: 8px; font-size: 16px; line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }
/* Le fait chiffré : la seule chose en couleur du panneau. */
.esp-fait { margin-top: 14px; padding: 12px 16px; border-radius: 16px; background: var(--accent-tint);
  border: 1px solid rgba(232,68,127,.16); font-size: 14.5px; line-height: 1.45; color: var(--ink-2); }
.esp-fait b { display: block; font-size: 21px; line-height: 1.2; letter-spacing: -.02em; color: var(--accent-ink); }
.esp-fx { list-style: none; display: grid; gap: 4px; margin-top: 12px; }
.esp-fx li, .aussi li { display: flex; align-items: center; gap: 12px; font-size: 15px; line-height: 1.4; color: var(--ink); }
.esp-fx li { min-height: 44px; }
.esp-ic { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px;
  background: #fff; border: 1px solid var(--trait); color: var(--accent-ink); }
.esp-ic svg { width: 18px; height: 18px; }

/* Et aussi : tuiles au même gabarit, 2 colonnes au téléphone, 4 à l'ordinateur. */
.esp-aussi { margin-top: 30px; }
.esp-aussi h3 { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.aussi { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 10px; margin-top: 12px; }
.aussi li { flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px; font-size: 13.5px; border-radius: 16px;
  background: rgba(255,255,255,.72); border: 1px solid var(--trait); font-weight: 600; text-wrap: pretty; }
.aussi .esp-ic { width: 32px; height: 32px; background: var(--accent-tint); border-color: transparent; }
#espaces .lien-suite { margin-top: 18px; }

@media (min-width: 900px) {
  .esp { display: grid; grid-template-columns: 210px 1fr; gap: 40px; align-items: center; margin-top: 28px; }
  .esp-onglets { flex-direction: column; overflow: visible; margin: 0; padding: 0; gap: 6px; }
  .esp-o { width: 100%; min-height: 52px; padding: 0 16px; border-radius: 16px; font-size: 15.5px; }
  .esp-p { grid-column: 2; grid-row: 1; grid-template-columns: minmax(0, 1fr) auto; align-items: center; justify-items: stretch; gap: 44px; padding-top: 0; }
  .esp-tel { order: 2; }
  .esp-tel .vt { --l: 276px; }
  .esp-fx li { min-height: 50px; font-size: 15.5px; }
  .esp-ic { width: 36px; height: 36px; }
  .aussi { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
  .aussi li { flex-direction: row; align-items: center; padding: 14px 16px; font-size: 14px; }
  /* Le chapo à droite du titre : la moitié droite de l'en-tête restait vide. */
  #espaces .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 48px; }
  #espaces .wrap > * { grid-column: 1 / -1; }
  #espaces .wrap > .mini, #espaces .wrap > h2 { grid-column: 1; }
  #espaces .wrap > .chapo { grid-column: 2; grid-row: 2; align-self: end; margin: 0; }
  #espaces .lien-suite { justify-self: start; }
}
@media (prefers-reduced-motion: reduce) {
  .esp-p:not([hidden]) { animation: none; }
  .esp-o { transition: none; }
}

/* ── L'environnement Seli : six cartes au même gabarit ─────────────────
   Rail à glisser au téléphone, trois colonnes à l'ordinateur. Même hauteur,
   même carré, la dernière ligne calée en bas de chaque carte. */
.env > li { display: flex; flex: none; }
.env .emission { flex: 1; }
.env .emission-c b { min-height: 2.5em; }
@media (min-width: 900px) {
  .env { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; overflow: visible; margin: 30px 0 0; padding: 6px 0 22px; }
  .env .emission { width: auto; }
}

/* La barre porte six liens depuis le retour de Partenaires, et le logo est
   plus large : entre 900 et 1023 px, on serre l'espacement et le bouton prend
   son libellé court plutôt que de perdre un lien. */
@media (min-width: 900px) and (max-width: 1023px) {
  .nav-in { gap: 18px; }
  .tete .cta-long { display: none; }
  .tete .cta-court { display: inline; }
}

/* Le logo horizontal : 32 px dans la barre, 28 dans le menu, 36 dans le pied.
   srcset 1x / 2x pour rester net sur les écrans rétina. */
.marque .logo { height: 32px; width: auto; display: block; }
.jeton-marque { padding: 6px 16px 6px 8px; }
.menu-tete .logo { height: 28px; width: auto; display: block; }
.menu-tete .menu-sous { font-size: 12.5px; color: var(--ink-3); }
.pied-logo .logo { height: 36px; width: auto; display: block; }
/* À 390 px, le logo, le bouton et le menu doivent tenir sur une ligne. */
@media (max-width: 420px) { .marque .logo { height: 28px; } .jeton-marque { padding: 6px 12px 6px 6px; } }

/* Le logo se pose seul, sans pastille (fondateur, 01/10 : « la pastille est
   complètement arrondie alors que le logo ne l'est pas ; transparent, pour
   que ce soit harmonisé »). */
.jeton.jeton-marque { padding: 0; }
.jeton.jeton-marque::before, .jeton.jeton-marque::after { display: none; }
@media (max-width: 420px) { .jeton-marque { padding: 0; } }

/* Héros façon Tiimo (fondateur, 01/10) : un titre, une ligne, et les
   téléphones remontent juste dessous. Le bouton reste dans la barre. */
.hero .dispo { margin-top: 18px; font-size: 16px; }
.hero .ev { margin-top: clamp(22px, 3.2vh, 36px); }

/* Le logo retrouve un fond, aux coins peu arrondis comme l'icône. */
.jeton.jeton-marque { padding: 7px 14px 7px 7px; border-radius: 14px; }
.jeton.jeton-marque::before, .jeton.jeton-marque::after { display: block; }
@media (max-width: 420px) { .jeton.jeton-marque { padding: 6px 11px 6px 6px; border-radius: 12px; } }

/* Héros v3 (fondateur, 01/10, 19 h 40). */
/* Mistral se lit comme le « App of the Year » de Tiimo : sans pastille, en grand. */
.hero .mistral { background: none; border: 0; box-shadow: none; padding: 0;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  font-size: clamp(17px, 1.7vw, 24px); font-weight: 600; letter-spacing: -.01em; gap: 10px; color: var(--ink); }
.hero .mistral::before, .hero .mistral::after { display: none; }
.hero .mistral svg { width: clamp(22px, 2vw, 30px); height: auto; }
@media (max-width: 600px) { .hero .mistral { padding: 0; font-size: 16px; } .hero .mistral svg { width: 20px; height: auto; } }
/* Une Seli qui fait coucou au bout de la phrase, à la place de la bouille. */
.hero h1 .seli-titre { display: inline-block; height: 1.55em; width: auto; vertical-align: -0.42em;
  margin-left: .08em; margin-right: -.2em; filter: drop-shadow(0 6px 10px rgba(122,31,80,.18)); }
.hero .dispo { font-size: 16px; }
.hero .coco-ligne { margin-top: 10px; }
.hero .coco { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px;
  font-size: 14px; font-weight: 600; color: var(--accent); background: rgba(232,68,127,.10);
  text-decoration: none; }
.hero .coco::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.hero .coco:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
/* Le fond du logo, aux coins encore moins arrondis. */
.jeton.jeton-marque { border-radius: 9px; }
@media (max-width: 420px) { .jeton.jeton-marque { border-radius: 8px; } }

/* Héros v4 (fondateur, 01/10, 19 h 55) : positionnement revu. Un rythme
   régulier entre Mistral, le titre, la ligne et les téléphones ; la Seli
   détourée colle au point final ; la ligne et l'étiquette sur une rangée. */
.hero .mistral { margin-bottom: clamp(16px, 2.4vh, 26px); }
.hero h1 { max-width: 22ch; }
.hero h1 .seli-titre { height: 1.02em; width: auto; vertical-align: -0.1em; margin: 0 0 0 .16em;
  filter: drop-shadow(0 6px 12px rgba(122,31,80,.20)); }
.hero-sous { display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: 10px 14px; margin-top: clamp(16px, 2.4vh, 26px); }
.hero-sous .dispo { margin: 0; font-size: 16px; font-weight: 600; color: var(--ink-2); }
.hero-sous .coco { margin: 0; }
.hero .ev { margin-top: clamp(28px, 4vh, 44px); }
@media (max-width: 600px) {
  .hero h1 { max-width: 15ch; }
  .hero-sous { flex-direction: column; gap: 10px; }
  .hero-sous .dispo { font-size: 15px; }
}

/* Héros v5 (fondateur, 01/10, 20 h) : « étudiant » mis en avant, et la
   première phrase tient sur une ligne dès qu'il y a la place. */
.hero h1 { max-width: none; }
.hero h1 .l1, .hero h1 .suite { display: block; }
.hero h1 .etu { font-style: normal; background: linear-gradient(100deg, #F58F6C, #E8447F 45%, #B466E4);
  -webkit-background-clip: text; background-clip: text; color: transparent; }
@media (min-width: 900px) {
  .hero h1 { font-size: clamp(34px, 3.75vw, 60px); }
  .hero h1 .l1 { white-space: nowrap; }
}

/* ══ Retours du fondateur, 01/10 au soir ══════════════════════════════════ */

/* Héros : les écrans du bord se lisent. Au plus une légère atténuation. */
.ev-tel.g1 .vt-ecran::before, .ev-tel.d1 .vt-ecran::before { background: rgba(251,243,247,.04); }
.ev-tel.g2 .vt-ecran::before, .ev-tel.d2 .vt-ecran::before { background: rgba(251,243,247,.08); }

/* Un appel = un vrai bouton, centré, partout. */
.appel { display: flex; justify-content: center; margin-top: 26px; text-align: center; }
.appel .btn { white-space: normal; text-align: center; }
.btn.lien-suite { display: flex; width: fit-content; max-width: 100%; margin: 22px auto 0; color: #fff; white-space: normal; text-align: center; }
.btn.lien-suite:hover { text-decoration: none; }
.fiche-p .btn.lien-suite, .carte .btn.lien-suite, .dedans .btn.lien-suite, .merci-r .btn.lien-suite { margin-left: 0; }
.merci-r .btn.lien-suite { margin-left: auto; }

/* Le bouton de verre se perdait sur les fonds blancs : un bord et une ombre. */
.btn-verre { background: #fff; border-color: rgba(36,27,34,.16); color: var(--ink);
  box-shadow: 0 6px 16px -10px rgba(36,27,34,.45); }
.btn-verre:hover { background: #fff; border-color: rgba(36,27,34,.3); }

/* Section 1 : plus rien à droite du titre. */
#espaces .wrap > .appel { justify-self: center; }

/* Section 2 : les réseaux, centrés. */
.univers-pied { justify-content: center; margin-top: 22px; gap: 10px 12px; }
.univers-pied .reseaux { font-size: 15px; font-weight: 600; color: var(--ink-2); }
.univers-pied + .appel { margin-top: 18px; }

/* Engagements : centrés. */
#jamais .wrap.centre .chapo { margin-left: auto; margin-right: auto; }
#jamais .rassure li { text-align: center; }
#jamais .rassure .rassure-h { justify-content: center; }
#jamais .rassure p { margin-left: auto; margin-right: auto; }
#jamais .souv { text-align: left; max-width: 1040px; margin-left: auto; margin-right: auto; }

/* Prix : les deux abonnements côte à côte, le mensuel en petit. */
#tarif .chapo { margin-left: auto; margin-right: auto; }
.prix-deux { max-width: 760px; margin-left: auto; margin-right: auto; text-align: left; }
@media (min-width: 640px) { .prix-deux { grid-template-columns: 1fr 1fr; } }
.prix-deux .prix-nom { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-ink); }
.prix-deux .gros { margin-top: 4px; }
.prix-deux .prix-quoi { margin-top: 12px; font-size: 15px; line-height: 1.5; }
.pro-gratuit { max-width: 560px; margin: 18px auto 0; text-align: left; border-radius: 18px; background: rgba(255,255,255,.7);
  border: 1px solid rgba(36,27,34,.1); }
.pro-gratuit summary { min-height: 48px; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 0 18px;
  font-weight: 600; cursor: pointer; list-style: none; color: var(--accent-ink); }
.pro-gratuit summary::-webkit-details-marker { display: none; }
.pro-gratuit summary::after { content: "+"; font-size: 18px; line-height: 1; transition: transform 200ms var(--ease); }
.pro-gratuit[open] summary::after { transform: rotate(45deg); }
.pro-gratuit p { padding: 0 20px 18px; font-size: 15px; line-height: 1.55; color: var(--ink-2); text-align: center; }

/* Journal : toute la carte est un lien, la couverture cadrée en 16/9. */
.art { cursor: pointer; transition: transform 200ms var(--ease), box-shadow 200ms var(--ease); }
.art:hover { transform: translateY(-2px); }
.art-img { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--foil-soft); }
.art-img img { width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform 400ms var(--ease); }
.art:hover .art-img img { transform: scale(1.03); }
.art:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Appel final : un grand iPhone à côté du formulaire. */
.fin-grille { position: relative; display: grid; gap: 28px; justify-items: center; }
.fin-tel { position: relative; }
.fin-tel .vt { --l: min(260px, 66vw); }
.fin-seli { position: absolute; width: 130px; height: auto; right: -64px; bottom: -6px; pointer-events: none; }
.fin-c { width: 100%; }
.fin-dispo { margin-top: 10px; font-size: 14.5px; font-weight: 600; color: var(--ink-2); }
@media (min-width: 900px) {
  .fin-grille { grid-template-columns: auto minmax(0, 520px); justify-content: center; align-items: center; column-gap: 88px; }
  .fin-tel .vt { --l: 300px; }
  .fin-seli { width: 160px; right: -118px; bottom: -24px; }
}
@media (max-width: 420px) { .fin-seli { width: 104px; right: -40px; } }

/* La bulle « Essaye-moi » : la vraie Seli, pas la pastille. */
.seli-bulle .seli-bulle-img { width: 40px; height: auto; flex: none; display: block; margin: -6px 0 -2px; }
@media (max-width: 600px) { .seli-bulle .seli-bulle-img { width: 40px; margin: 0; } }

/* Éventail façon Tiimo (fondateur, 01/10, 22 h) : téléphones DROITS, grands,
   serrés, hauts en escalier, et le bas coupé par le bord de la scène. */
.ev { max-width: 1180px; aspect-ratio: 100 / 44; overflow: clip;
  -webkit-mask-image: linear-gradient(#000 82%, transparent);
  mask-image: linear-gradient(#000 82%, transparent); }
.ev-tel { top: calc(var(--dy) * 1cqw); translate: -50% 0; rotate: 0deg; }
.ev-tel.c  { --x: 50;   --w: 27;   --dy: 0;   z-index: 3; }
.ev-tel.g1 { --x: 31.5; --w: 23.5; --dy: 4;   --r: 0deg; z-index: 2; }
.ev-tel.d1 { --x: 68.5; --w: 23.5; --dy: 4;   --r: 0deg; z-index: 2; }
.ev-tel.g2 { --x: 14;   --w: 21;   --dy: 7.5; --r: 0deg; z-index: 1; }
.ev-tel.d2 { --x: 86;   --w: 21;   --dy: 7.5; --r: 0deg; z-index: 1; }
.ev-tel::after { display: none; }
.ev-tel .vt { box-shadow: 0 30px 60px -28px rgba(90,40,70,.35); }
.ev-seli { width: 52cqw; left: -38cqw; bottom: auto; top: 118cqw; }
@keyframes ev-ouvre { from { left: 50%; opacity: 0; } 30% { opacity: 1; } }
@keyframes ev-pose { from { translate: -50% 4cqw; opacity: 0; } 30% { opacity: 1; } }
@media (max-width: 759px) {
  .ev { aspect-ratio: 100 / 92; }
  .ev-tel { top: calc(var(--dy) * 1cqw); }
  .ev-tel.c  { --w: 56; --dy: 0; }
  .ev-tel.g1 { --x: 17; --w: 42; --dy: 9; --r: 0deg; }
  .ev-tel.d1 { --x: 83; --w: 42; --dy: 9; --r: 0deg; }
  .ev-seli { width: 50cqw; left: -30cqw; top: 112cqw; }
}

/* Titre du héros parfaitement centré (fondateur, 01/10, 22 h 13) : la ligne
   sans retour dépassait de son cadre vers la droite sur grand écran. En
   colonne flex, une ligne plus large que le cadre déborde des DEUX côtés. */
.hero h1 { display: flex; flex-direction: column; align-items: center; text-align: center; }
.hero h1 .l1, .hero h1 .suite { display: block; }
@media (min-width: 900px) { .hero h1 { font-size: clamp(34px, 3.45vw, 56px); } }

/* L'éventail en vrais iPhone (cadre officiel Apple) : l'image porte déjà le
   cadre, les reflets et la vitre ; plus de cadre dessiné ni de voile. */
.ev-tel .ev-mock { display: block; width: 100%; height: auto;
  filter: drop-shadow(0 28px 40px rgba(90,40,70,.28)) drop-shadow(0 6px 10px rgba(90,40,70,.12)); }
.ev-tel.g1 .ev-mock, .ev-tel.d1 .ev-mock, .ev-tel.g2 .ev-mock, .ev-tel.d2 .ev-mock { filter: drop-shadow(0 22px 32px rgba(90,40,70,.22)); }
/* Les iPhone du bord dépassent jusqu'au bord de l'écran (la section du héros
   coupe déjà), seul le bas reste coupé en fondu. */
.ev { overflow-x: visible; overflow-y: clip; }
.hero { overflow-x: clip; }
/* Le masque du fondu s'étend sur les côtés, sinon il recoupe les iPhone du bord. */
.ev { -webkit-mask-size: 300% 100%; mask-size: 300% 100%;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.ev { -webkit-mask-clip: no-clip; mask-clip: no-clip; }

/* PIED COMMUN : debut. Copié tel quel dans les pages gardées (paliers,
   partenaires, articles du journal) par pied_partout.py : ne rien écrire ici
   qui dépende d'une autre règle de ce fichier. */
/* Le pied a cinq colonnes (marque + quatre listes). */
@media (min-width: 980px) { .pied-in { grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr; } }
@media (max-width: 719px) {
  .pied-in { grid-template-columns: 1fr 1fr; row-gap: 28px; }
  .pied-marque { grid-column: 1 / -1; margin-bottom: 8px; }
}
/* Le grand « seliia » tout en bas du pied (Antoine, 02/10). Poppins comme le
   logo, le dégradé du site. La taille suit la largeur utile : le mot tient
   toujours dans l'écran, jamais de défilement de côté. Un mot dessiné, pas
   un texte : les lecteurs d'écran l'ignorent (aria-hidden). */
/* footer.pied et .pied .pied-geant : partenaires.html a une règle « .pied »
   (flex) et « .pied p » pour son formulaire, qui écraseraient celles-ci. */
footer.pied { display: block; }
.pied .pied-geant { display: block; max-width: var(--maxw); margin: 30px auto 0; padding: 0 var(--gut);
  overflow: hidden; text-align: center; user-select: none; pointer-events: none;
  font-family: Poppins, Archivo, system-ui, sans-serif; font-weight: 700;
  font-size: min(calc((min(100vw, var(--maxw)) - 2 * var(--gut)) / 2.62), 440px);
  line-height: .9; letter-spacing: -.04em; white-space: nowrap;
  background: linear-gradient(100deg, #F58F6C 0%, #EF5D8E 38%, #A78BE8 72%, #E8447F 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; }
/* PIED COMMUN : fin. */